Advertisement
Guest User

Untitled

a guest
Feb 22nd, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.51 KB | None | 0 0
  1. <div class="navigation">
  2. <table>
  3. <tr>
  4. <td><a href="index.php">home</a></td>
  5. <td>&nbsp;</td>
  6. <td><a href="about.php">about</a></td>
  7. <td>&nbsp;</td>
  8. <td><a href="music.php">music</a></td>
  9. <td>&nbsp;</td>
  10. <td><a href="geeking.php">geeking</a></td>
  11. <td>&nbsp;</td>
  12. <td><a href="contact.php">contact</a></td>
  13. </tr>
  14. </table>
  15. </div>
  16.  
  17. div.navigation{
  18. text-align: center;
  19. color: hsla(200,50%,45%,0.6);
  20. margin: auto;
  21. font-family: monospace;
  22. letter-spacing: 2px;
  23. position: relative;
  24. top: -13px;
  25. margin: 20px auto 20px auto;
  26. width: 60%;
  27. }
  28.  
  29. .navigation table{
  30. height: 70px;
  31. }
  32.  
  33. th{
  34. text-align: center;
  35. color: hsla(180,50%,45%,0.4);
  36. font-size: 1.1em;
  37. }
  38.  
  39. table{
  40. border-collapse: collapse;
  41. margin: auto;
  42. margin-top: 0px;
  43. }
  44.  
  45. table,th{
  46. border: 0px solid black;
  47. padding: 5px;
  48. }
  49.  
  50.  
  51. .navigation a{
  52. text-decoration: none;
  53. color: hsla(200,50%,45%,0.6);
  54. background-color: transparent, white;
  55. text-transform: lowercase;
  56. font-size: 1.2em;
  57. -webkit-transition: all 0.4s linear;
  58. -moz-transition: all 0.4s linear;
  59. -o-transition: all 0.4s linear;
  60. -ms-transition: all 0.4s linear;
  61. transition: all 0.4s linear;
  62. letter-spacing: 0px;
  63. width: 50px;
  64. height: 100px;
  65. }
  66.  
  67. .navigation a:hover{
  68. color: white;
  69. -webkit-transition: all 0.2s linear;
  70. -moz-transition: all 0.2s linear;
  71. -o-transition: all 0.2s linear;
  72. -ms-transition: all 0.2s linear;
  73. transition: all 0.2s linear;
  74. width: auto;
  75. height: auto;
  76. font-size: 2em;
  77. font-weight: bold;
  78. letter-spacing: 2px;
  79. text-shadow: 0 0 20px hsla(180,50%,40%,.6),
  80. 0 0 40px hsla(200,50%,45%,.8);
  81. }
  82.  
  83. <div class="menu">
  84. <ul>
  85. <li><a href="index.php">Home</a></li>
  86. <li><a href="">About</a></li>
  87. <li><a href="">Music</a></li>
  88. <li><a href="">Geeking</a></li>
  89. <li><a href="">Contact</a></li>
  90. </ul>
  91. </div>
  92.  
  93. .menu{
  94. position: fixed;
  95. left:0;
  96. right:0;
  97. top:0;
  98. margin: auto;
  99. text-transform: lowercase;
  100. text-align: center;
  101. }
  102.  
  103. .navigation table{
  104. height: 70px;
  105. }
  106.  
  107. .menu li{
  108. list-style: none outside none;
  109. display: inline;
  110. }
  111.  
  112. .menu a{
  113. text-decoration: none;
  114. color: hsla(200,50%,45%,0.6);
  115. font-size: 1.2em;
  116. letter-spacing: 0px;
  117. -webkit-transition: all 0.4s ease;
  118. -moz-transition: all 0.4s ease;
  119. -o-transition: all 0.4s ease;
  120. -ms-transition: all 0.4s ease;
  121. transition: all 0.4s ease;
  122. }
  123.  
  124.  
  125. .menu a:hover{
  126. color: white;
  127. font-size: 2em;
  128. font-weight: 600;
  129. letter-spacing: 2px;
  130.  
  131. -webkit-transition: all 0.2s ease;
  132. -moz-transition: all 0.2s ease;
  133. -o-transition: all 0.2s ease;
  134. -ms-transition: all 0.2s ease;
  135. transition: all 0.2s ease;
  136.  
  137. text-shadow: 0 0 20px hsla(180,50%,40%,.6),
  138. 0 0 40px hsla(200,50%,45%,.8);
  139. }
  140.  
  141. .navigation table{
  142. height: 70px;
  143. }
  144.  
  145. .menu ul {
  146. display: table;
  147. text-align: center;
  148. height: 70px;
  149. padding: 0px;
  150. margin-top: 0px;
  151. margin-right: auto;
  152. margin-bottom: 0px;
  153. margin-left: auto;
  154. width: auto;
  155. }
  156.  
  157. .menu li {
  158. display: table-cell;
  159. list-style-image: none;
  160. list-style-type: none;
  161. text-align: center;
  162. vertical-align: middle;
  163. padding-right: 6px;
  164. padding-left: 6px;
  165. padding-top: 0px;
  166. padding-bottom: 0px;
  167. margin: 0px;
  168. }
  169.  
  170. .menu a {
  171. height: 50px;
  172. line-height: 50px;
  173. }
  174.  
  175. .menu a {
  176. vertical-align: middle;
  177. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement