headerView.inc 4.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8. <!--
  9. ___ .oOOOo. o o o
  10. .-' `'. .O o O O O
  11. / \ o o o o
  12. | ; o O O o
  13. | | ___. -, o .oOo. .oOo. OoOo. .oOoO' o .oOo. .oOo. .oOo. .oOoO
  14. _.._ |0) ~ (0) | _.-~-'`__.-( (_. O OooO' O o o o O o O O o O o O o o O
  15. __.-~'`_.. '.__.\ '~-. \_.-' ,.~-'` `""` `o .o O o O o O o O o o O o O o O O o
  16. ( ,.~-'` ',__ /./; ;, '.__.'` __ `OoooO' `OoO' oOoO' O o `OoO'o Oo `OoO' oOoO' `OoO' `OoO'o
  17. _`) ) .- -.__.' / | |\ \__..~-"" """-~.,_ O O
  18. `-~-' .'.''-._.-'`_./ /\ '. \ _.-~~~````~~~-._`-.__.' o' o'
  19. | | .' _.-' | | \ \ '. `~-~-` .oOOOo. o
  20. \ \/ .' \ \ '. '-._) o o O o
  21. \/ / \ \ `=.__`~-. O. O o
  22. / /\ `) ) / / `"".`\ `OOoo. oOo o
  23. , _.-'.'\ \ / / ( ( / / `O o O o .oOoO O .oOo. .oOo
  24. `-~~` ) ) .-'.' '.'. | ( o O o O o O o O o `Ooo.
  25. (/` ( (` ) ) '-; O. .O o O o O o O o O O
  26. ` '-; (-' `oooO' `oO `OoO'o `OoO'o o' `OoO' `OoO'
  27. -->
  28. <title>Cephalopod Studios&trade;</title>
  29. <!-- Bootstrap -->
  30. <!-- Latest compiled and minified CSS -->
  31. <link rel="stylesheet"
  32. href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  33. <style type="text/css">
  34. #header-logo {
  35. background: url("/images/cepha_header_logo_s.png");
  36. background-size: 307px 50px;
  37. background-repeat: no-repeat;
  38. width: 320px;
  39. height: 50px;
  40. }
  41. #bottom-bar {
  42. text-align: center;
  43. }
  44. #bottom-bar ul li {
  45. margin: 0;
  46. padding: 0;
  47. display: inline;
  48. }
  49. #bottom-bar .follow-us {
  50. width: 50px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <!-- Static navbar -->
  56. <nav class="navbar navbar-default">
  57. <div class="container-fluid">
  58. <div class="navbar-header">
  59. <button type="button" class="navbar-toggle collapsed"
  60. data-toggle="collapse" data-target="#navbar" aria-expanded="false"
  61. aria-controls="navbar">
  62. <span class="sr-only">Toggle navigation</span> <span
  63. class="icon-bar"></span> <span class="icon-bar"></span> <span
  64. class="icon-bar"></span>
  65. </button>
  66. <a id="header-logo" class="navbar-brand" href="/"></a>
  67. </div>
  68. <div id="navbar" class="navbar-collapse collapse">
  69. <ul class="nav navbar-nav">
  70. <li class="active"><a href="/">Home</a></li>
  71. <li class="dropdown"><a href="#" class="dropdown-toggle"
  72. data-toggle="dropdown" role="button" aria-expanded="false">Games <span
  73. class="caret"></span></a>
  74. <ul class="dropdown-menu" role="menu">
  75. <li class="dropdown-header">Magic Apps</li>
  76. <li><a href="/games/cardtrick">APPEAR! Cards</a></li>
  77. <li><a href="#">APPEAR! Zodiac</a></li>
  78. <li class="divider"></li>
  79. <li class="dropdown-header">Games</li>
  80. <li><a href="#">Project Strawberry</a></li>
  81. <li><a href="#">TBD</a></li>
  82. </ul></li>
  83. <li><a href="/process">Process</a></li>
  84. <li><a href="/contact-us">Contact</a></li>
  85. <li><a href="/jobs">Jobs</a></li>
  86. </ul>
  87. </div>
  88. <!--/.nav-collapse -->
  89. </div>
  90. <!--/.container-fluid -->
  91. </nav>