API tools faq
paste
Advertisement
nayahelper

theme: badlands.

nayahelper
Jul 17th, 2015
1,017
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. base theme by @neonbikethemes.tumblr.com
  8. rp theme by @pisceswrites.tumblr.com
  9.  
  10. -->
  11.  
  12. {block:Description}
  13. <meta name="description" content="{MetaDescription}" />
  14. {/block:Description}
  15. <meta charset="utf-8">
  16. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  17. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <meta name="image:header" content="">
  22. <meta name="image:background" content="">
  23. <meta name="image:admin 1" content="">
  24. <meta name="image:admin 2" content="">
  25. <meta name="image:admin 3" content="">
  26.  
  27. <meta name="color:Background" content="#ffffff" />
  28. <meta name="color:title bg" content="#000000" />
  29. <meta name="color:posts bg" content="#000000" />
  30. <meta name="color:sidebar bg" content="#000000" />
  31. <meta name="color:links" content="#000000" />
  32. <meta name="color:links hover" content="#a0a0a0" />
  33. <meta name="color:text" content="#000000" />
  34. <meta name="color:posts" content="#ffffff" />
  35. <meta name="color:name border" content="#ffffff" />
  36.  
  37. <meta name="text:Tab 1 Title" content="Tab 1 Title" />
  38. <meta name="text:Tab 2 Title" content="Tab 2 Title" />
  39. <meta name="text:Tab 3 Title" content="Tab 3 Title" />
  40. <meta name="text:Tab 4 Title" content="Tab 4 Title" />
  41. <meta name="text:Tab 5 Title" content="Tab 5 Title" />
  42. <meta name="text:ask tab title" content="ask tab title" />
  43. <meta name="text:blog url" content="blog url, i.e. pisceswrites" />
  44. <meta name="text:admin 1 info" content="admin name, age, timezone" />
  45. <meta name="text:admin 2 info" content="admin name, age, timezone" />
  46. <meta name="text:admin 3 info" content="admin name, age, timezone" />
  47. <meta name="text:nav link one" content="these will be the nav link names" />
  48. <meta name="text:nav url one" content="and their correlating urls!" />
  49. <meta name="text:nav link two" content="the second link" />
  50. <meta name="text:nav url two" content="" />
  51. <meta name="text:nav link three" content="the third link" />
  52. <meta name="text:nav url three" content="" />
  53. <meta name="text:nav link four" content="the fourth link" />
  54. <meta name="text:nav url four" content="" />
  55. <meta name="text:nav link five" content="the fifth link" />
  56. <meta name="text:nav url five" content="" />
  57. <meta name="text:nav link six" content="the sixth link" />
  58. <meta name="text:nav url six" content="" />
  59. <meta name="text:nav link seven" content="the seventh link" />
  60. <meta name="text:nav url seven" content="" />
  61. <meta name="text:nav link eight" content="the eighth link" />
  62. <meta name="text:nav url eight" content="" />
  63.  
  64. <meta name="if:hide captions" content="0"/>
  65. <meta name="if:hide tags" content="0"/>
  66.  
  67.  
  68.  
  69. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  70.  
  71. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  72.  
  73. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  74.  
  75. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  76.  
  77. <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
  78.  
  79. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  80.  
  81. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  82.  
  83. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  84. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  85. <script>
  86. (function($){
  87. $(document).ready(function(){
  88. $("a[title]").style_my_tooltips({
  89. tip_follows_cursor:true,
  90. tip_delay_time:90,
  91. tip_fade_speed:600,
  92. attribute:"title"
  93. });
  94. });
  95. })(jQuery);
  96. </script>
  97.  
  98.  
  99. <style type="text/css">
  100.  
  101. /* ---------------------------- GENERAL ----------------------------- */
  102.  
  103. /* -------- SELECTION TOOL ------- */
  104.  
  105. ::-moz-selection {
  106. background: {color:text};
  107. color: {color:background};
  108. }
  109.  
  110. ::selection {
  111. background: {color:text};
  112. color: {color:background};
  113. }
  114.  
  115. /* -------- SCROLLBAR ------- */
  116.  
  117. ::-webkit-scrollbar {
  118. width: 5px;
  119. }
  120.  
  121. /* Track */
  122. ::-webkit-scrollbar-track {
  123. background:transparent;
  124. }
  125.  
  126. /* Handle */
  127. ::-webkit-scrollbar-thumb {
  128. background:{color:sidebar bg};
  129. }
  130.  
  131. ::-webkit-scrollbar-thumb:window-inactive {
  132. background: transparent;
  133. }
  134.  
  135. /* ------- TOOLTIPS ------ */
  136.  
  137. #s-m-t-tooltip {
  138. max-width:300px;
  139. margin:10px 0px 0px 10px;
  140. padding:5px;
  141. background-color:{color:background};
  142. border-bottom:1px solid {color:posts};
  143. border-right:1px solid {color:posts};
  144. border-radius:0px 10px 0px 10px;
  145. font-family:arial;
  146. font-size:7px;
  147. letter-spacing:0.5px;
  148. color:{color:text};
  149. z-index:999999999999999999999999999999999999;
  150. }
  151.  
  152. /* -------- BASICS ------- */
  153.  
  154. body {
  155. background:{color:Background};
  156. background-image:url('{image:background}');
  157. background-repeat:repeat;
  158. background-position: bottom;
  159. background-attachment: fixed;
  160. color: {color:text};
  161. font-family: arial;
  162. font-size:9px;
  163. margin: 0;
  164. padding: 0;
  165. word-wrap: break-word;
  166. line-height:150%;
  167. }
  168.  
  169. a {
  170. color: {color:links};
  171. text-decoration: none;
  172. -webkit-transition: all .3s;
  173. -moz-transition: all .3s;
  174. -o-transition: all .3s;
  175. -ms-transition: all .3s;
  176. transition: all .3s;
  177. }
  178.  
  179. a:hover{
  180. color:{color:links hover};
  181. -webkit-transition: all .3s;
  182. -moz-transition: all .3s;
  183. -o-transition: all .3s;
  184. -ms-transition: all .3s;
  185. transition: all .3s;
  186. }
  187.  
  188. blockquote {
  189. border-left: 1px solid {color:text};
  190. margin-left: 30px;
  191. padding-left:10px;
  192. }
  193.  
  194. iframe, img, embed, object, video {
  195. max-width: 100%;
  196. }
  197.  
  198. .media img, .media iframe {
  199. width:450px;
  200. display:block;
  201. }
  202.  
  203. p{
  204. margin-bottom:10px;
  205. }
  206.  
  207. img {
  208. height: auto;
  209. width:auto;
  210. max-width:100%;
  211. }
  212.  
  213. h1{
  214. font-size:15px;
  215. text-transform:uppercase;
  216. letter-spacing:-1px;
  217. margin-top:-7px;
  218. text-align:center;
  219. margin-left:-10px;
  220. width:450px;
  221. padding:10px;
  222. background:{color:posts};
  223. border-bottom:1px solid {color:background};
  224. }
  225.  
  226. h2 {
  227. font-size:15px;
  228. text-transform:uppercase;
  229. letter-spacing:-1px;
  230. margin-top:-7px;
  231. text-align:center;
  232. margin-left:-10px;
  233. width:450px;
  234. padding:10px;
  235. background:{color:posts};
  236. border-bottom:1px solid {color:background};
  237. }
  238.  
  239. ul{
  240. list-style-type:square;
  241. }
  242.  
  243. ol{
  244. list-style-type:;
  245. }
  246.  
  247. small {
  248. font-size:8px;
  249. }
  250.  
  251. #bigcon{
  252. width:700px;
  253. margin-left:auto;
  254. margin-right:auto;
  255. }
  256.  
  257. .tabcontent {
  258. position:static;
  259. width: 500px;
  260. height:350px;
  261. font-size:8px;
  262.  
  263. }
  264.  
  265. #postcontainer {
  266. padding:30px;
  267. padding-right:5px;
  268. position:static;
  269. margin-top:-30px;
  270. margin-left:-30px;
  271. margin-right:auto;
  272. width: 500px;
  273. overflow-x:hidden;
  274. height:350px;
  275. }
  276.  
  277.  
  278. /* ----------------------------- HEADER STUFF ---------------------------*/
  279.  
  280. #topbar{
  281. position:static;
  282. margin-top:30px;
  283. margin-bottom:0px;
  284. text-align:center;
  285. }
  286.  
  287. #topbar img {
  288. width:700px;
  289. height:200px;
  290. }
  291.  
  292. .description{
  293. margin-bottom:0px;
  294. }
  295.  
  296. /* ------------------------------ TABS ------------------------------ */
  297.  
  298. .tabs {
  299. width:500px;
  300. margin-left:0px;
  301. display:inline-block;
  302. }
  303.  
  304. /*----- Tab Links -----*/
  305.  
  306. .tab-links {
  307. position:relative;
  308. z-index:999999999999999999999;
  309. margin-top:-4px;
  310. height:410px;
  311. width:125px;
  312. margin-left:-100px;
  313. background:{color:sidebar bg};
  314. }
  315.  
  316. /* Clearfix */
  317. .tab-links:after {
  318. display:block;
  319. clear:both;
  320. content:'';
  321. }
  322.  
  323. .tab-links li {
  324. margin-left:-40px;
  325. display:block;
  326. list-style:none;
  327. text-transform:uppercase;
  328. }
  329.  
  330. .tab-links a {
  331. padding:7px;
  332. font-size:10px;
  333. width:15px;
  334. display:inline-block;
  335. color:{color:links};
  336. transition:all linear 0.15s;
  337. border-bottom:1px solid transparent;
  338. border:1px solid {color:text};
  339. margin-bottom:5px;
  340. text-shadow:1px 1px 1px {color:posts bg};
  341. }
  342.  
  343. .tab-links a:hover {
  344. background-color:{color:posts bg};
  345. text-shadow:1px 1px 1px {color:posts};
  346. text-decoration:none;
  347. }
  348.  
  349. li.active a, li.active a:hover {
  350. background:transparent;
  351. color:{color:links};
  352. background:{color:posts bg};
  353. -webkit-transition: all .3s;
  354. -moz-transition: all .3s;
  355. -o-transition: all .3s;
  356. -ms-transition: all .3s;
  357. transition: all .3s;
  358. }
  359.  
  360. /*----- Content of Tabs -----*/
  361. .tab-content {
  362. width:475px;
  363. margin-left:165px;
  364. background-color:#f8f8f8;
  365. height:350px;
  366. padding:30px;
  367. background-color:{color:posts bg};
  368. }
  369.  
  370. .tab {
  371. display:none;
  372. }
  373.  
  374. .tab.active {
  375. display:block;
  376. }
  377.  
  378. /* --------------------------- POSTS (articles) --------------------- */
  379.  
  380. article {
  381. background:{color:posts};
  382. padding: 10px;
  383. width: 450px;
  384. text-align:left;
  385. margin-bottom:30px;
  386. }
  387.  
  388.  
  389. /* --------------------------- CHARACTER TABS --------------------- */
  390.  
  391. /*-- credit to babyxnanas for the hover coding --*/
  392.  
  393. #content figure{
  394. width:230px;
  395. height:160px;
  396. position:relative;
  397. overflow:hidden;
  398. }
  399.  
  400. #content figure img{
  401. display:block;
  402. width:200px;
  403. height:130px;
  404. }
  405.  
  406. #content figure figcaption{
  407. text-align:center;
  408. line-height:100%;
  409. padding:0px;
  410. }
  411.  
  412. #content figure figcaption h2{
  413. margin:0px;
  414. font-size:15px;
  415. font-weight:300;
  416. text-transform:uppercase;
  417. letter-spacing:1px;
  418. background:{color:posts bg};
  419. width:91%;
  420. }
  421.  
  422. #content figure figcaption h2 span{
  423. font-weight:700;
  424. }
  425.  
  426. #content figure figcaption p{
  427. margin-top:-70px;
  428. width:91%;
  429. height:50px;
  430. border:1px solid {color:sidebar bg};
  431. background-color:{color:posts bg};
  432. padding:10px;
  433. font-size:10px;
  434. font-weight:300;
  435. letter-spacing:1px;
  436. }
  437.  
  438. figure.char{
  439. background:{color:posts bg};
  440. margin-top:0px;
  441. margin-left:0px;
  442. margin-bottom:8px;
  443. }
  444.  
  445. figure.char img{
  446. opacity:1;
  447. filter: alpha(opacity=100);
  448. -webkit-transition:all 0.6s;
  449. -moz-transition:all 0.3s;
  450. -ms-transition:all 0.6s;
  451. -o-transition:all 0.6s;
  452. transition:all 0.6s;
  453. }
  454.  
  455. figure.char:hover img{
  456. opacity:0.7;
  457. filter: alpha(opacity=70);
  458. /* speed */
  459. -webkit-transition:all 0.6s;
  460. -moz-transition:all 0.3s;
  461. -ms-transition:all 0.6s;
  462. -o-transition:all 0.6s;
  463. transition:all 0.6s;
  464. }
  465.  
  466. figure.char figcaption{
  467. position:absolute;
  468. width:100%;
  469. /* text position */
  470. top:66%;
  471. left:0px;
  472. opacity:0.7;
  473. font-size:9px;
  474. text-align:center;
  475. /* speed */
  476. -webkit-transition:all 0.6s;
  477. -moz-transition:all 0.3s;
  478. -ms-transition:all 0.6s;
  479. -o-transition:all 0.6s;
  480. transition:all 0.6s;
  481. }
  482.  
  483.  
  484. /* title position before hover */
  485. figure.char figcaption h2{
  486. padding:10px;
  487. border:1px solid {color:sidebar bg};
  488. line-height:90%;
  489. /* size */
  490. -webkit-transform:scale3d(0.8,0.8,1);
  491. -moz-transform:scale3d(0.8,0.8,1);
  492. -o-transform:scale3d(0.8,0.8,1);
  493. -ms-transform:scale3d(0.8,0.8,1);
  494. transform:scale3d(0.8,0.8,1);
  495. /* speed */
  496. -webkit-transition:all 0.6s;
  497. -moz-transition:all 0.3s;
  498. -ms-transition:all 0.6s;
  499. -o-transition:all 0.6s;
  500. transition:all 0.6s;
  501. }
  502.  
  503. /* title position after hover */
  504. figure.char:hover figcaption h2{
  505. color:{color:text};
  506. /* speed */
  507. -webkit-transition:all 0.6s;
  508. -moz-transition:all 0.3s;
  509. -ms-transition:all 0.6s;
  510. -o-transition:all 0.6s;
  511. transition:all 0.6s;
  512. }
  513.  
  514. figure.char figcaption p{
  515. /* hidden before hover */
  516. opacity:0;
  517. color:{color:text};
  518. text-shadow:1px 1px 1px {color:name border};
  519. /* zoom in */
  520. -webkit-transform:scale3d(0.8,0.8,1);
  521. -moz-transform:scale3d(0.8,0.8,1);
  522. -o-transform:scale3d(0.8,0.8,1);
  523. -ms-transform:scale3d(0.8,0.8,1);
  524. transform:scale3d(0.8,0.8,1);
  525. /* speed */
  526. -webkit-transition:all 0.6s;
  527. -moz-transition:all 0.3s;
  528. -ms-transition:all 0.6s;
  529. -o-transition:all 0.6s;
  530. transition:all 0.6s;
  531. }
  532.  
  533. figure.char:hover figcaption p{
  534. opacity:1;
  535. color:{color:text};
  536. text-shadow:1px 1px 1px {color:name border};
  537. /* speed */
  538. -webkit-transition:all 0.6s;
  539. -moz-transition:all 0.3s;
  540. -ms-transition:all 0.6s;
  541. -o-transition:all 0.6s;
  542. transition:all 0.6s;
  543. }
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550.  
  551.  
  552. figure.char2{
  553. background:{color:posts bg};
  554. float:right;
  555. margin-right:25px;
  556. margin-top:-168px;
  557. }
  558.  
  559. figure.char2 img{
  560. opacity:1;
  561. filter: alpha(opacity=100);
  562. -webkit-transition:all 0.6s;
  563. -moz-transition:all 0.3s;
  564. -ms-transition:all 0.6s;
  565. -o-transition:all 0.6s;
  566. transition:all 0.6s;
  567. }
  568.  
  569. figure.char2:hover img{
  570. opacity:0.7;
  571. filter: alpha(opacity=70);
  572. /* speed */
  573. -webkit-transition:all 0.6s;
  574. -moz-transition:all 0.3s;
  575. -ms-transition:all 0.6s;
  576. -o-transition:all 0.6s;
  577. transition:all 0.6s;
  578. }
  579.  
  580. figure.char2 figcaption{
  581. position:absolute;
  582. width:100%;
  583. /* text position */
  584. top:66%;
  585. left:0px;
  586. opacity:0.7;
  587. font-size:9px;
  588. text-align:center;
  589. /* speed */
  590. -webkit-transition:all 0.6s;
  591. -moz-transition:all 0.3s;
  592. -ms-transition:all 0.6s;
  593. -o-transition:all 0.6s;
  594. transition:all 0.6s;
  595. }
  596.  
  597.  
  598. /* title position before hover */
  599. figure.char2 figcaption h2{
  600. padding:10px;
  601. border:1px solid {color:sidebar bg};
  602. line-height:90%;
  603. /* size */
  604. -webkit-transform:scale3d(0.8,0.8,1);
  605. -moz-transform:scale3d(0.8,0.8,1);
  606. -o-transform:scale3d(0.8,0.8,1);
  607. -ms-transform:scale3d(0.8,0.8,1);
  608. transform:scale3d(0.8,0.8,1);
  609. /* speed */
  610. -webkit-transition:all 0.6s;
  611. -moz-transition:all 0.3s;
  612. -ms-transition:all 0.6s;
  613. -o-transition:all 0.6s;
  614. transition:all 0.6s;
  615. }
  616.  
  617. /* title position after hover */
  618. figure.char2:hover figcaption h2{
  619. color:{color:text};
  620. /* speed */
  621. -webkit-transition:all 0.6s;
  622. -moz-transition:all 0.3s;
  623. -ms-transition:all 0.6s;
  624. -o-transition:all 0.6s;
  625. transition:all 0.6s;
  626. }
  627.  
  628. figure.char2 figcaption p{
  629. /* hidden before hover */
  630. opacity:0;
  631. color:{color:text};
  632. text-shadow:1px 1px 1px {color:name border};
  633. /* zoom in */
  634. -webkit-transform:scale3d(0.8,0.8,1);
  635. -moz-transform:scale3d(0.8,0.8,1);
  636. -o-transform:scale3d(0.8,0.8,1);
  637. -ms-transform:scale3d(0.8,0.8,1);
  638. transform:scale3d(0.8,0.8,1);
  639. /* speed */
  640. -webkit-transition:all 0.6s;
  641. -moz-transition:all 0.3s;
  642. -ms-transition:all 0.6s;
  643. -o-transition:all 0.6s;
  644. transition:all 0.6s;
  645. }
  646.  
  647. figure.char2:hover figcaption p{
  648. opacity:1;
  649. color:{color:text};
  650. text-shadow:1px 1px 1px {color:name border};
  651. /* speed */
  652. -webkit-transition:all 0.6s;
  653. -moz-transition:all 0.3s;
  654. -ms-transition:all 0.6s;
  655. -o-transition:all 0.6s;
  656. transition:all 0.6s;
  657. }
  658.  
  659.  
  660.  
  661. /* ---------------------------- POST INFO -----------------------------*/
  662.  
  663. #info {
  664. width:450px;
  665. color:{color:link};
  666. background:{color:sidebar bg};
  667. text-align:right;
  668. font-family:arial;
  669. letter-spacing:0px;
  670. font-size:8px;
  671. padding:10px;
  672. line-height:10px;
  673. text-transform:uppercase;
  674. margin-left:-10px;
  675. margin-top:15px;
  676. margin-bottom:-10px;
  677. border-top:1px solid {color:background};
  678. }
  679.  
  680. #info a {
  681. color:{color:link};
  682. }
  683.  
  684. #info a:hover {
  685. -moz-transition-duration:0.3s;
  686. -webkit-transition-duration:0.3s;
  687. -o-transition-duration:0.3s;
  688. color:{color:hover}
  689. }
  690.  
  691. .tags {
  692. display:inline-block;
  693. {block:indexpage}
  694. {block:ifHideTags}
  695. display:none;
  696. {/block:ifHideTags}
  697. {/block:indexpage}
  698. }
  699.  
  700. /* ---------------------------- POST NOTES ------------------------- */
  701.  
  702. ol.notes {
  703. display:block;
  704. text-align:left;
  705. list-style-type:none;
  706. margin-left:-40px;
  707. }
  708.  
  709. ol.notes li.note{
  710. margin-bottom:5px;
  711. }
  712.  
  713. .pagenotes {
  714. text-align:left;
  715. margin-top:15px;
  716. }
  717.  
  718. .pagenotes img{
  719. padding-right:5px;
  720. padding-top:5px;
  721. margin-bottom:-5px;
  722. }
  723.  
  724.  
  725. /* -------------------------- POST TYPES -------------------------- */
  726.  
  727. /* CHAT */
  728. .chat {
  729. line-height:20px;
  730. list-style:none;
  731. }
  732.  
  733. .line.odd {
  734. background:{color:posts bg};
  735. margin-bottom:2px;
  736. padding:5px;
  737. list-style:none;
  738. font-size:9px;
  739. }
  740.  
  741. .line.even {
  742. background:{color:sidebar bg};
  743. margin-bottom:2px;
  744. padding:5px;
  745. list-style:none;
  746. font-size:9px;
  747. }
  748.  
  749. .label {
  750. padding-right:1px;
  751. text-transform:uppercase;
  752. font-weight:bold;
  753. color:{color:text};
  754. }
  755.  
  756.  
  757.  
  758. /* QUOTES */
  759.  
  760. .qsource {
  761. font-size:8px;
  762. text-transform:uppercase;
  763. text-align:left;
  764. letter-spacing:1px;
  765. background-color:{color:sidebar bg};
  766. color:{color:text};
  767. padding:5px;
  768. height:11px;
  769. font-weight:bold;
  770. }
  771.  
  772. .quote {
  773. color:{color:text};
  774. font-style:italic;
  775. padding:15px;
  776. font-size:14px;
  777. font-weight:bold;
  778. letter-spacing:-0.3px;
  779. background-color:{color:posts bg};
  780. text-transform:lowercase;
  781. text-align:center;
  782. margin-bottom:-4px;
  783. }
  784.  
  785. .quote big {
  786. margin:5px;
  787. }
  788.  
  789. /* QUESTIONS */
  790.  
  791. .q {
  792. padding:7px;
  793. background-color:{color:posts bg};
  794. border:1px solid {color:sidebar bg};
  795. }
  796.  
  797. .a {
  798. margin-top:10px;
  799. }
  800.  
  801. .as {
  802. font-style:italic;
  803. font-size:15px;
  804. font-weight:bold;
  805. text-transform:uppercase;
  806. letter-spacing:-1px;
  807. color:{color:link};
  808. display:inline-block;
  809. }
  810.  
  811. .as a {
  812. color:{color:link};
  813. border:0;
  814. }
  815.  
  816. .as a:hover {color:{color:hover};}
  817.  
  818. /* AUDIO */
  819.  
  820. .audio {
  821. margin-top:-50px;
  822. width:500px;
  823. }
  824.  
  825. .albumart {
  826. position:relative;
  827. float:left;
  828. padding:0px 10px 10px 0px;
  829. }
  830.  
  831. .albumart img {
  832. width:64px;
  833. height:64px;
  834. }
  835.  
  836. .playercontainer {
  837. margin-left:11px;
  838. margin-top:10px;
  839. z-index:9999;
  840. position:relative;
  841. padding-top:7px;
  842. padding-left:11px;
  843. padding-right:9px;
  844. padding-bottom:13px;
  845. background-color:#ffffff;
  846. width: 20px;
  847. height: 20px;
  848. overflow: hidden;
  849. -webkit-border-radius: 100px;
  850. -moz-border-radius: 100px;
  851. border-radius: 100px;
  852. opacity:0.2;
  853. -webkit-transition: all .3s;
  854. -moz-transition: all .3s;
  855. -o-transition: all .3s;
  856. -ms-transition: all .3s;
  857. transition: all .3s;
  858. }
  859.  
  860. .playercontainer:hover {
  861. opacity:0.9;
  862. -webkit-transition: all .3s;
  863. -moz-transition: all .3s;
  864. -o-transition: all .3s;
  865. -ms-transition: all .3s;
  866. transition: all .3s;
  867. }
  868.  
  869. .audioinfo {
  870. text-transform:uppercase;
  871. line-height:14px;
  872. font-size:8px;
  873. padding:10px;
  874. color:{color:text};
  875. }
  876.  
  877. .audioinfo b {
  878. text-decoration:underline;
  879. }
  880.  
  881. /* ------------------------- PAGINATION ------------------------- */
  882.  
  883. #pagination{
  884. position:static;
  885. text-align:center;
  886. }
  887.  
  888. .pagibutton{
  889. position:relative;
  890. display:inline-block;
  891. padding:15px;
  892. }
  893.  
  894.  
  895.  
  896. #credit {
  897. width: 5px;
  898. height: 5px;
  899. font-weight:bold;
  900. font-family: arial;
  901. font-size: 8px;
  902. text-transform: uppercase;
  903. text-align: center;
  904. bottom: 10px;
  905. right: 10px;
  906. padding: 10px;
  907. color:{color:text};
  908. position: fixed;
  909. }
  910.  
  911.  
  912. /* --------------------------- Custom CSS -------------------------- */
  913. {CustomCSS}
  914. </style>
  915. </head>
  916. <body>
  917.  
  918.  
  919. <div id="bigcon">
  920.  
  921.  
  922.  
  923. <!--TOPBAR-->
  924.  
  925. <div id="topbar">
  926.  
  927. <img src="{image:header}">
  928.  
  929. <div class="description">{description}</div>
  930.  
  931. <div id="navbar">
  932. <div class="tabs">
  933. <ul class="tab-links">
  934. <br><br><br><Br><Br><br><br><br><br><br>
  935. <li class="active">
  936. <a href="#tab1" title="{text:tab 1 title}"><i class="fa fa-home"></i></a></li>
  937. <li><a href="#tab2" title="{text:tab 2 title}"><i class="fa fa-folder-o"></i></a></li>
  938. <li><a href="#tab3" title="{text:tab 3 title}"><i class="fa fa-book"></i></a></li>
  939. <li><a href="#tab4" title="{text:tab 4 title}"><i class="fa fa-diamond"></i></a></li>
  940. <li><a href="#tab5" title="{text:tab 5 title}"><i class="fa fa-moon-o"></i></a></li>
  941. </ul>
  942. </div>
  943. </div>
  944.  
  945. </div>
  946.  
  947.  
  948. <!-- --------------------------- TABS -------------------------- -->
  949.  
  950. <div style="margin-top:-419px;">
  951.  
  952. <div class="tabs">
  953.  
  954.  
  955. <!-- --------------------------- TAB 1 -------------------------- -->
  956.  
  957. <div class="tab-content">
  958. <div id="tab1" class="tab active">
  959.  
  960. <div id="postcontainer">
  961.  
  962. {block:Posts}
  963. <!-- {block:NoRebloggedFrom}
  964. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  965. {/block:NoRebloggedFrom} -->
  966. {block:ContentSource}<!-- {SourceURL}
  967. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  968. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  969. {/block:ContentSource}
  970. <article>
  971.  
  972. <!--TEXT POST-->
  973. {block:Text}
  974. {block:Title}
  975. <h1 class="title">
  976. <a href="{Permalink}">{Title}</a></h1>
  977. {/block:Title}
  978. {Body}
  979. {/block:Text}
  980.  
  981.  
  982. <!--PHOTO POST-->
  983. {block:Photo}
  984. {block:IndexPage}
  985. {LinkOpenTag}
  986. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  987. {LinkCloseTag}
  988. {/block:IndexPage}
  989. {block:PermalinkPage}
  990. {LinkOpenTag}
  991. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  992. {LinkCloseTag}{/block:PermalinkPage}
  993. {/block:Photo}
  994.  
  995.  
  996. <!--PHOTOSET POST-->
  997. {block:Photoset}
  998. {block:IndexPage}{Photoset}{/block:IndexPage}
  999. {block:PermalinkPage}{Photoset}{/block:PermalinkPage}
  1000. {/block:Photoset}
  1001.  
  1002.  
  1003. <!--QUOTE POST-->
  1004. {block:Quote}
  1005. {block:Source}<div class="qsource">{Source}</div>{/block:Source}
  1006. <div class="quote">{Quote}</div>
  1007. {/block:Quote}
  1008.  
  1009.  
  1010. <!--LINK POST-->
  1011. {block:Link}
  1012. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  1013. {block:Description}{Description}{/block:Description}
  1014. {/block:Link}
  1015.  
  1016.  
  1017. <!--CHAT POST-->
  1018. {block:Chat}
  1019. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1020. {/block:Chat}
  1021.  
  1022.  
  1023. <!--AUDIO POST-->
  1024. {block:Audio}{block:AudioPlayer}<div class="playercontainer">{AudioPlayerWhite}</div>{/block:AudioPlayer}<div class="audio">{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  1025. <div class="audioinfo">{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  1026. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times</div><br></div>{/block:Audio}
  1027.  
  1028.  
  1029. <!--VIDEO POST-->
  1030. {block:Video}
  1031. <div class="media">{Video-500}</div>
  1032. {/block:Video}
  1033.  
  1034.  
  1035. <!--ANSWER POST-->
  1036. {block:Answer}
  1037. <div class="q"><span class="as">{Asker},</span>&nbsp;&nbsp;&nbsp;{Question}</div><div class="a">{Answer}</div>
  1038. {/block:Answer}
  1039.  
  1040. <!--CAPTIONS-->
  1041. {block:Ifhidecaptions}
  1042. {block:permalink}
  1043. {block:Caption}
  1044. {Caption}
  1045. {/block:Caption}
  1046. {/block:permalink}
  1047. {/block:Ifhidecaptions}
  1048. {block:Ifnothidecaptions}
  1049. {block:Caption}
  1050. {Caption}
  1051. {/block:Caption}
  1052. {/block:Ifnothidecaptions}
  1053.  
  1054. <!--POST INFORMATION-->
  1055. <div id="info">{block:Date}<b><a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}</a></b>{/block:Date}&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;<a href="{Permalink}">{NoteCount}</a>{block:RebloggedFrom}&nbsp;&nbsp;&thinsp;&bull;&nbsp;&nbsp;&nbsp;<b><a href="{ReblogParentURL}" title="{ReblogParenttitle}">via</b> </a>
  1056. {block:ContentSource}<b><a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRoottitle}">/ src</a></b>{/block:ContentSource}{/block:RebloggedFrom} {block:HasTags}<span class="tags">&nbsp;&nbsp;&thinsp;&bull;&nbsp;&nbsp;&nbsp;<a title="{block:Tags}#{Tag} {/block:Tags}"><i class="fa fa-heart-o"></i></a></span>{/block:HasTags}
  1057. </div>
  1058.  
  1059. <!--POST NOTES-->
  1060. {block:PostNotes}
  1061. <div class="pagenotes">{PostNotes-16}</div>
  1062. {/block:PostNotes}
  1063.  
  1064.  
  1065. </article>
  1066. {/block:Posts}
  1067. <!--Close of article-->
  1068.  
  1069. </div>
  1070.  
  1071. </div>
  1072.  
  1073. <!-- -------------------------- TAB 2 -------------------------- -->
  1074.  
  1075. <div id="tab2" class="tab">
  1076. <div class="tabcontent" style="padding:10px;">
  1077.  
  1078.  
  1079. <h2>{text:ask tab title}</h2>
  1080. <iframe frameborder="0" width="450px" height="200px" id="ask_form" src="http://www.tumblr.com/ask_form/{text:blog url}.tumblr.com" seamless></iframe>
  1081.  
  1082.  
  1083. </div>
  1084. </div>
  1085.  
  1086.  
  1087. <!-- -------------------------- TAB 3 -------------------------- -->
  1088.  
  1089. <div id="tab3" class="tab">
  1090. <div class="tabcontent">
  1091. <div style="margin-left:10px; width:450px; text-align:center;">
  1092. <a title="{text:admin 1 info}"><img src="{image:admin 1}" style="width:60px; border:15px solid {color:sidebar bg};"></a>&nbsp;
  1093. <a title="{text:admin 2 info}"><img src="{image:admin 2}" style="width:60px; border:15px solid {color:sidebar bg};"></a>&nbsp;
  1094. <a title="{text:admin 3 info}"><img src="{image:admin 3}" style="width:60px; border:15px solid {color:sidebar bg};"></a>
  1095. </div>
  1096.  
  1097. <div style="margin-top:10px; margin-left:96px; text-align:center; display:block;">
  1098. <a href="{text:nav url one}" style="display:block; width:266px; background-color:{color:sidebar bg}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link one}</a>
  1099. <a href="{text:nav url two}" style="display:block; width:266px; background-color:{color:posts}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link two}</a>
  1100. <a href="{text:nav url three}" style="display:block; width:266px; background-color:{color:sidebar bg}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link three}</a>
  1101. <a href="{text:nav url four}" style="display:block; width:266px; background-color:{color:posts}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link four}</a>
  1102. <a href="{text:nav url five}" style="display:block; width:266px; background-color:{color:sidebar bg}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link five}</a>
  1103. <a href="{text:nav url six}" style="display:block; width:266px; background-color:{color:posts}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link six}</a>
  1104. <a href="{text:nav url seven}" style="display:block; width:266px; background-color:{color:sidebar bg}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link seven}</a>
  1105. <a href="{text:nav url eight}" style="display:block; width:266px; background-color:{color:posts}; padding:6px; text-transform:uppercase; color:{color:text}; font-weight:bold; margin-bottom:3px;">{text:nav link eight}</a>
  1106. </div>
  1107.  
  1108. </div>
  1109. </div>
  1110.  
  1111.  
  1112. <!-- -------------------------- TAB 4 -------------------------- -->
  1113.  
  1114. <div id="tab4" class="tab">
  1115. <div class="tabcontent" style="padding:30px; padding-right:5px; position:static; margin-top:-30px;margin-left:-30px;margin-right:auto;width: 500px;overflow-x:hidden;height:350px;">
  1116.  
  1117. <div id="content">
  1118.  
  1119. <!-- COPY TWO ROWS (FOUR BOXES) AT A TIME!!!!! OR ELSE IT WILL LOOK WEIRD!! -->
  1120.  
  1121. <figure class="char">
  1122. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/dRfbN3K.png"></div>
  1123. <figcaption>
  1124. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1125. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1126. </figcaption>
  1127. </figure>
  1128.  
  1129.  
  1130. <figure class="char2">
  1131. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/2vlHJ9E.png"></div>
  1132. <figcaption>
  1133. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1134. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1135. </figcaption>
  1136. </figure>
  1137.  
  1138. <figure class="char">
  1139. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/OY6fcMj.png"></div>
  1140. <figcaption>
  1141. <h2>character <span>name</span></h2><!-- text in <span> will be bolded -->
  1142. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1143. </figcaption>
  1144. </figure>
  1145.  
  1146. <figure class="char2">
  1147. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/sbzyfEW.png"></div>
  1148. <figcaption>
  1149. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1150. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1151. </figcaption>
  1152. </figure>
  1153.  
  1154.  
  1155. <!-- END OF TWO ROWS -->
  1156.  
  1157.  
  1158.  
  1159.  
  1160.  
  1161. <figure class="char">
  1162. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/b7SBWHD.png"></div>
  1163. <figcaption>
  1164. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1165. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1166. </figcaption>
  1167. </figure>
  1168.  
  1169.  
  1170. <figure class="char2">
  1171. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/15QI2ER.png"></div>
  1172. <figcaption>
  1173. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1174. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1175. </figcaption>
  1176. </figure>
  1177.  
  1178.  
  1179.  
  1180. <figure class="char">
  1181. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/cfMLK8t.png"></div>
  1182. <figcaption>
  1183. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1184. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1185. </figcaption>
  1186. </figure>
  1187.  
  1188.  
  1189. <figure class="char2">
  1190. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/npa1DBm.png"></div>
  1191. <figcaption>
  1192. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1193. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1194. </figcaption>
  1195. </figure>
  1196.  
  1197.  
  1198.  
  1199.  
  1200.  
  1201.  
  1202. <figure class="char">
  1203. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/dRfbN3K.png"></div>
  1204. <figcaption>
  1205. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1206. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1207. </figcaption>
  1208. </figure>
  1209.  
  1210.  
  1211. <figure class="char2">
  1212. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/2vlHJ9E.png"></div>
  1213. <figcaption>
  1214. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1215. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1216. </figcaption>
  1217. </figure>
  1218.  
  1219.  
  1220. <figure class="char">
  1221. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/VK8Ljzg.png"></div>
  1222. <figcaption>
  1223. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1224. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1225. </figcaption>
  1226. </figure>
  1227.  
  1228.  
  1229. <figure class="char2">
  1230. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/ECk9lHD.png"></div>
  1231. <figcaption>
  1232. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1233. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1234. </figcaption>
  1235. </figure>
  1236.  
  1237.  
  1238. </div>
  1239.  
  1240.  
  1241. </div>
  1242. </div>
  1243.  
  1244.  
  1245. <!-- -------------------------- TAB 5 -------------------------- -->
  1246.  
  1247. <div id="tab5" class="tab">
  1248. <div class="tabcontent" style="padding:30px; padding-right:5px; position:static; margin-top:-30px;margin-left:-30px;margin-right:auto;width: 500px;overflow-x:hidden;height:350px;">
  1249.  
  1250.  
  1251.  
  1252. <div id="content">
  1253.  
  1254. <!-- COPY TWO ROWS (FOUR BOXES) AT A TIME!!!!! OR ELSE IT WILL LOOK WEIRD!! -->
  1255.  
  1256. <figure class="char">
  1257. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/dRfbN3K.png"></div>
  1258. <figcaption>
  1259. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1260. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1261. </figcaption>
  1262. </figure>
  1263.  
  1264.  
  1265. <figure class="char2">
  1266. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/2vlHJ9E.png"></div>
  1267. <figcaption>
  1268. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1269. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1270. </figcaption>
  1271. </figure>
  1272.  
  1273. <figure class="char">
  1274. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/OY6fcMj.png"></div>
  1275. <figcaption>
  1276. <h2>character <span>name</span></h2><!-- text in <span> will be bolded -->
  1277. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1278. </figcaption>
  1279. </figure>
  1280.  
  1281. <figure class="char2">
  1282. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/sbzyfEW.png"></div>
  1283. <figcaption>
  1284. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1285. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1286. </figcaption>
  1287. </figure>
  1288.  
  1289.  
  1290. <!-- END OF TWO ROWS -->
  1291.  
  1292.  
  1293.  
  1294.  
  1295.  
  1296. <figure class="char">
  1297. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/b7SBWHD.png"></div>
  1298. <figcaption>
  1299. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1300. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1301. </figcaption>
  1302. </figure>
  1303.  
  1304.  
  1305. <figure class="char2">
  1306. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/15QI2ER.png"></div>
  1307. <figcaption>
  1308. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1309. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1310. </figcaption>
  1311. </figure>
  1312.  
  1313.  
  1314.  
  1315. <figure class="char">
  1316. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/cfMLK8t.png"></div>
  1317. <figcaption>
  1318. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1319. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1320. </figcaption>
  1321. </figure>
  1322.  
  1323.  
  1324. <figure class="char2">
  1325. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/npa1DBm.png"></div>
  1326. <figcaption>
  1327. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1328. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1329. </figcaption>
  1330. </figure>
  1331.  
  1332.  
  1333.  
  1334.  
  1335.  
  1336.  
  1337. <figure class="char">
  1338. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/dRfbN3K.png"></div>
  1339. <figcaption>
  1340. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1341. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1342. </figcaption>
  1343. </figure>
  1344.  
  1345.  
  1346. <figure class="char2">
  1347. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/2vlHJ9E.png"></div>
  1348. <figcaption>
  1349. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1350. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1351. </figcaption>
  1352. </figure>
  1353.  
  1354.  
  1355. <figure class="char">
  1356. <div style="padding-right:10px;"><img style="margin-bottom:5px; float:left; width:200px; border:15px solid {color:posts};" src="http://i.imgur.com/VK8Ljzg.png"></div>
  1357. <figcaption>
  1358. <h2>first <span>last</span></h2><!-- text in <span> will be bolded -->
  1359. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris fringilla pellentesque erat eget scelerisque. proin sapien dolor, lobortis sit amet mollis tristique, lacinia eu lorem. curabitur velit lectus</p><!-- char info here -->
  1360. </figcaption>
  1361. </figure>
  1362.  
  1363.  
  1364. <figure class="char2">
  1365. <div style="margin-top:0px;"><img style="float:right; margin-bottom:5px; margin-left:10px; width:200px; border:15px solid {color:sidebar bg};" src="http://i.imgur.com/ECk9lHD.png"></div>
  1366. <figcaption>
  1367. <h2>gigi <span>hadid</span></h2><!-- text in <span> will be bolded -->
  1368. <p>twenty years old. model. keep this around six lines or something short like that, please, and since the text is pretty nicely sized, i don't think it'll be a problem to get all the character info fit in here. this must be edited in html.</p><!-- char info here -->
  1369. </figcaption>
  1370. </figure>
  1371.  
  1372.  
  1373. </div>
  1374.  
  1375.  
  1376.  
  1377.  
  1378. </div>
  1379. </div>
  1380.  
  1381.  
  1382. <!-- END OF TABS -->
  1383.  
  1384. </div>
  1385. </div>
  1386. </div>
  1387. <!--PAGINATION-->
  1388. {block:Pagination}
  1389. <div class="pagination">
  1390. {block:PreviousPage}
  1391. <a href="{PreviousPage}">
  1392. <div class="pagibutton"><i class="fa fa-angle-left"></i></div></a>
  1393. {/block:PreviousPage}
  1394. {block:NextPage}
  1395. <a href="{NextPage}">
  1396. <div class="pagibutton"><i class="fa fa-angle-right"></i></div></a>
  1397. {/block:NextPage}
  1398. </div>
  1399. {/block:Pagination}
  1400. </div>
  1401. </div>
  1402.  
  1403. </div>
  1404.  
  1405. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1406.  
  1407. <script>
  1408. $(document).ready(function() {
  1409. $('.tabs .tab-links a').on('click', function(e) {
  1410. var currentAttrValue = $(this).attr('href');
  1411.  
  1412. // Show/Hide Tabs
  1413. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1414.  
  1415. // Change/remove current tab to active
  1416. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1417.  
  1418. e.preventDefault();
  1419. });
  1420. });
  1421. </script>
  1422.  
  1423. <script>
  1424. $(document).ready(function() {
  1425. $('#filterOptions li a').click(function() {
  1426. // fetch the class of the clicked item
  1427. var ourClass = $(this).attr('class');
  1428.  
  1429. // reset the active class on all the buttons
  1430. $('#filterOptions li').removeClass('active');
  1431. // update the active state on our clicked button
  1432. $(this).parent().addClass('active');
  1433.  
  1434. if(ourClass == 'all') {
  1435. // show all our items
  1436. $('#ourHolder').children('div.item').show();
  1437. }
  1438. else {
  1439. // hide all elements that don't share ourClass
  1440. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1441. // show all elements that do share ourClass
  1442. $('#ourHolder').children('div.' + ourClass).show();
  1443. }
  1444. return false;
  1445. });
  1446. });
  1447. </script>
  1448.  
  1449.  
  1450. <div id="credit"><a href="http://pisceswrites.tumblr.com"><i class="fa fa-code"></i></a></div>
  1451.  
  1452. </body>
  1453. </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!