API tools faq
paste
Advertisement
lovedbyliam

Navigation Page: 02

lovedbyliam
Jan 13th, 2014
795
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4. ✧･ﾟ: *✧･ﾟ:* \(◕△◕✿)/ *:･ﾟ✧*:･ﾟ✧
  5. (c) asschlin.tumblr.com
  6. please don't use this as a base
  7. or claim as your own....?
  8. ✧･ﾟ: *✧･ﾟ:* \(◕︿◕✿)/ *:･ﾟ✧*:･ﾟ✧
  9. ---------------------------->
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}" />
  17.  
  18.  
  19. </head>
  20. <style type="text/css">
  21.  
  22. /* boring shit */
  23. body {
  24. padding: 0;
  25. margin: 0;
  26. list-style: none;
  27. background-color: #FFFFFF;
  28. background-attachment: fixed;
  29. margin-bottom: 50px;
  30. }
  31.  
  32. a {
  33. text-decoration: none;
  34. color: black;}
  35. /* if you want your scroll bar to show up, change the background color to whatever you want it to be, mk? */
  36. ::-webkit-scrollbar-thumb:vertical {
  37. height:10px;
  38. background-color: #ffffff; }
  39. ::-webkit-scrollbar-thumb:horizontal {
  40. height:30px;
  41. background-color: #ffffff; }
  42. ::-webkit-scrollbar {
  43. height: 10px;
  44. width: 5px;
  45. background-color: #ffffff; }
  46.  
  47. #content {
  48. width: 600px;
  49. height: auto;
  50. padding: 10px;
  51. display: inline-block;
  52. margin-top: 70px;
  53. margin-left: 380px;}
  54.  
  55. /* adjust your sidebar shit here */
  56.  
  57. #blogtitle {
  58. font-size:8px;
  59. color:#ffffff;
  60. background-color:#111111;
  61. text-transform:uppercase;
  62. text-align:center;
  63. font-family:arial;
  64. letter-spacing:1px;
  65. margin-top:-10px;
  66. padding:10px 10px;
  67. border-bottom:1px solid #ffffff;
  68. -webkit-transition: all 0.3s ease-out;
  69. -moz-transition: all 0.3s ease-out;
  70. transition: all 0.3s ease-out;}
  71. #blogtitle:hover {
  72. background-color:#cc0724;
  73. -webkit-transition: all 0.3s ease-out;
  74. -moz-transition: all 0.3s ease-out;
  75. transition: all 0.3s ease-out;}
  76.  
  77. #sidebar {
  78. top:200px;
  79. left:155px;
  80. width:140px;
  81. height:auto;
  82. padding:10px;
  83. position:fixed;
  84. overflow:hidden;
  85. text-align:center;}
  86.  
  87. #description {
  88. width:130px;
  89. height:100px;
  90. font-family:arial;
  91. margin-bottom:0px;
  92. margin-top:-2px;
  93. margin-left:-2px;
  94. padding:8px;
  95. text-align:justify;
  96. font-size:9px;
  97. letter-spacing:0px;
  98. color: #000;
  99. line-height:145%;
  100. border-bottom:1px solid #e3e3e3;}
  101.  
  102. /* the box coding and shit */
  103.  
  104. .column1 {
  105. float: left;
  106. display: inline-block;
  107. margin-right: 25px;
  108. font-family:arial;}
  109. .column3 {
  110. display: inline-block;
  111. float: left;
  112. margin-right: 25px;
  113. font-family:arial;}
  114. .column2 {
  115. display: inline-block;
  116. float: left;
  117. margin-right: 25px;
  118. font-family:arial;}
  119.  
  120. .column1 b{
  121. display:block;
  122. font-size:8px;
  123. text-align:center;
  124. font-weight:100;
  125. background-color:#111111;
  126. color:#ffffff;
  127. padding:2px 2px;
  128. margin-top:5px;
  129. text-transform:uppercase;
  130. letter-spacing:4px;
  131. border-bottom: 1px solid #cc0724;}
  132. .column2 b{display:block;
  133. font-size:8px;
  134. text-align:center;
  135. font-weight:100;
  136. background-color:#111111;
  137. color:#ffffff;
  138. padding:2px 2px;
  139. margin-top:5px;
  140. text-transform:uppercase;
  141. letter-spacing:4px;
  142. border-bottom: 1px solid #cc0724;}
  143. .column3 b{
  144. display:block;
  145. font-size:8px;
  146. text-align:center;
  147. font-weight:100;
  148. background-color:#111111;
  149. color:#ffffff;
  150. padding:2px 2px;
  151. margin-top:5px;
  152. text-transform:uppercase;
  153. letter-spacing:4px;
  154. border-bottom: 1px solid #cc0724;
  155. }
  156.  
  157. .box {
  158. width: 150px;
  159. height: 100px;
  160. background-color: #FFFFFF;
  161. padding: 10px;
  162. margin-bottom: 10px;
  163. font-family: arial;
  164. font-size: 10px;
  165. line-height: 100%;
  166. letter-spacing:1px;
  167. overflow:auto;
  168. border-bottom: 1px solid #DDDDDD;
  169. border-right: 1px solid #DDDDDD;
  170. border-left: 1px solid #DDDDDD;}
  171.  
  172. .box a {
  173. font-family: arial;
  174. font-size: 9px;
  175. color: #606060;
  176. text-transform: lowercase;
  177. padding: 0px 0px 0px 0px;
  178. margin-left: 6px;
  179. line-height: 90%;
  180. -webkit-transition: all 0.3s ease-in-out;
  181. -moz-transition: all 0.3s ease-in-out;
  182. -o-transition: all 0.3s ease-in-out;
  183. -ms-transition: all 0.3s ease-in-out;
  184. transition: all 0.3s ease-in-out;
  185. }
  186.  
  187. .box a:hover {padding: 0px 0px 0px 0px; color: #cc0724;}
  188. .inlink {margin-top: 0px;}
  189.  
  190. /* these are your title headers */
  191. .lt1 {
  192. font-size:9px;
  193. color:#ffffff;
  194. background-color:#111111;
  195. text-transform:uppercase;
  196. text-align:center;
  197. font-family:arial;
  198. letter-spacing:6px;
  199. margin-top:10px;
  200. padding:10px 10px;
  201. border-bottom:1px solid #ffffff;
  202. -webkit-transition: all 0.3s ease-out;
  203. -moz-transition: all 0.3s ease-out;
  204. transition: all 0.3s ease-out;}
  205.  
  206. .lt2 {
  207. font-size:9px;
  208. color:#ffffff;
  209. background-color:#111111;
  210. text-transform:uppercase;
  211. text-align:center;
  212. font-family:arial;
  213. letter-spacing:6px;
  214. margin-top:10px;
  215. padding:10px 10px;
  216. border-bottom:1px solid #ffffff;
  217. -webkit-transition: all 0.3s ease-out;
  218. -moz-transition: all 0.3s ease-out;
  219. transition: all 0.3s ease-out;}
  220.  
  221. .lt3 {
  222. font-size:9px;
  223. color:#ffffff;
  224. background-color:#111111;
  225. text-transform:uppercase;
  226. text-align:center;
  227. font-family:arial;
  228. letter-spacing:6px;
  229. margin-top:10px;
  230. padding:10px 10px;
  231. border-bottom:1px solid #ffffff;
  232. -webkit-transition: all 0.3s ease-out;
  233. -moz-transition: all 0.3s ease-out;
  234. transition: all 0.3s ease-out;}
  235.  
  236. .lt4 {
  237. font-size:9px;
  238. color:#ffffff;
  239. background-color:#111111;
  240. text-transform:uppercase;
  241. text-align:center;
  242. font-family:arial;
  243. letter-spacing:6px;
  244. margin-top:10px;
  245. padding:10px 10px;
  246. border-bottom:1px solid #ffffff;
  247. -webkit-transition: all 0.3s ease-out;
  248. -moz-transition: all 0.3s ease-out;
  249. transition: all 0.3s ease-out;}
  250.  
  251. .lt1:hover {background-color:#cc0724;color:#fff;}
  252. .lt2:hover {background-color:#cc0724;color:#fff;}
  253. .lt3:hover {background-color:#cc0724;color:#fff;}
  254. .lt4:hover {background-color:#cc0724;color:#fff;}
  255.  
  256.  
  257. /*dont fucking touch this only edit the color of the link, i will cut you if you remove this, literally climb out of your computer grunge style, and fucking gut you. */
  258. .credit, .credit a {
  259. width:auto;
  260. height:auto;
  261. bottom:10px;
  262. right:10px;
  263. padding:4px;
  264. z-index:1000000;
  265. font-size:10px;
  266. letter-spacing:1px;
  267. color:#cc0724;
  268. position:fixed;
  269. text-align:center;
  270. font-family:arial black;
  271. text-transform:uppercase;}
  272. .credit a:hover {
  273. color:gray;
  274. background-color:#606060;}
  275.  
  276. </style>
  277. <body>
  278. <div id="sidebar">
  279. <div id="blogtitle">navigation tags</div>
  280. <div id="description">
  281. <!-- make sure you keep this pretty short.. mmk? -->
  282. Cras laoreet pharetra sodales. Proin varius, felis sit amet auctor consectetur, eros quam vehicula turpis, sit amet ornare ligula est a diam. Aenean mauris ante, hendrerit at nulla vitae, ultricies tristique tortor.<br>
  283. <center><a href="/"><b>BACK TO BLOG</b></a></Center>
  284. </div> </div>
  285.  
  286. <div id="content">
  287.  
  288. <div class="column1">
  289. <div class="lt1">Tags Title</div>
  290. <div class="box">
  291. <div class="inlink">
  292. <a href="#">link 1</a><br />
  293. <a href="#">link 2</a><br />
  294. <a href="#">link 3</a><br />
  295. <a href="#">link 4</a><br />
  296. <a href="#">link 5</a><br />
  297. <a href="#">link 6</a><br />
  298. <!-- this is how you make the subheadings mk? -->
  299. <b>subtitle</b><br>
  300. <a href="#">link 7</a><br />
  301. <a href="#">link 1</a><br />
  302. <a href="#">link 2</a><br />
  303. <a href="#">link 3</a><br />
  304. <a href="#">link 4</a><br />
  305. <a href="#">link 5</a><br />
  306. <a href="#">link 6</a><br />
  307. <a href="#">link 7</a><br />
  308. </div>
  309. </div>
  310. <div class="lt2">Tags Title</div>
  311. <div class="box">
  312. <div class="inlink">
  313. <a href="#">link 1</a><br />
  314. <a href="#">link 2</a><br />
  315. <a href="#">link 3</a><br />
  316. <a href="#">link 4</a><br />
  317. <a href="#">link 5</a><br />
  318. <a href="#">link 6</a><br />
  319. </div>
  320. </div>
  321. <div class="lt3">Tags Title</div>
  322. <div class="box">
  323. <div class="inlink">
  324. <a href="#">link 1</a><br />
  325. <a href="#">link 2</a><br />
  326. <a href="#">link 3</a><br />
  327. <a href="#">link 4</a><br />
  328. <a href="#">link 5</a><br />
  329. <a href="#">link 6</a><br />
  330.  
  331.  
  332. </div>
  333. </div>
  334. <div class="lt4">Tags Title</div>
  335. <div class="box">
  336. <div class="inlink">
  337. <a href="#">link 1</a><br />
  338. <a href="#">link 2</a><br />
  339. <a href="#">link 3</a><br />
  340. <a href="#">link 4</a><br />
  341. <a href="#">link 5</a><br />
  342. <a href="#">link 6</a><br />
  343. <a href="#">link 7</a><br />
  344. </div>
  345. </div>
  346.  
  347. </div>
  348.  
  349. <div class="column2">
  350. <div class="lt1">Tags Title</div>
  351. <div class="box">
  352. <div class="inlink">
  353. <a href="#">link 1</a><br />
  354. <a href="#">link 2</a><br />
  355. <a href="#">link 3</a><br />
  356. <a href="#">link 4</a><br />
  357. </div>
  358. </div>
  359. <div class="lt2">Tags Title</div>
  360. <div class="box">
  361. <div class="inlink">
  362. <a href="#">link 1</a><br />
  363. <a href="#">link 2</a><br />
  364. <a href="#">link 3</a><br />
  365. <a href="#">link 4</a><br />
  366. <a href="#">link 5</a><br />
  367. <a href="#">link 6</a><br />
  368. <b>subtitle</b><br>
  369. <a href="#">link 7</a><br />
  370. <a href="#">link 1</a><br />
  371. <a href="#">link 2</a><br />
  372. <a href="#">link 3</a><br />
  373. <a href="#">link 4</a><br />
  374. <a href="#">link 5</a><br />
  375. <a href="#">link 6</a><br />
  376. <a href="#">link 7</a><br />
  377. </div>
  378. </div>
  379. <div class="lt3">Tags Title</div>
  380. <div class="box">
  381. <div class="inlink">
  382. <a href="#">link 1</a><br />
  383. <a href="#">link 2</a><br />
  384. <a href="#">link 3</a><br />
  385. <a href="#">link 4</a><br />
  386. <a href="#">link 5</a><br />
  387. <a href="#">link 6</a><br />
  388. </div>
  389. </div>
  390. <div class="lt4">Tags Title</div>
  391. <div class="box">
  392. <div class="inlink">
  393. <a href="#">link 1</a><br />
  394. <a href="#">link 2</a><br />
  395. <a href="#">link 3</a><br />
  396. <a href="#">link 4</a><br />
  397. <a href="#">link 5</a><br />
  398. <a href="#">link 6</a><br />
  399. </div>
  400. </div>
  401. </div>
  402.  
  403. <div class="column3">
  404. <div class="lt1">Tags Title</div>
  405. <div class="box">
  406. <div class="inlink">
  407. <a href="#">link 1</a><br />
  408. <a href="#">link 2</a><br />
  409. <a href="#">link 3</a><br />
  410. <a href="#">link 4</a><br />
  411. <a href="#">link 5</a><br />
  412. <a href="#">link 6</a><br />
  413. <b>subtitle</b><br>
  414. <a href="#">link 7</a><br />
  415. <a href="#">link 1</a><br />
  416. <a href="#">link 2</a><br />
  417. <a href="#">link 3</a><br />
  418. <a href="#">link 4</a><br />
  419. <a href="#">link 5</a><br />
  420. <a href="#">link 6</a><br />
  421. <a href="#">link 7</a><br />
  422. </div>
  423. </div>
  424. <div class="lt2">Tags Title</div>
  425. <div class="box">
  426. <div class="inlink">
  427. <a href="#">link 1</a><br />
  428. <a href="#">link 2</a><br />
  429. <a href="#">link 3</a><br />
  430. <a href="#">link 4</a><br />
  431. <a href="#">link 5</a><br />
  432. <a href="#">link 6</a><br />
  433. </div>
  434. </div>
  435. <div class="lt3">Tags Title</div>
  436. <div class="box">
  437. <div class="inlink">
  438. <a href="#">link 1</a><br />
  439. <a href="#">link 2</a><br />
  440. <a href="#">link 3</a><br />
  441. <a href="#">link 4</a><br />
  442. <a href="#">link 5</a><br />
  443. <a href="#">link 6</a><br />
  444. </div>
  445. </div>
  446. <div class="lt4">Tags Title</div>
  447. <div class="box">
  448. <div class="inlink">
  449. <a href="#">link 1</a><br />
  450. <a href="#">link 2</a><br />
  451. <a href="#">link 3</a><br />
  452. <a href="#">link 4</a><br />
  453. <a href="#">link 5</a><br />
  454. <a href="#">link 6</a><br />
  455. </div>
  456. </div>
  457. </div>
  458.  
  459. </div>
  460.  
  461.  
  462. <span class="credit">
  463. <a href="http://keciasthemes.tumblr.com/"><big>&copy;</big></a>
  464. </span>
  465.  
  466. </body>
  467. </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!