API tools faq
paste
nymph

navigation #01: hydrogen

nymph
Dec 4th, 2016
2,804
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5. navigation page by andrea @nymphthemes
  6.  
  7. please keep the credit! thats all i ask, and this
  8. page is yours to use for free!
  9.  
  10.  
  11. To begin customizing the colors, etc. press ctrl+f or cmd+f
  12. and type ' e:' (with the space before the e). To
  13. customize the tags, instead of ' e:' type 'start tags'.
  14. -->
  15.  
  16.  
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <title>navigation</title> <!-- e: title-->
  21.  
  22. <script src="https://use.fontawesome.com/5bbeb6aba5.js"></script>
  23. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Work+Sans:400,700" rel="stylesheet">
  24. <style type="text/css">
  25. .tmblr-iframe { display:none; }
  26.  
  27.  
  28. body {
  29. font-family:'Source Sans Pro', sans-serif;
  30. background:#fff; /* e: page background color */
  31. color:#333; /* e: text color */
  32. font-size:11px;
  33. -moz-osx-font-smoothing:grayscale;
  34. -webkit-font-smoothing:antialiased;
  35. font-smoothing:antialiased; }
  36.  
  37. a {
  38. color:#999; /* e: links color */
  39. text-decoration:none;
  40. transition:all .4s ease;
  41. -webkit-transition:all .4s ease;
  42. -moz-transition:all .4s ease;
  43. -o-transition:all .4s ease;}
  44.  
  45. a:hover { text-decoration:none;
  46. transition:all .4s ease;
  47. -webkit-transition:all .4s ease;
  48. -moz-transition:all .4s ease;
  49. -o-transition:all .4s ease;
  50. color:#abcdef; /* e: links hover color */ }
  51.  
  52. /* scrollbar */
  53. ::-webkit-scrollbar{height:3px;width:4px;background:inherit;}
  54. ::-webkit-scrollbar-thumb {background-color:#ddd; /* e: scrollbar color */}
  55. ::-webkit-scrollbar-track {background:inherit;}
  56.  
  57. /* tooltips */
  58. #s-m-t-tooltip{ position:absolute;font-family:calibri;margin:15px;font-size:9px;color:#444;max-width:250px;text-transform:uppercase;letter-spacing:1px;z-index:999999999999;background:#fff;border:1px solid #eee;padding:2px 5px 2px 5px; }
  59.  
  60. h1 {
  61. font-weight:normal; font-size:12px; font-family:'work sans';text-align:;}
  62.  
  63. .nm { background-color:#fff;font-size:12px;position:fixed!important;bottom:25px;right:25px;z-index:10;text-align:center;padding:4px; width:17px; height:17px;text-decoration:none; color:#000;}
  64. .nm a { color:#000; text-decoration:none;}
  65. .nm a:hover { color:#aaa; text-decoration:none; border-bottom:1px solid #abcdef;}
  66.  
  67. section {
  68. left:50px;
  69. width:calc(181px * 3);
  70. /* NOTE ON <SECTION> WIDTH
  71.  
  72. it's the width of the box + box padding x 2 + margin + 1px side borders
  73. = 130px + (10x2) + 30px + 0.5px = 180.5px
  74. if you change the width of the box, you'll need to change the section width accordingly! same for margin and padding and borders. */
  75. position:relative;
  76. margin:100px auto;
  77. }
  78.  
  79. .box {
  80. line-height:;
  81. font-family:'Source Sans Pro';
  82. background-color:#fdfdfd; /* e: box background */
  83. width:130px;
  84. margin:0px 30px 30px 0px;
  85. padding:10px;
  86. border-right:1px solid #fafafa; /* e: box right border */
  87. border-bottom:1px solid #fafafa; /* e: box bottom border */
  88. }
  89.  
  90. .link a:hover { padding-left:10px;}
  91. .link a {
  92. text-transform:capitalize;
  93. display:block;
  94. padding:5px 0px;}
  95.  
  96. .title { margin-bottom:15px;
  97. font-size:12px;
  98. text-transform:capitalize;
  99. font-family:'work sans', sans-serif;}
  100.  
  101. .title i { color:#abcdef; /* e: title icons color */
  102. font-size:11px; padding-right:7px;}
  103.  
  104. #sidb {
  105. position:fixed;
  106. width:50px;
  107. border-right:1px solid #efefef; /* e: sidebar border color*/
  108. padding-right:35px;
  109. left:330px;}
  110. #sidb img { width:70px; border-radius:10%;}
  111.  
  112. .sl { text-align:right; }
  113. .sl a:after { content:".."; position:absolute; margin-top:0px; margin-left:3px; font-size:9px; color:#abcdef; /* e: color of dots after sidebar link*/
  114. font-weight:bold;}
  115. }
  116.  
  117.  
  118.  
  119. </style>
  120.  
  121. </head>
  122.  
  123. <body>
  124.  
  125. <!-- sidebar -->
  126. <div id="sidb">
  127. <img src="http://i.imgur.com/kpTbscA.jpg"> <!-- e: image -->
  128. <h1>navigation & tags</h1> <!-- e: title -->
  129. <div class="sl">
  130. <a href="">index</a>
  131. <a href="">message</a>
  132. <a href="">dash</a>
  133. </div>
  134. </div>
  135. <section>
  136. <!--start tags-->
  137.  
  138.  
  139.  
  140. <!--- START EXAMPLE BOX --->
  141. <div class="box">
  142.  
  143. <div class="title">
  144. <i class="fa fa-tv"></i> <!-- icon -->
  145. shows<!-- tag box title -->
  146. </div>
  147. <div class="link"> <!--tags below: add as many as you need-->
  148. <a href="/navigation/hydrogen">scream queens</a>
  149. <a href="/navigation/hydrogen">stranger things</a>
  150. <a href="/navigation/hydrogen">friends</a>
  151. <a href="/navigation/hydrogen">brooklyn nine-nine</a>
  152. <a href="/navigation/hydrogen">gilmore girls</a>
  153. <a href="/navigation/hydrogen">supernatural</a>
  154. <a href="/navigation/hydrogen">how i met your mother</a>
  155. </div>
  156. </div>
  157. <!--- END EXAMPLE BOX --->
  158.  
  159.  
  160.  
  161. <!--- START EXAMPLE BOX --->
  162. <div class="box">
  163.  
  164. <div class="title">
  165. <i class="fa fa-book"></i>
  166. books<!-- tag box title -->
  167. </div>
  168. <div class="link">
  169. <a href="">the raven cycle</a>
  170. <a href="">throne of glass</a>
  171. <a href="">the book thief</a>
  172. <a href="">the scorpio races</a>
  173. <a href="">the lunar chronicles</a>
  174. <a href="">the grisha trilogy</a>
  175. <a href="">six of crows</a>
  176. <a href="">the darkest minds</a>
  177. </div>
  178. </div>
  179. <!--- END EXAMPLE BOX --->
  180.  
  181.  
  182.  
  183. <!--- START EXAMPLE BOX --->
  184. <div class="box">
  185.  
  186. <div class="title">
  187. <i class="fa fa-film"></i>
  188. films <!-- tag box title -->
  189. </div>
  190. <div class="link"> <!--tags below: add as many as you need-->
  191. <a href="">inception</a>
  192. <a href="">now you see me</a>
  193. <a href="">The princess bride</a>
  194. <a href="">kill bill</a>
  195. <a href="">sleepy hollow</a>
  196. <a href="">victor frankenstein</a>
  197. <a href="">sherlock holmes</a>
  198. <a href="">the prestige</a>
  199. <a href="">mister nobody</a>
  200. </div>
  201. </div>
  202. <!--- END EXAMPLE BOX --->
  203.  
  204.  
  205.  
  206. <!--- START EXAMPLE BOX --->
  207. <div class="box">
  208.  
  209. <div class="title">
  210. <i class="fa fa-user"></i>
  211. tV characters <!-- tag box title -->
  212. </div>
  213. <div class="link"> <!--tags below: add as many as you need-->
  214. <a href="">jake peralta</a>
  215. <a href="">rory gilmore</a>
  216. <a href="">lane kim</a>
  217. <a href="">chandler bing</a>
  218. <a href="">barney stinson</a>
  219. <a href="">ted mosby</a>
  220. <a href="">amy santiago</a>
  221. <a href="">phoebe buffay</a>
  222. <a href="">joey tribbiani</a>
  223. <a href="">nancy wheeler</a>
  224. </div>
  225. </div>
  226. <!--- END EXAMPLE BOX --->
  227.  
  228.  
  229.  
  230. <!--- START EXAMPLE BOX --->
  231. <div class="box">
  232.  
  233. <div class="title">
  234. <i class="fa fa-heart-o"></i>
  235. ships <!-- tag box title -->
  236. </div>
  237. <div class="link"> <!--tags below: add as many as you need-->
  238. <a href="">lorelai / luke</a>
  239. <a href="">chandler / monica</a>
  240. <a href="">mike / phoebe</a>
  241. <a href="">jake / amy</a>
  242. <a href="">jonathan / nancy</a>
  243. <a href="">sookie / jackson</a>
  244. </div>
  245. </div>
  246. <!--- END EXAMPLE BOX --->
  247.  
  248.  
  249.  
  250. <!--- START EXAMPLE BOX --->
  251. <div class="box">
  252.  
  253. <div class="title">
  254. <i class="fa fa-globe"></i>
  255. book characters <!-- tag box title -->
  256. </div>
  257. <div class="link"> <!--tags below: add as many as you need-->
  258. <a href="">sean kendrick</a>
  259. <a href="">puck connolly</a>
  260. <a href="">feyre archeron</a>
  261. <a href="">dorian havilliard</a>
  262. <a href="">malyen oretsev</a>
  263. <a href="">alina starkov</a>
  264. <a href="">nikolai lantsov</a>
  265. <a href="">kaz brekker</a>
  266. <a href="">nina zenik</a>
  267. </div>
  268. </div>
  269. <!--- END EXAMPLE BOX --->
  270.  
  271.  
  272. <!--- START EXAMPLE BOX --->
  273. <div class="box">
  274.  
  275. <div class="title">
  276. <i class="fa fa-coffee"></i>
  277. friendships <!-- tag box title -->
  278. </div>
  279. <div class="link"> <!--tags below: add as many as you need-->
  280. <a href="">the friends gang</a>
  281. <a href="">sookie & lorelai</a>
  282. <a href="">rory & lane</a>
  283. <a href="">jake & rosa</a>
  284. <a href="">rosa & amy</a>
  285. <a href="">monica & rachel</a>
  286. <a href="">phoebe & joey</a>
  287. </div>
  288. </div>
  289. <!--- END EXAMPLE BOX --->
  290.  
  291.  
  292. <!--end tags-->
  293. </section>
  294.  
  295. <a href="http://nymphthemes.tumblr.com" title="theme &copy;" class="nm">N.</a>
  296.  
  297.  
  298. <!--masonry for tag boxes-->
  299.  
  300. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  301. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  302. <script type="text/javascript">
  303. $(window).load(function () {
  304. $('section').masonry({
  305. itemSelector : ".box",
  306. },
  307. function() { $('section').masonry({ appendedContent: $(this) }); }
  308. );
  309. });
  310. </script>
  311.  
  312. <!-- tooltips -->
  313. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  314.  
  315. <script>
  316. (function($){
  317. $(document).ready(function(){
  318. $("a[title]").style_my_tooltips({
  319. tip_follows_cursor:true,
  320. tip_delay_time:30,
  321. tip_fade_speed:300,
  322. attribute:"title"
  323. });
  324. });
  325. })(jQuery);
  326. </script>
  327.  
  328. </body>
  329. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!