API tools faq
paste
Advertisement
Jyuubi

[Page] → Navigation #01

Jyuubi
Nov 7th, 2015
634
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <!--
  5. THEME: NAVIGATION PAGE #01
  6. BY: JYUUBI.ORG / MANATOPIA.ORG
  7.  
  8. ALL CREDIT FOR LINK EFFECTS GOES TO
  9. http://tympanus.net/codrops/2013/08/06/creative-link-effects/
  10.  
  11. Please do not redistribute or use to make your own!
  12. You may edit whatever you please, but leave credit.
  13. -->
  14.  
  15. <head>
  16. <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400' rel='stylesheet' type='text/css'>
  17. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <style type="text/css">
  22. /* BODY */
  23. body {
  24. background-color: #f4f4f4;
  25. }
  26.  
  27. #container {
  28. width: 800px;
  29. margin: auto;
  30. margin-top: 100px;
  31. text-align: center;
  32. }
  33.  
  34. .title {
  35. font-family: arial black;
  36. font-size: 32px;
  37. color: #ccd6ce;
  38. text-transform: uppercase;
  39. text-align: center;
  40. border-bottom: 1px solid #dfdfdf;
  41. margin-bottom: 20px;
  42. letter-spacing: -2px;
  43. }
  44.  
  45. .title2 {
  46. font-family: arial black;
  47. font-size: 32px;
  48. color: #ccd6ce;
  49. text-transform: uppercase;
  50. text-align: center;
  51. border-bottom: 1px solid #dfdfdf;
  52. margin-top: 100px;
  53. margin-bottom: 20px;
  54. letter-spacing: -2px;
  55. }
  56.  
  57. .title3 {
  58. font-family: arial black;
  59. font-size: 32px;
  60. color: #ccd6ce;
  61. text-transform: uppercase;
  62. text-align: center;
  63. border-bottom: 1px solid #dfdfdf;
  64. margin-top: 100px;
  65. margin-bottom: 20px;
  66. letter-spacing: -2px;
  67. }
  68.  
  69. nav a {
  70. font-family: 'Titillium Web', sans-serif;
  71. position: relative;
  72. display: inline-block;
  73. padding: 5px;
  74. outline: none;
  75. color: #80bdcf;
  76. text-decoration: none;
  77. text-transform: uppercase;
  78. letter-spacing: 1px;
  79. font-weight: 400;
  80. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  81. font-size: 18px;
  82. }
  83.  
  84. nav a:hover, nav a:focus {
  85. outline: none;
  86. }
  87.  
  88. #back {
  89. position: fixed;
  90. bottom: 5px;
  91. left: 5px;
  92. font-family: calibri, sans-serif;
  93. font-size: 14px;
  94. text-transform: uppercase;
  95. }
  96.  
  97. #back a {
  98. color: #797979;
  99. text-decoration: none;
  100. }
  101.  
  102. #credit {
  103. position: fixed;
  104. bottom: 5px;
  105. right: 5px;
  106. font-family: calibri, sans-serif;
  107. font-size: 14px;
  108. text-transform: uppercase;
  109. }
  110.  
  111. #credit a {
  112. color: #797979;
  113. text-decoration: none;
  114. }
  115.  
  116. /* FIRST EFFECT USED,
  117. DO NOT TOUCH IF YOU DON'T KNOW WHAT YOU'RE DOING!! */
  118.  
  119. .cl-effect-9 a {
  120. margin: 0 10px;
  121. padding: 5px 10px;
  122. text-align: center;
  123. }
  124.  
  125. .cl-effect-9 a::before,
  126. .cl-effect-9 a::after {
  127. position: absolute;
  128. top: 0;
  129. left: 0;
  130. width: 100%;
  131. height: 1px;
  132. background: #dfdfdf;
  133. content: '';
  134. opacity: 0.2;
  135. -webkit-transition: opacity 0.3s, height 0.3s;
  136. -moz-transition: opacity 0.3s, height 0.3s;
  137. transition: opacity 0.3s, height 0.3s;
  138. }
  139.  
  140. .cl-effect-9 a::after {
  141. top: 100%;
  142. opacity: 0;
  143. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  144. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  145. transition: transform 0.3s, opacity 0.3s;
  146. -webkit-transform: translateY(-10px);
  147. -moz-transform: translateY(-10px);
  148. transform: translateY(-10px);
  149. }
  150.  
  151. .cl-effect-9 a span:first-child {
  152. z-index: 2;
  153. display: block;
  154. font-weight: 300;
  155. }
  156.  
  157. .cl-effect-9 a span:last-child {
  158. z-index: 1;
  159. display: block;
  160. padding: 3px 0 0 0;
  161. color: rgba(0,0,0,0.4);
  162. text-shadow: none;
  163. text-transform: none;
  164. font-size: 10px;
  165. font-weight: 400;
  166. font-family: 'Titillium Web', sans-serif;
  167. text-transform: uppercase;
  168. color: #797979;
  169. opacity: 0;
  170. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  171. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  172. transition: transform 0.3s, opacity 0.3s;
  173. -webkit-transform: translateY(-100%);
  174. -moz-transform: translateY(-100%);
  175. transform: translateY(-100%);
  176. }
  177.  
  178. .cl-effect-9 a:hover::before,
  179. .cl-effect-9 a:focus::before {
  180. height: 4px;
  181. }
  182.  
  183. .cl-effect-9 a:hover::before,
  184. .cl-effect-9 a:hover::after,
  185. .cl-effect-9 a:focus::before,
  186. .cl-effect-9 a:focus::after {
  187. opacity: 1;
  188. -webkit-transform: translateY(0px);
  189. -moz-transform: translateY(0px);
  190. transform: translateY(0px);
  191. }
  192.  
  193. .cl-effect-9 a:hover span:last-child,
  194. .cl-effect-9 a:focus span:last-child {
  195. opacity: 1;
  196. -webkit-transform: translateY(0%);
  197. -moz-transform: translateY(0%);
  198. transform: translateY(0%);
  199. }
  200.  
  201. /* SECOND EFFECT USED,
  202. DO NOT TOUCH IF YOU DON'T KNOW WHAT YOU'RE DOING!! */
  203.  
  204. .cl-effect-21 a {
  205. font-family: 'Titillium Web', sans-serif;
  206. padding: 10px;
  207. color: #80bdcf;
  208. font-weight: 400;
  209. text-shadow: none;
  210. -webkit-transition: color 0.3s;
  211. -moz-transition: color 0.3s;
  212. transition: color 0.3s;
  213. }
  214.  
  215. .cl-effect-21 a::before,
  216. .cl-effect-21 a::after {
  217. position: absolute;
  218. left: 0;
  219. width: 100%;
  220. height: 2px;
  221. background: #dfdfdf;
  222. content: '';
  223. opacity: 0;
  224. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  225. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  226. transition: opacity 0.3s, transform 0.3s;
  227. -webkit-transform: translateY(-10px);
  228. -moz-transform: translateY(-10px);
  229. transform: translateY(-10px);
  230. }
  231.  
  232. .cl-effect-21 a::before {
  233. top: 0;
  234. -webkit-transform: translateY(-10px);
  235. -moz-transform: translateY(-10px);
  236. }
  237.  
  238. .cl-effect-21 a::after {
  239. bottom: 0;
  240. -webkit-transform: translateY(10px);
  241. -moz-transform: translateY(10px);
  242. transform: translateY(10px);
  243. }
  244.  
  245. .cl-effect-21 a:hover,
  246. .cl-effect-21 a:focus {
  247. color: #797979;
  248. }
  249.  
  250. .cl-effect-21 a:hover::before,
  251. .cl-effect-21 a:focus::before,
  252. .cl-effect-21 a:hover::after,
  253. .cl-effect-21 a:focus::after {
  254. opacity: 1;
  255. -webkit-transform: translateY(0px);
  256. -moz-transform: translateY(0px);
  257. transform: translateY(0px);
  258. }
  259. </style>
  260. </head>
  261. <body>
  262.  
  263. <div id="container">
  264.  
  265. <div class="title">tumblr blogs</div>
  266.  
  267. <nav class="cl-effect-9">
  268. <a href="http://130journey.tumblr.com"><span>130Journey</span><span>Weight Loss</span></a>
  269. <a href="http://manatopia.org"><span>Manatopia</span><span>Themes/Resources</span></a>
  270. <a href="http://zelsamay.tumblr.com"><span>Zelsamay</span><span>Disney/Animation</span></a>
  271. <a href="http://espelona.tumblr.com"><span>Espelona</span><span>Photography</span></a>
  272. <a href="http://yukigakure.tumblr.com"><span>Yukigakure</span><span>Naruto</span></a>
  273. </nav>
  274.  
  275. <div class="title2">social media & other places</div>
  276.  
  277. <nav class="cl-effect-21">
  278. <a href="http://twitter.com/mandalovise">Twitter</a>
  279. <a href="http://instagram.com/mandalovise">Instagram</a>
  280. <a href="http://myanimelist.net/profile/Jyuubi">MyAnimeList</a>
  281. <a href="http://profiles.exophase.com/mandalovise/">Exophase</a>
  282. <a href="http://www.myfitnesspal.com/profile/mandalovise">MyFitnessPal</a>
  283. <a href="https://www.fitbit.com/user/3GTQWZ">Fitbit</a>
  284. <a href="https://open.spotify.com/user/22d6khle4n27awctsjcgliefa">Spotify</a>
  285. <a href="https://www.goodreads.com/mandalovise">Goodreads</a>
  286. <a href="https://vimeo.com/mandalovise">Vimeo</a>
  287. </nav>
  288.  
  289.  
  290. <div class="title3">on this blog</div>
  291.  
  292. <nav class="cl-effect-21">
  293. <a href="/about">About Moi</a>
  294. <a href="/credits">Credits</a>
  295. <a href="/tags">Tags Masterlist</a>
  296. <a href="/graphics">Graphics</a>
  297. <a href="/blogroll">Blogroll</a>
  298. </nav>
  299.  
  300. </div>
  301.  
  302. <div id="back"><a href="/">go back?</a></div>
  303. <div id="credit"><a href="http://jyuubi.org">©</a></div>
  304.  
  305. </body>
  306. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!