Advertisement
kitamikeita

Tags Page 01c

Aug 30th, 2013
1,938
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.23 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <!-------------------------------------------------
  7. TAGS PAGE #01 || MADE BY: http://snootydormouse.tumblr.com (KITSTHEMES)
  8. ---------------------------------------------------
  9.  
  10. TERMS OF USAGE:
  11. - DO NOT REMOVE THE CREDIT
  12. - DO NOT REDISTRIBUTE
  13. - DO NOT CLAIM AS YOUR OWN
  14. - DO NOT USE AS A BASE
  15.  
  16. --------------------------------------------->
  17.  
  18. <title>Tags Page</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22.  
  23. <style type="text/css">
  24.  
  25. body{
  26. font-family: trebuchet ms;
  27. margin:0px;
  28. padding:0px;
  29. font-size: 12px;
  30. line-height: 110%;
  31. background-color: #fff;
  32. color: #e3e3e3;
  33. overflow-x: hidden;
  34. }
  35.  
  36. body, html {
  37. height: 100%;
  38. }
  39.  
  40. a {
  41. text-decoration: none;
  42. text-align:center;
  43. text-transform:uppercase;
  44. font-size:10px;
  45. color:#ccc;
  46. }
  47.  
  48. @font-face {font-family: blackjack; src:url("http://digilander.libero.it/kitamikeita/Fonts/black_jack-webfont.ttf")}
  49.  
  50. .container {
  51. margin:10px auto 0 auto;
  52. width: 900px;
  53. height: 700px;
  54. background-color: transparent;
  55. }
  56.  
  57. .lines {
  58. height: 100%;
  59. width: 6px;
  60. margin-top: 0px;
  61. background-color: transparent;
  62. float: left
  63. }
  64.  
  65. .line1 {
  66. margin-left: 0;
  67. width: 6px;
  68. height: 25%;
  69. float: left;
  70. background-color: #c0addb;
  71. display:block
  72. }
  73.  
  74. .line2 {
  75. width: 6px;
  76. height: 25%;
  77. float: left;
  78. background-color: #ff8456;
  79. display:block
  80. }
  81.  
  82. .line3 {
  83. width: 6px;
  84. height: 25%;
  85. float: left;
  86. background-color: #d6ec5a;
  87. display:block
  88. }
  89.  
  90. .line4 {
  91. width: 6px;
  92. height: 25%;
  93. float: left;
  94. background-color: #6cdfea;
  95. display:block
  96. }
  97.  
  98. .header {
  99. margin: 0 auto 0 auto;
  100. width: 500px;
  101. height: 35px;
  102. background-color: transparent;
  103. }
  104.  
  105. .hleft {
  106. padding: 2px 0 2px 0;
  107. width: 120px;
  108. height: 11px;
  109. font-family: trebuchet ms;
  110. color: #d9d9d9;
  111. text-align: center;
  112. vertical-align: middle;
  113. font-size: 9px;
  114. border-top: 1px solid #e8e8e8;
  115. border-bottom: 1px solid #e8e8e8;
  116. letter-spacing: 4px;
  117. text-transform: uppercase;
  118. margin-top: 37px;
  119. margin-left: 120px;
  120. float: left;
  121. }
  122.  
  123. .hright a {
  124. padding: 2px 0 2px 0;
  125. width: 100px;
  126. height: 11px;
  127. font-family: trebuchet ms;
  128. color: #d9d9d9;
  129. text-align: center;
  130. vertical-align: middle;
  131. font-size: 9px;
  132. border-top: 1px solid #e8e8e8;
  133. border-bottom: 1px solid #e8e8e8;
  134. letter-spacing: 4px;
  135. text-transform: uppercase;
  136. margin-top: 38px;
  137. margin-left: 4px;
  138. float: left;
  139. }
  140.  
  141. .headerimg {
  142. height: 30px;
  143. width: 30px;
  144. outline: solid 1px #e8e8e8;
  145. outline-offset: 3px;
  146. margin-left: 4px;
  147. margin-top: 30px;
  148. float: left
  149. }
  150.  
  151. .block01 {
  152. margin-left: 80px;
  153. margin-top: 100px;
  154. width: 185px;
  155. position: absolute;
  156. float:left;
  157. }
  158.  
  159. .block01 a {
  160. width: 170px;
  161. display: block;
  162. margin: 0;
  163. border-bottom: 1px solid #f2f2f2;
  164. padding: 5px;
  165. background-color: #fafafa;
  166. text-align: center;
  167. vertical-align: middle;
  168. overflow: hidden;
  169. font-size: 10px;
  170. transition: .4s;
  171. -o-transition-transition: .4s;
  172. -webkit-transition-duration: .4s;
  173. -moz-transition-duration: .4s;
  174. }
  175.  
  176. .block01 a:hover {
  177. color: #f8f8f8;
  178. display: block;
  179. background-color: #c0addb;
  180. border-bottom: solid 2px #ac9bc4;
  181. letter-spacing: 4px;
  182. font-size: 12px;
  183. transition: .4s;
  184. -o-transition-transition: .4s;
  185. -webkit-transition-duration: .4s;
  186. -moz-transition-duration: .4s;
  187. }
  188.  
  189. .block01title {
  190. font-family: blackjack;
  191. width: 130px;
  192. font-size: 28px;
  193. border-bottom: 2px dashed #8c8299;
  194. padding-bottom: 4px;
  195. color: #ac9bc4;
  196. background-color: transparent;
  197. text-align: center;
  198. position: absolute;
  199. margin-left: 102px;
  200. margin-top: 73px;
  201. transform:rotate(1deg);
  202. -ms-transform:rotate(1deg);
  203. -webkit-transform:rotate(1deg);
  204. }
  205.  
  206. .block01bottom {
  207. margin-left: 16px;
  208. margin-top: 4px;
  209. width: 150px;
  210. background: transparent;
  211. border-bottom: 2px dashed #8c8299;
  212. }
  213.  
  214. .block02 {
  215. margin-left: 270px;
  216. margin-top: 124px;
  217. width: 185px;
  218. position: absolute;
  219. float:left;
  220. }
  221.  
  222. .block02 a {
  223. width: 170px;
  224. display: block;
  225. margin: 0;
  226. border-bottom: 1px solid #f2f2f2;
  227. padding: 5px;
  228. background-color: #fafafa;
  229. text-align: center;
  230. vertical-align: middle;
  231. overflow: hidden;
  232. transition: .4s;
  233. -o-transition-transition: .4s;
  234. -webkit-transition-duration: .4s;
  235. -moz-transition-duration: .4s;
  236. }
  237.  
  238. .block02 a:hover {
  239. color: #f8f8f8;
  240. display: block;
  241. background-color: #ff8456;
  242. border-bottom: solid 2px #e5764d;
  243. letter-spacing: 4px;
  244. font-size: 12px;
  245. transition: .4s;
  246. -o-transition-transition: .4s;
  247. -webkit-transition-duration: .4s;
  248. -moz-transition-duration: .4s;
  249. }
  250.  
  251. .block02title {
  252. font-family: blackjack;
  253. width: 130px;
  254. font-size: 28px;
  255. border-bottom: 2px dashed #b26c52;
  256. padding-bottom: 4px;
  257. color: #e5764d;
  258. background-color: transparent;
  259. text-align: center;
  260. position: absolute;
  261. margin-left: 292px;
  262. margin-top: 96px;
  263. transform:rotate(1deg);
  264. -ms-transform:rotate(1deg);
  265. -webkit-transform:rotate(1deg);
  266. }
  267.  
  268. .block02bottom {
  269. margin-left: 16px;
  270. margin-top: 4px;
  271. width: 150px;
  272. background: transparent;
  273. border-bottom: 2px dashed #b26c52;
  274. }
  275.  
  276. .block03 {
  277. margin-left: 460px;
  278. margin-top: 100px;
  279. width: 185px;
  280. position: absolute;
  281. float:left;
  282. }
  283.  
  284. .block03 a {
  285. width: 170px;
  286. display: block;
  287. margin: 0;
  288. border-bottom: 1px solid #f2f2f2;
  289. padding: 5px;
  290. background-color: #fafafa;
  291. text-align: center;
  292. vertical-align: middle;
  293. overflow: hidden;
  294. transition: .4s;
  295. -o-transition-transition: .4s;
  296. -webkit-transition-duration: .4s;
  297. -moz-transition-duration: .4s;
  298. }
  299.  
  300. .block03 a:hover {
  301. color: #f8f8f8;
  302. display: block;
  303. background-color: #d6ec5a;
  304. border-bottom: solid 2px #c0d350;
  305. letter-spacing: 4px;
  306. font-size: 12px;
  307. transition: .4s;
  308. -o-transition-transition: .4s;
  309. -webkit-transition-duration: .4s;
  310. -moz-transition-duration: .4s;
  311. }
  312.  
  313. .block03title {
  314. font-family: blackjack;
  315. width: 130px;
  316. font-size: 28px;
  317. border-bottom: 2px dashed #a5b259;
  318. padding-bottom: 4px;
  319. color: #c0d350;
  320. background-color: transparent;
  321. text-align: center;
  322. position: absolute;
  323. margin-left: 482px;
  324. margin-top: 73px;
  325. transform:rotate(1deg);
  326. -ms-transform:rotate(1deg);
  327. -webkit-transform:rotate(1deg);
  328. }
  329.  
  330. .block03bottom {
  331. margin-left: 16px;
  332. margin-top: 4px;
  333. width: 150px;
  334. background: transparent;
  335. border-bottom: 2px dashed #a5b259;
  336. }
  337.  
  338. .block04 {
  339. margin-left: 650px;
  340. margin-top: 124px;
  341. width: 185px;
  342. position: absolute;
  343. float:left;
  344. }
  345.  
  346. .block04 a {
  347. width: 170px;
  348. display: block;
  349. margin: 0;
  350. border-bottom: 1px solid #f2f2f2;
  351. padding: 5px;
  352. background-color: #fafafa;
  353. text-align: center;
  354. vertical-align: middle;
  355. overflow: hidden;
  356. transition: .4s;
  357. -o-transition-transition: .4s;
  358. -webkit-transition-duration: .4s;
  359. -moz-transition-duration: .4s;
  360. }
  361.  
  362. .block04 a:hover {
  363. color: #f8f8f8;
  364. display: block;
  365. background-color: #6cdfea;
  366. border-bottom: solid 2px #60c8d2;
  367. letter-spacing: 4px;
  368. font-size: 12px;
  369. transition: .4s;
  370. -o-transition-transition: .4s;
  371. -webkit-transition-duration: .4s;
  372. -moz-transition-duration: .4s;
  373. }
  374.  
  375. .block04title {
  376. font-family: blackjack;
  377. width: 130px;
  378. font-size: 28px;
  379. border-bottom: 2px dashed #549399;
  380. padding-bottom: 4px;
  381. color: #60c8d2;
  382. background-color: transparent;
  383. text-align: center;
  384. position: absolute;
  385. margin-left: 672px;
  386. margin-top: 96px;
  387. transform:rotate(1deg);
  388. -ms-transform:rotate(1deg);
  389. -webkit-transform:rotate(1deg);
  390. }
  391.  
  392. .block04bottom {
  393. margin-left: 16px;
  394. margin-top: 4px;
  395. width: 150px;
  396. background: transparent;
  397. border-bottom: 2px dashed #549399;
  398. }
  399.  
  400. .credits a {
  401. color: #aaa;
  402. font-family: arial;
  403. font-size: 13px;
  404. position:fixed;
  405. bottom:5px;
  406. right: 5px;
  407. }
  408.  
  409. ::-webkit-scrollbar {
  410. width:5px;
  411. height:auto;
  412. background: #e3e3e3;
  413. }
  414.  
  415. ::-webkit-scrollbar-corner {
  416. background: #e3e3e3;
  417. }
  418.  
  419. ::-webkit-scrollbar-thumb:vertical {
  420. background: #f0f0f0;
  421. }
  422.  
  423. ::-webkit-scrollbar-thumb:horizontal {
  424. background: #f0f0f0;
  425. }
  426.  
  427.  
  428. </style>
  429. </head>
  430. <body>
  431.  
  432. <div class="lines">
  433.  
  434. <div class="line1"></div>
  435. <div class="line2"></div>
  436. <div class="line3"></div>
  437. <div class="line4"></div>
  438.  
  439. </div>
  440.  
  441.  
  442.  
  443. <div class="header"><div class="hleft"><b>t</b>ags <b>p</b>age</div>
  444. <div class="headerimg"><a href="/"><img src="{PortraitURL-30}"></img></a></div>
  445. <div class="hright"><a href="/">home</a></div></div>
  446.  
  447.  
  448.  
  449.  
  450.  
  451. <div class="container">
  452.  
  453.  
  454. <br><br><br><br><br><br><br><br>
  455.  
  456. <div class="block01title">title 01</div>
  457. <div class="block01">
  458.  
  459. <div class="tags01">
  460.  
  461. <a href="URL LINK">LINK NAME</a>
  462. <a href="URL LINK">LINK NAME</a>
  463. <a href="URL LINK">LINK NAME</a>
  464. <a href="URL LINK">LINK NAME</a>
  465. <a href="URL LINK">LINK NAME</a>
  466. <a href="URL LINK">LINK NAME</a>
  467. <a href="URL LINK">LINK NAME</a>
  468. <a href="URL LINK">LINK NAME</a>
  469. <a href="URL LINK">LINK NAME</a>
  470. <a href="URL LINK">LINK NAME</a>
  471.  
  472. </div>
  473.  
  474. <div class="block01bottom"></div>
  475. </div>
  476.  
  477. <div class="block02title">title 02</div>
  478. <div class="block02">
  479.  
  480. <div class="tags02">
  481.  
  482.  
  483. <a href="URL LINK">LINK NAME</a>
  484. <a href="URL LINK">LINK NAME</a>
  485. <a href="URL LINK">LINK NAME</a>
  486. <a href="URL LINK">LINK NAME</a>
  487. <a href="URL LINK">LINK NAME</a>
  488. <a href="URL LINK">LINK NAME</a>
  489. <a href="URL LINK">LINK NAME</a>
  490. <a href="URL LINK">LINK NAME</a>
  491.  
  492.  
  493. </div>
  494.  
  495. <div class="block02bottom"></div>
  496. </div>
  497.  
  498.  
  499. <div class="block03title">title 03</div>
  500. <div class="block03">
  501.  
  502. <div class="tags03">
  503.  
  504.  
  505. <a href="URL LINK">LINK NAME</a>
  506. <a href="URL LINK">LINK NAME</a>
  507. <a href="URL LINK">LINK NAME</a>
  508. <a href="URL LINK">LINK NAME</a>
  509. <a href="URL LINK">LINK NAME</a>
  510. <a href="URL LINK">LINK NAME</a>
  511. <a href="URL LINK">LINK NAME</a>
  512. <a href="URL LINK">LINK NAME</a>
  513. <a href="URL LINK">LINK NAME</a>
  514.  
  515. </div>
  516.  
  517. <div class="block03bottom"></div>
  518. </div>
  519.  
  520. <div class="block04title">title 04</div>
  521. <div class="block04">
  522.  
  523. <div class="tags04">
  524.  
  525.  
  526. <a href="URL LINK">LINK NAME</a>
  527. <a href="URL LINK">LINK NAME</a>
  528. <a href="URL LINK">LINK NAME</a>
  529. <a href="URL LINK">LINK NAME</a>
  530. <a href="URL LINK">LINK NAME</a>
  531. <a href="URL LINK">LINK NAME</a>
  532. <a href="URL LINK">LINK NAME</a>
  533.  
  534. </div>
  535.  
  536. <div class="block04bottom"></div>
  537. </div>
  538.  
  539.  
  540.  
  541. </div>
  542.  
  543. <div class="credits"><a href="http://snootydormouse.tumblr.com">©</a></div>
  544. </body>
  545. </html>
  546.  
  547. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement