API tools faq
paste
kimtys

PAGEPACK #5 (BIAS)

kimtys
Aug 18th, 2015
10,203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7.  
  8. PAGE PACK - #5 BIAS PAGE BY KIMTYS.TUMBLR.COM
  9.  
  10. edit as much as you want but please don't hide or remove credits!
  11.  
  12.  
  13. -->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <meta name="description" content="{MetaDescription}" />
  18. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  19. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  20. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  21. <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  22.  
  23. <script>
  24. $(document).ready(function(){
  25. $("a[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:0,
  28. tip_fade_speed:0,
  29. attribute:"title"
  30. });
  31. });
  32. </script>
  33.  
  34. <style type="text/css">
  35.  
  36.  
  37. ::-moz-selection {
  38. background:#ffc3d4; /* SELECTION BACKGROUND COLOR */
  39. color:#fff; /* SELECTION TEXT COLOR */
  40. }
  41. ::selection {
  42. background:#ffc3d4; /* SELECTION BACKGROUND COLOR */
  43. color:#fff; /* SELECTION TEXT COLOR */
  44. }
  45.  
  46. ::-webkit-scrollbar-thumb:vertical {
  47. background: #ffc3d4; /* SCROLL COLOR */
  48. height: 5px;
  49. width:9px;
  50. border-radius: 0px; -moz-border-radius: 8px -webkit-border-radius: 8px o-border-radius: 8px; -ms-border-radius: 8px;
  51. }
  52.  
  53.  
  54. ::-webkit-scrollbar {
  55. height: 0px;
  56. width: 3px;
  57. background: transparent;
  58. border: 1px solid transparent transparent transparent transparent;
  59. }
  60.  
  61. body {
  62. margin:0;
  63. padding:0;
  64. border:0;
  65. background:#f5f5f5; /* BACKGROUND COLOR */
  66. color:#aaa;
  67. font-family:arial;
  68. font-size:10px;
  69. word-wrap:break-word;
  70. }
  71.  
  72. a {
  73. color:#aaa; /* LINK COLOR */
  74. text-decoration:underline;
  75. }
  76.  
  77.  
  78. a:hover {
  79. color:#aaa; /*LINK HOVER COLOR */
  80. cursor:help;
  81. text-decoration:none;
  82. }
  83.  
  84. b, bold, strong {
  85. color:#aaa; /* BOLD COLOR */
  86. }
  87.  
  88. #s-m-t-tooltip {
  89. z-index: 9999;
  90. background: #fff; /* TOOLTIP BACKGROUND COLOR */
  91. line-height:150%;
  92. font: 9px tunga;
  93. color:#bbb; /* TOOLTIP TEXT COLOR */
  94. font-style: normal;
  95. letter-spacing: 1px;
  96. font-weight:bold;
  97. text-transform: uppercase;
  98. border: 2px solid #f2f4f9; /* TOOLTIP BORDER 1 COLOR */
  99. outline:2px solid #fff; /* TOOLTIP BORDER 2 COLOR */
  100. max-width: 300px;
  101. text-align: justify;
  102. padding: 3px 6px 2px 6px;
  103. display: block;
  104. margin: 24px 14px 7px 12px;
  105. }
  106.  
  107. #center {
  108. width:auto;
  109. margin-right:auto;
  110. margin-top:50px;
  111. margin-bottom:50px;
  112. margin-left:268px;
  113. background:transparent;
  114. }
  115.  
  116. #sidebar {
  117. position: fixed;
  118. border-right:2px solid #f5f5f5; /* SIDEBAR BORDER 1 COLOR */
  119. outline:2px solid #fff; /* SIDEBAR BORDER 2 COLOR */
  120. width: 265px;
  121. height:100%;
  122. text-align: center;
  123. top: 0px;
  124. left:0px;
  125. z-index:99;
  126. padding-right:0px;
  127. background:#fff; /* SIDEBAR BACKGROUND COLOR */
  128. }
  129.  
  130. .sidebar {
  131. margin:auto;
  132. margin-top:100px; /* TITLE TOP POSITION */
  133. }
  134.  
  135.  
  136. #title{
  137. font-family: 'Oswald', sans-serif;
  138. line-height:90%;
  139. font-size:40px;
  140. font-weight:300;
  141. text-transform:uppercase;
  142. color: #ccc; /* TITLE COLOR */
  143. padding: 5px;
  144. text-align:center;
  145. margin-top:0px;
  146. margin-bottom:-15px;}
  147.  
  148. #title span {
  149. font-weight:300;
  150. color:#ffc3d4; /* TITLE SECOND COLOR */
  151. }
  152.  
  153. #desc {
  154. position:relative;
  155. font-size: 9px;
  156. font-family: tunga;
  157. text-transform:uppercase;
  158. letter-spacing:1px;
  159. font-weight:bold;
  160. margin:auto;
  161. color: #bbb; /* DESCRIPTION FONT COLOR */
  162. overflow:scroll;
  163. overflow:auto;
  164. max-height:80px;
  165. margin-top:22px;
  166. opacity:1;
  167. width:200px;
  168. background:#f5f5f5; /* DESCRIPTION BACKGROUND COLOR */
  169. border:2px solid #fff; /* DESCRIPTION BORDER 1 COLOR */
  170. outline:2px solid #f5f5f5; /* DESCRIPTION BORDER 2 COLOR */
  171. padding:8px 8px 8px 8px;
  172. -webkit-transition: all 1s ease-in-out;
  173. -moz-transition: all 1s ease-in-out;
  174. -o-transition: all 1s ease-in-out;}
  175.  
  176. #link {
  177. display:inline-block;
  178. font:9px tunga;
  179. text-transform:uppercase;
  180. font-weight:bold;
  181. letter-spacing:1px;
  182. margin-top:5px;
  183. }
  184.  
  185. #link a {
  186. color:#bbb; /* DESC LINK COLOR */
  187. padding: 1px 4px 0px 4px;
  188. text-decoration:none;
  189. }
  190.  
  191. #link a:hover {
  192. background:#f5f5f5; /* DESC LINK BACKGROUND HOVER COLOR */
  193. color:#bbb; /* DESC LINK HOVER COLOR */
  194. text-decoration:none;
  195. }
  196.  
  197.  
  198. #pic1 {
  199. margin-left:100px;
  200. margin-right:-100px;
  201. margin-bottom:100px;
  202. display:inline-block;
  203. position:relative;
  204. }
  205.  
  206.  
  207. .pic {
  208. width:150px;
  209. height:200px;
  210. margin:20px;
  211. padding:15px;
  212. background:#fff; /* PICS BACKGROUND COLOR */
  213. display:inline-block;
  214. border:2px double #f5f5f5; /* PICS BORDER 1 COLOR */
  215. outline:2px solid #fff; /* PICS BORDER 2 COLOR */
  216. -webkit-transition: all 0.6s ease-in;
  217. -moz-transition: all 0.6s ease-in;
  218. -o-transition: all 0.6s ease-in;
  219. }
  220.  
  221. .pic img {
  222. width:150px;
  223. opacity:;
  224. height:200px;
  225. display:inline-block;
  226. }
  227.  
  228.  
  229. .pic:hover .info {
  230. opacity:1;
  231. margin-top:0px;
  232. -webkit-transition: all 0.4s ease-in;
  233. -moz-transition: all 0.4s ease-in;
  234. -o-transition: all 0.4s ease-in;
  235. }
  236.  
  237. .info {
  238. position:absolute;
  239. width:144px;
  240. height:194px;
  241. padding:3px;
  242. font-size:10px;
  243. word-spacing:1px;
  244. background:#FFF; /* INFO BACKGROUND COLOR */
  245. font-family:'Oswald', sans-serif;
  246. text-transform:uppercase;
  247. color:#ccc; /* INFO FONT COLOR */
  248. overflow:scroll;
  249. overflow:auto;
  250. max-height:200px;
  251. opacity:0;
  252. margin-top:0px;
  253. text-align:center;
  254. -webkit-transition: all 0.4s ease-in;
  255. -moz-transition: all 0.4s ease-in;
  256. -o-transition: all 0.4s ease-in;
  257. }
  258.  
  259. .infox {
  260. position: relative;
  261. top: 50%;
  262. max-height:200px;
  263. -webkit-transform: translateY(-50%);
  264. -ms-transform: translateY(-50%);
  265. transform: translateY(-50%);
  266. }
  267.  
  268. .info b {
  269. font-weight:normal;
  270. }
  271.  
  272. #sub {
  273. color:#ffc3d4; /* SUBTITLE FONT COLOR */
  274. font-size:13px;
  275. margin-bottom:0px;
  276. }
  277.  
  278.  
  279. hr {
  280. border:0;
  281. height:2px;
  282. background: #fff; /* BREAK LINE COLOR */
  283. }
  284.  
  285.  
  286. #group {
  287. font-family:'Oswald', sans-serif;
  288. text-transform:uppercase;
  289. text-align:left;
  290. word-spacing:3px;
  291. margin-left:0px;
  292. font-size:45px;
  293. margin-top:50px;
  294. margin-left:115px;
  295. color:#fff; /* GROUPS FONT COLOR */
  296. }
  297.  
  298. #name {
  299. font-size:18px;
  300. width:188px;
  301. font-family:'Oswald', sans-serif;
  302. text-transform:uppercase;
  303. color:#ccc; /* NAME COLOR */
  304. word-spacing:3px;
  305. text-align:center;
  306. margin-top:-10px;
  307. margin-left:18px;
  308. position:absolute;
  309. }
  310.  
  311. #name span {
  312. color:#ffc3d4; /* NAME SECOND COLOR */
  313. }
  314.  
  315. #name a {
  316. color:#ccc; /* IF YOU CHANGE THE NAME COLOR, CHANGE THIS TOO */
  317. text-decoration:none;
  318. }
  319.  
  320. #cr {
  321. bottom:10px;
  322. left:10px;
  323. font-weight:bold;
  324. color:#ffc3d4; /* CR LINK COLOR */
  325. font-size:12px;
  326. position:fixed;
  327. background:#f5f5f5; /* CR BACKGROUND COLOR */
  328. padding:4px 7px;
  329. border: 2px solid #fff; /* CR BORDER 1 COLOR */
  330. outline:2px solid #f5f5f5; /* CR BORDER 2 COLOR */
  331. }
  332.  
  333.  
  334.  
  335.  
  336. </style>
  337.  
  338.  
  339. </head>
  340.  
  341. <body>
  342.  
  343.  
  344. <div id="sidebar">
  345.  
  346. <!-- CREDIT -->
  347.  
  348. <a href="https://kimtys.tumblr.com" title="theme by kimtys"><div id="cr">k.</div></a>
  349.  
  350. <!-- SIDEBAR -->
  351.  
  352. <div class="sidebar">
  353. <div id="title"><span>YOUR</span> TITLE</div>
  354. <div id="desc">
  355. DESCRIPTION
  356. </div></div>
  357. <div id="link"><a href="/">back</a> <a href="/ask">ask</a></div>
  358. </div>
  359.  
  360. <div id="center">
  361.  
  362. <!-- GROUP 1 -->
  363.  
  364. <div id="group">GROUP 1</div>
  365.  
  366. <!-- NAME 1 -->
  367.  
  368. <div id="pic1">
  369. <div class="pic">
  370. <div class="info"><section class="infox">
  371. <div id="sub">SUBTITLE</div>
  372. WRITE STUFF HERE. IT SCROLLS
  373. </div></section>
  374. <img src="IMAGE URL"></div> <!-- 150x200px -->
  375. <div id="name"><a href="LINK HERE">
  376. <span>NAME</span> SURNAME
  377. </div></a></div>
  378.  
  379. <!-- END NAME 1 -->
  380.  
  381. <!-- NAME 2 -->
  382.  
  383. <div id="pic1">
  384. <div class="pic">
  385. <div class="info"><section class="infox">
  386. <div id="sub">SUBTITLE</div>
  387. WRITE STUFF HERE. IT SCROLLS
  388. </div></section>
  389. <img src="IMAGE URL"></div> <!-- 150x200px -->
  390. <div id="name"><a href="LINK HERE">
  391. <span>NAME</span> SURNAME
  392. </div></a></div>
  393.  
  394. <!-- END NAME 2 -->
  395.  
  396. <!-- NAME 3 -->
  397.  
  398. <div id="pic1">
  399. <div class="pic">
  400. <div class="info"><section class="infox">
  401. <div id="sub">SUBTITLE</div>
  402. WRITE STUFF HERE. IT SCROLLS
  403. </div></section>
  404. <img src="IMAGE URL"></div> <!-- 150x200px -->
  405. <div id="name"><a href="LINK HERE">
  406. <span>NAME</span> SURNAME
  407. </div></a></div>
  408.  
  409. <!-- END NAME 3 -->
  410.  
  411. <!-- NAME 4 -->
  412.  
  413. <div id="pic1">
  414. <div class="pic">
  415. <div class="info"><section class="infox">
  416. <div id="sub">SUBTITLE</div>
  417. WRITE STUFF HERE. IT SCROLLS
  418. </div></section>
  419. <img src="IMAGE URL"></div> <!-- 150x200px -->
  420. <div id="name"><a href="LINK HERE">
  421. <span>NAME</span> SURNAME
  422. </div></a></div>
  423.  
  424. <!-- END NAME 4 -->
  425.  
  426. <!-- BREAK LINE -->
  427.  
  428. <hr>
  429.  
  430. <!-- GROUP 2 -->
  431.  
  432. <div id="group">GROUP 2</div>
  433.  
  434. <!-- NAME 5 -->
  435.  
  436. <div id="pic1">
  437. <div class="pic">
  438. <div class="info"><section class="infox">
  439. <div id="sub">SUBTITLE</div>
  440. WRITE STUFF HERE. IT SCROLLS
  441. </div></section>
  442. <img src="IMAGE URL"></div> <!-- 150x200px -->
  443. <div id="name"><a href="LINK HERE">
  444. <span>NAME</span> SURNAME
  445. </div></a></div>
  446.  
  447. <!-- END NAME 5 -->
  448.  
  449. <!-- NAME 6 -->
  450.  
  451. <div id="pic1">
  452. <div class="pic">
  453. <div class="info"><section class="infox">
  454. <div id="sub">SUBTITLE</div>
  455. WRITE STUFF HERE. IT SCROLLS
  456. </div></section>
  457. <img src="IMAGE URL"></div> <!-- 150x200px -->
  458. <div id="name"><a href="LINK HERE">
  459. <span>NAME</span> SURNAME
  460. </div></a></div>
  461.  
  462. <!-- END NAME 6 -->
  463.  
  464. <!-- NAME 7 -->
  465.  
  466. <div id="pic1">
  467. <div class="pic">
  468. <div class="info"><section class="infox">
  469. <div id="sub">SUBTITLE</div>
  470. WRITE STUFF HERE. IT SCROLLS
  471. </div></section>
  472. <img src="IMAGE URL"></div> <!-- 150x200px -->
  473. <div id="name"><a href="LINK HERE">
  474. <span>NAME</span> SURNAME
  475. </div></a></div>
  476.  
  477. <!-- END NAME 7 -->
  478.  
  479. <!-- NAME 8 -->
  480.  
  481. <div id="pic1">
  482. <div class="pic">
  483. <div class="info"><section class="infox">
  484. <div id="sub">SUBTITLE</div>
  485. WRITE STUFF HERE. IT SCROLLS
  486. </div></section>
  487. <img src="IMAGE URL"></div> <!-- 150x200px -->
  488. <div id="name"><a href="LINK HERE">
  489. <span>NAME</span> SURNAME
  490. </div></a></div>
  491.  
  492. <!-- END NAME 8 -->
  493.  
  494. <!-- BREAK LINE -->
  495.  
  496. <hr>
  497.  
  498. <!-- GROUP 3 -->
  499.  
  500. <div id="group">GROUP 3</div>
  501.  
  502. <!-- NAME 9 -->
  503.  
  504. <div id="pic1">
  505. <div class="pic">
  506. <div class="info"><section class="infox">
  507. <div id="sub">SUBTITLE</div>
  508. WRITE STUFF HERE. IT SCROLLS
  509. </div></section>
  510. <img src="IMAGE URL"></div> <!-- 150x200px -->
  511. <div id="name"><a href="LINK HERE">
  512. <span>NAME</span> SURNAME
  513. </div></a></div>
  514.  
  515. <!-- END NAME 9 -->
  516.  
  517. <!-- NAME 10 -->
  518.  
  519. <div id="pic1">
  520. <div class="pic">
  521. <div class="info"><section class="infox">
  522. <div id="sub">SUBTITLE</div>
  523. WRITE STUFF HERE. IT SCROLLS
  524. </div></section>
  525. <img src="IMAGE URL"></div> <!-- 150x200px -->
  526. <div id="name"><a href="LINK HERE">
  527. <span>NAME</span> SURNAME
  528. </div></a></div>
  529.  
  530. <!-- END NAME 10 -->
  531.  
  532. <!-- NAME 11 -->
  533.  
  534. <div id="pic1">
  535. <div class="pic">
  536. <div class="info"><section class="infox">
  537. <div id="sub">SUBTITLE</div>
  538. WRITE STUFF HERE. IT SCROLLS
  539. </div></section>
  540. <img src="IMAGE URL"></div> <!-- 150x200px -->
  541. <div id="name"><a href="LINK HERE">
  542. <span>NAME</span> SURNAME
  543. </div></a></div>
  544.  
  545. <!-- END NAME 11 -->
  546.  
  547. <!-- NAME 12 -->
  548.  
  549. <div id="pic1">
  550. <div class="pic">
  551. <div class="info"><section class="infox">
  552. <div id="sub">SUBTITLE</div>
  553. WRITE STUFF HERE. IT SCROLLS
  554. </div></section>
  555. <img src="IMAGE URL"></div> <!-- 150x200px -->
  556. <div id="name"><a href="LINK HERE">
  557. <span>NAME</span> SURNAME
  558. </div></a></div>
  559.  
  560. <!-- END NAME 12 -->
  561.  
  562.  
  563. </div>
  564. </body>
  565. </html>
  566.  
  567. <!--
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!