API tools faq
paste
Advertisement
ssourwolf

for chynna bo bynna

ssourwolf
Apr 7th, 2015
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4. <head><link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
  5.  
  6. <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
  7. <title>NAVIGATION</title> <!-- This is the text on your browser tab-->
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!----
  11.  
  12. navigation 01 by franz @ lestranqe.tumblr.com/
  13. DO NOT REMOVE THE CREDIT OR YOU WILL BE THE VALJEAN TO MY JAVERT
  14. instructions included :)
  15.  
  16. --->
  17.  
  18. <style type="text/css">
  19.  
  20. /*Scrollbar*/
  21.  
  22. ::-webkit-scrollbar {
  23. width:5px;
  24. height:auto;
  25. background:#fff;} /*Change scrollbar background colour here*/
  26. ::-webkit-scrollbar-corner {background:#fff;} /*Change scrollbar background colour here*/
  27. ::-webkit-scrollbar-thumb:vertical {background:#f2f2f2;} /*Change scrollbar colour here*/
  28. ::-webkit-scrollbar-thumb:horizontal {background:#f2f2f2;} /*Change scrollbar colour here*/
  29.  
  30. /*Main Structure*/
  31.  
  32. body {
  33. background:#fff; /*Change background colour here*/
  34. color:#000; /*Change font colour here*/
  35. font-family:'Inconsolata'; /*Change font here*/
  36. font-size:9px; /*Change font size here*/
  37. line-height:180%;
  38. }
  39.  
  40. a {
  41. text-decoration:none;
  42. outline:none;
  43. -moz-outline-style:none;
  44. color:#6a6a6a;
  45. -webkit-transition:all .5s ease-in-out;
  46. -moz-transition:all .5s ease-in-out;
  47. transition:all .5s ease-in-out;
  48. }
  49.  
  50. a:hover {
  51. color:#e6e6e6;
  52. -webkit-transition:all .5s ease-in-out;
  53. -moz-transition:all .5s ease-in-out;
  54. transition:all .5s ease-in-out;
  55. }
  56.  
  57. /*Header*/
  58.  
  59. #header {
  60. margin-left:auto;
  61. margin-right:auto;
  62. margin-top:100px;
  63. background:transparent;
  64. width:700px;
  65. }
  66.  
  67. #title {
  68. text-align:center;
  69. font-family:times;
  70. font-size:25px;
  71. font-weight:bold;
  72. text-transform:uppercase;
  73. letter-spacing:8px;
  74. }
  75.  
  76. #description {
  77. margin:15px;
  78. text-align:center;
  79. font-size:8px;
  80. text-transform:uppercase;
  81. letter-spacing:3px;
  82. }
  83.  
  84. /*Content*/
  85.  
  86. #container {
  87. width:700px;
  88. height:310px;
  89. margin-left:auto;
  90. margin-right:auto;
  91. border:1px solid #e6e6e6;
  92. }
  93.  
  94. #left {
  95. height:310px;
  96. width:185px;
  97. position:absolute;
  98. }
  99.  
  100. .category label {
  101. color:#959595; /*Change font colour of categories here*/
  102. background-color:#fff; /*Change background colour of categories here*/
  103. width:162px;
  104. margin:6px;
  105. padding:5px;
  106. padding-top: 8px;
  107. padding-bottom: 8px;
  108. font-size:9px;
  109. text-transform:uppercase;
  110. border: 1px solid #eee;
  111. text-align:center;
  112. letter-spacing:1px;
  113. line-height:100%;
  114. display:inline-block;
  115. -webkit-transition:all .3s ease-in-out;
  116. -moz-transition:all .3s ease-in-out;
  117. transition:all .3s ease-in-out;
  118. }
  119.  
  120. .category label:hover {
  121. color:#fff;
  122. background-color:#aa7cc6;
  123. letter-spacing:3px;
  124. -webkit-transition:all .5s ease-in-out;
  125. -moz-transition:all .5s ease-in-out;
  126. transition:all .5s ease-in-out;
  127. }
  128.  
  129. .category [type=radio] {
  130. display:none;
  131. }
  132.  
  133. [type=radio]:checked ~ label {
  134. color:#fff; /*Change font colour of chosen category here */
  135. background-color:#aa7cc6; /*Change background colour of chosen category here*/
  136. letter-spacing:3px;
  137. text-decoration:none!important;
  138. }
  139.  
  140. [type=radio]:checked ~ label ~ .links {
  141. z-index:1;
  142. }
  143.  
  144. [type=radio]:checked ~ label ~ .links2 {
  145. z-index:1;
  146. }
  147.  
  148. .links {
  149. background-color:#fff;
  150. width:495px;
  151. height:290px;
  152. margin-left:185px;
  153. margin-top:-34px;
  154. top:33px;
  155. position:absolute;
  156. padding: 10px;
  157. font-size:10px;
  158. font-family:'lato';
  159. letter-spacing: 1px;
  160. text-align:left;
  161. border:1px solid #e6e6e6;
  162. }
  163.  
  164. .links a {
  165. color:#959595; /*Change font colour of tags here*/
  166. background-color:#fff; /*Change background colour of tags here*/
  167. width:auto;
  168. text-transform: lowercase;
  169. padding:1px;
  170. display: inline;
  171. font-size:10px;
  172. font-style: none;
  173. font-family: 'Inconsolata', trebuchet ms;
  174. text-align:left;
  175. overflow: auto;
  176. text-decoration:none;
  177. letter-spacing:.5px;
  178. line-height:100%;
  179. /* -webkit-transition:all .3s ease-in-out;
  180. -moz-transition:all .3s ease-in-out;
  181. -o-transition: all .5 ease-in-out;
  182. transition:all .3s ease-in-out; */
  183. }
  184.  
  185. .links a:hover {
  186. color: #aa7cc6;
  187. text-decoration: underline;
  188. /* -webkit-transition:all .3s ease-in-out;
  189. -moz-transition:all .3s ease-in-out;
  190. -o-transition: all .5 ease-in-out;
  191. transition:all .3s ease-in-out;
  192. */
  193. }
  194.  
  195. .links2 {
  196. background-color:#fff;
  197. width:234px;
  198. height:290px;
  199. margin-left:185px;
  200. margin-top:-34px;
  201. top:33px;
  202. position:absolute;
  203. font-size:10px;
  204. font-family:'lato';
  205. letter-spacing: 1px;
  206. padding:10px;
  207. text-align:left;
  208. border-top: 1px solid #e6e6e6;
  209. }
  210.  
  211.  
  212. .links2 a {
  213. color:#959595; /*Change font colour of tags here*/
  214. background-color:#fff; /*Change background colour of tags here*/
  215. width:auto;
  216. text-transform: lowercase;
  217. padding:1px;
  218. display: inline;
  219. line-height:100%;
  220. font-style: none;
  221. font-size:10px;
  222. font-family:'Inconsolata', trebuchet ms;
  223. text-align:left;
  224. text-decoration:none;
  225. letter-spacing:0.5px;
  226. /*
  227. -webkit-transition:all .3s ease-in-out;
  228. -moz-transition:all .3s ease-in-out;
  229. -o-transition: all .5 ease-in-out;
  230. transition:all .3s ease-in-out; */
  231.  
  232. }
  233.  
  234. .links2 a:hover {
  235. color:#aa7cc6;
  236. text-decoration: underline;
  237. /*
  238. -webkit-transition:all .3s ease-in-out;
  239. -moz-transition:all .3s ease-in-out;
  240. -o-transition: all .5 ease-in-out;
  241. transition:all .3s ease-in-out; */
  242. }
  243.  
  244. /*Bottom Navigation*/
  245.  
  246. #navigation {
  247. text-align:center;
  248. position: relative;
  249. width: 500px;
  250. margin: auto;
  251. font-family: 'Inconsolata';
  252. font-size: 11px;
  253. margin-bottom: 5px;
  254. border-bottom: 1px solid #eee;
  255. }
  256.  
  257. #navigation a {
  258. color: #b8b8b8;
  259. text-align:center;
  260. text-decoration:;
  261. font: 'Inconsolata';
  262. padding: 3px;
  263. padding-top: 10px;
  264. text-transform: lowercase;
  265. }
  266.  
  267. #navigation a:hover {
  268. text-decoration: underline;
  269. }
  270.  
  271. /*Credit - DON'T TOUCH THIS PART*/
  272.  
  273. #credit {
  274. position:fixed;
  275. float:right;
  276. bottom:5px;
  277. right:5px;
  278. background:transparent;
  279. font-size:20px;
  280. text-align:right;
  281. }
  282.  
  283. #credit a {
  284. color:#000;
  285. }
  286.  
  287. #logo {
  288. font-size:10px;
  289. font-family:'Inconsolata', trebuchet ms;
  290. font-style:italic;
  291. opacity:0;
  292. -webkit-transition:all .5s ease-in-out;
  293. -moz-transition:all .5s ease-in-out;
  294. transition:all .5s ease-in-out;
  295. }
  296.  
  297. #credit:hover #logo {
  298. opacity:1;
  299. -webkit-transition:all .5s ease-in-out;
  300. -moz-transition:all .5s ease-in-out;
  301. transition:all .5s ease-in-out;
  302. }
  303.  
  304.  
  305.  
  306. </style>
  307. </head>
  308.  
  309. <body>
  310. <div id="header">
  311. <div id="title">Navigation</div> <!-- Page Title -->
  312. <div id="description">Find your way around this blog</div> <!-- Description -->
  313. </div>
  314.  
  315. <div id="container">
  316. <div id="left">
  317.  
  318. <!------------ Category 1 ------------>
  319.  
  320. <div class="category">
  321. <input type="radio" id="tab-1" name="tab-group-1" checked>
  322. <label for="tab-1">shows and films</label> <!-- Name of Category 1 -->
  323.  
  324. <div class="links">
  325. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  326. <li><a href="/tagged/tag2" target="_blank">example of a bullet</a></li><br>
  327. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  328. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  329. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  330. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  331. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  332. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  333. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  334. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  335. <!-- Duplicate or delete at your convenience -->
  336. </div>
  337.  
  338. </div>
  339.  
  340. <!------------ Category 2 ------------>
  341.  
  342. <div class="category">
  343. <input type="radio" id="tab-2" name="tab-group-1">
  344. <label for="tab-2">anime and manga</label> <!-- Name of Category 2 -->
  345.  
  346. <div class="links">
  347. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  348. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  349. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  350. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  351. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  352. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  353. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  354. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  355. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  356. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  357. <!-- Duplicate or delete at your convenience -->
  358. </div>
  359.  
  360. </div>
  361.  
  362. <!------------ Category 3 ------------>
  363.  
  364. <div class="category">
  365. <input type="radio" id="tab-3" name="tab-group-1">
  366. <label for="tab-3">celebrities</label> <!-- Name of Category 3 -->
  367.  
  368. <div class="links">
  369. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  370. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  371. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  372. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  373. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  374. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  375. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  376. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  377. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  378. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  379. <!-- Duplicate or delete at your convenience -->
  380. </div>
  381.  
  382. </div>
  383.  
  384. <!------------ Category 4 ------------>
  385.  
  386. <div class="category">
  387. <input type="radio" id="tab-4" name="tab-group-1">
  388. <label for="tab-4">marvel</label> <!-- Name of Category 4 -->
  389.  
  390. <div class="links">
  391. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  392. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  393. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  394. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  395. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  396. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  397. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  398. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  399. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  400. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  401. <!-- Duplicate or delete at your convenience -->
  402. </div>
  403.  
  404. </div>
  405.  
  406. <!------------ Category 5 ------------>
  407.  
  408. <div class="category">
  409. <input type="radio" id="tab-5" name="tab-group-1">
  410. <label for="tab-5">resources</label> <!-- Name of Category 5 -->
  411.  
  412. <div class="links">
  413. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  414. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  415. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  416. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  417. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  418. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  419. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  420. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  421. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  422. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  423. <!-- Duplicate or delete at your convenience -->
  424. </div>
  425.  
  426. </div>
  427.  
  428. <!------------ Category 6 ------------>
  429.  
  430. <div class="category">
  431. <input type="radio" id="tab-6" name="tab-group-1">
  432. <label for="tab-6">personal</label> <!-- Name of Category 5 -->
  433.  
  434. <div class="links">
  435. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  436. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  437. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  438. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  439. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  440. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  441. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  442. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  443. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  444. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  445. <!-- Duplicate or delete at your convenience -->
  446. </div>
  447.  
  448. </div>
  449.  
  450. <!------------ Category 7 ------------>
  451.  
  452. <div class="category">
  453. <input type="radio" id="tab-7" name="tab-group-1">
  454. <label for="tab-7">misc</label> <!-- Name of Category 5 -->
  455.  
  456. <div class="links">
  457. <a href="/tagged/tag1" target="_blank">Tag 1</a><br>
  458. <a href="/tagged/tag2" target="_blank">Tag 2</a><br>
  459. <a href="/tagged/tag3" target="_blank">Tag 3</a><br>
  460. <a href="/tagged/tag4" target="_blank">Tag 4</a><br>
  461. <a href="/tagged/tag5" target="_blank">Tag 5</a><br>
  462. <a href="/tagged/tag6" target="_blank">Tag 6</a><br>
  463. <a href="/tagged/tag7" target="_blank">Tag 7</a><br>
  464. <a href="/tagged/tag8" target="_blank">Tag 8</a><br>
  465. <a href="/tagged/tag9" target="_blank">Tag 9</a><br>
  466. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  467. <!-- Duplicate or delete at your convenience -->
  468. </div>
  469.  
  470. </div>
  471.  
  472. <!-- Duplicate more categories if you need them. Remember to change the tab number, but always keep it as "tag-group-1". -->
  473.  
  474. </div>
  475. </div>
  476.  
  477. <div id="navigation"> <!-- The links at the bottom, duplicate to add more links-->
  478. <a href="/">Link 1</a>
  479. <a href="/">Link 2</a>
  480. <a href="/">Link 3</a>
  481. <a href="/">Link 4</a>
  482. </div>
  483.  
  484. <div id="credit"> <!-- DON'T TOUCH-->
  485. <div id="logo">franztheme</div>
  486. <a href="http://lestranqe.tumblr.com">☺</a>
  487. </div>
  488.  
  489. </body>
  490. </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!