API tools faq
paste
Advertisement
Guest User

theme thing

a guest
Jan 18th, 2019
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.02 KB | None | 0 0
raw download clone embed print report
  1. <!--- page by hailthehelpful. please don't use this as a base, redistribute...just don't steal it in general. use common sense. thanks!-->
  2.  
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10.  
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  13.  
  14. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  15. <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  16.  
  17. <link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300italic,300,400italic,700,700italic|Montserrat:400,700|Cabin:700' rel='stylesheet' type='text/css'>
  18.  
  19. <script>
  20.  
  21. $(document).ready(function() {
  22. var $container = $('.container').isotope({
  23. itemSelector: '.grid-item',
  24. masonry: {
  25. columnWidth: 360
  26. }
  27. });
  28. $('.name').click(function(){
  29. // change size of item by toggling gigante class
  30. $(this).closest('.grid-item').toggleClass('fullsize');
  31. $container.isotope('layout');
  32. });
  33. $('.name').click(function(){
  34. $(this).toggleClass('close');
  35. });
  36.  
  37. });
  38. </script>
  39.  
  40. <script type="text/javascript">
  41. $(document).ready( function() {
  42. // init Isotope
  43. var $grid = $('.grid').isotope({
  44. itemSelector: '.grid-item'
  45. });
  46.  
  47. // store filter for each group
  48. var filters = {};
  49.  
  50. $('.filters').on( 'click', '.button', function() {
  51. var $this = $(this);
  52. // get group key
  53. var $buttonGroup = $this.parents('.button-group');
  54. var filterGroup = $buttonGroup.attr('data-filter-group');
  55. // set filter for group
  56. filters[ filterGroup ] = $this.attr('data-filter');
  57. // combine filters
  58. var filterValue = concatValues( filters );
  59. // set filter for Isotope
  60. $grid.isotope({ filter: filterValue });
  61. });
  62.  
  63. // change is-checked class on buttons
  64. $('.button-group').each( function( i, buttonGroup ) {
  65. var $buttonGroup = $( buttonGroup );
  66. $buttonGroup.on( 'click', 'button', function() {
  67. $buttonGroup.find('.is-checked').removeClass('is-checked');
  68. $( this ).addClass('is-checked');
  69. });
  70. });
  71.  
  72. });
  73.  
  74. // layout Isotope after each image loads
  75. $grid.imagesLoaded().progress( function() {
  76. $grid.isotope('layout');
  77. });
  78.  
  79. // flatten object by concatting values
  80. function concatValues( obj ) {
  81. var value = '';
  82. for ( var prop in obj ) {
  83. value += obj[ prop ];
  84. }
  85. return value;
  86. }
  87.  
  88. </script>
  89.  
  90.  
  91. <script>
  92. $(document).ready(function(){
  93. $(".showfilters").click(function(){
  94. $(".topfilters").toggle();
  95. });
  96. });
  97. </script>
  98.  
  99.  
  100.  
  101. </head>
  102.  
  103. <style>
  104. * {
  105. -webkit-box-sizing: border-box;
  106. -moz-box-sizing: border-box;
  107. box-sizing: border-box;
  108. margin: 0;
  109. padding: 0;
  110. -webkit-backface-visibility: hidden;
  111. }
  112.  
  113. ::-webkit-scrollbar {
  114. width: 6px;
  115. height: 0;
  116. background: #000;
  117. }
  118.  
  119. ::-webkit-scrollbar-thumb {
  120. -webkit-border-radius: 12px;
  121. background-color: #fff;
  122. }
  123.  
  124. .grid-item ::-webkit-scrollbar-thumb {
  125. border: none;
  126. -webkit-border-radius: 3px;
  127. background-color: #222 !important;
  128. }
  129.  
  130. body,html {
  131. height: 100%;
  132. }
  133.  
  134. body {
  135. background-color: #000;
  136. background-image: url(https://i.imgur.com/XiREXEn.jpg);
  137. background-attachment: fixed;
  138. background-size: cover;
  139. color: #fff;
  140. font-weight: 300;
  141. font-size: 12px;
  142. font-family: 'Roboto',sans-serif;
  143. }
  144.  
  145. a {
  146. color: #73CEC9;
  147. text-decoration: none;
  148. }
  149.  
  150. .container {
  151. margin: auto;
  152. margin-bottom: 50px;
  153. max-width: 1082px;
  154. height: 100%;
  155. }
  156.  
  157. .container:after {
  158. display: block;
  159. clear: both;
  160. content: '';
  161. }
  162.  
  163. .grid-item {
  164. position: relative;
  165. float: left;
  166. overflow: hidden;
  167. margin: 10px;
  168. width: 340px;
  169. height: 240px;
  170. background: #000;
  171. box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  172. }
  173.  
  174. .grid-item img {
  175. width: 100%;
  176. }
  177.  
  178. .grid-item.fullsize {
  179. width: 350px;
  180. height: auto;
  181. }
  182.  
  183. .grid-item.fullsize > .intro img {
  184. display: none;
  185. }
  186.  
  187. .name,h1,h2,h3,#title {
  188. font-weight: 400;
  189. font-family: 'Montserrat',sans-serif;
  190. }
  191.  
  192. .name {
  193. position: absolute;
  194. bottom: 0;
  195. z-index: 99999999;
  196. display: inline-block;
  197. overflow: hidden;
  198. padding: 6px 8px;
  199. width: 320px;
  200. outline: rgba(0,0,0,0.3) solid 1px;
  201. background: rgba(0,0,0,0.3);
  202. color: #fff;
  203. text-shadow: 0 0 1px rgba(0,0,0,.2);
  204. font-size: 14px;
  205. cursor: pointer;
  206. -webkit-transition: all .3s ease-in-out;
  207. -moz-transition: all .3s ease-in-out;
  208. -ms-transition: all .3s ease-in-out;
  209. -o-transition: all .3s ease-in-out;
  210. transition: all .3s ease-in-out;
  211. }
  212.  
  213. .name:hover{
  214. padding-top: 185px;
  215. width: 320px;
  216. outline: #fff solid 1px;
  217. background: rgba(0,0,0,0.0);
  218. }
  219.  
  220.  
  221.  
  222. .name:after {
  223. position: absolute;
  224. right: 0;
  225. bottom: 0;
  226. padding: 0 5px;
  227. content: "+";
  228. font-weight: 100;
  229. }
  230.  
  231. .fullsize .name:after {
  232. content: "";
  233. }
  234.  
  235. .expand {
  236. position: absolute;
  237. bottom: 10px;
  238. left: 10px;
  239. width: 100%;
  240. }
  241.  
  242. .etc,#desc {
  243. font-weight: 300;
  244. font-size: 10px;
  245. font-family: 'Roboto',sans-serif;
  246. }
  247.  
  248. .intro {
  249. position: absolute;
  250. top: 0;
  251. right: 0;
  252. width: 100%;
  253. }
  254.  
  255. #nav,.links a,button {
  256. text-transform: uppercase;
  257. letter-spacing: 2px;
  258. font-weight: 300;
  259. font-size: 10px;
  260. font-family: 'Roboto',sans-serif;
  261. }
  262.  
  263. #nav a:after {
  264. content: " |";
  265. }
  266.  
  267. .links a:after {
  268. background: #000;
  269. color: #fff;
  270. }
  271.  
  272. #nav a:last-of-type:after,.links a:last-of-type:after {
  273. content: "";
  274. }
  275.  
  276. .links a {
  277. display: inline-block;
  278. margin-right: 2px;
  279. padding: 2px 0;
  280. border-bottom: 1px solid #222;
  281. color: #fff;
  282. -webkit-transition: all .3s ease-in-out;
  283. -moz-transition: all .3s ease-in-out;
  284. -ms-transition: all .3s ease-in-out;
  285. -o-transition: all .3s ease-in-out;
  286. transition: all .3s ease-in-out;
  287. }
  288.  
  289. .links a:before {
  290. margin-right: 3px;
  291. content: "\f105";
  292. font-weight: 100;
  293. font-family: FontAwesome;
  294. }
  295.  
  296. .links a:hover {
  297. background: #73CEC9;
  298. color: #000;
  299. }
  300.  
  301. .linkgroup {
  302. display: inline-block;
  303. margin-bottom: 15px;
  304. width: 200px;
  305. vertical-align: top;
  306. }
  307.  
  308. .fullsize .close {
  309. outline: none;
  310. }
  311.  
  312. .close, .close:hover {
  313. position: absolute;
  314. top: 7px;
  315. right: 15px;
  316. display: block !important;
  317. overflow: hidden;
  318. margin: 0!important;
  319. padding: 0!important;
  320. width: 30px;
  321. height: 25px;
  322. border: none;
  323. outline: none;
  324. text-align: right;
  325. text-shadow: none;
  326. background: transparent;
  327. }
  328.  
  329. .close:before {
  330. color: #fff;
  331. content: "\f404 ";
  332. font-size: 23px;
  333. font-family: IonIcons;
  334. }
  335.  
  336. .header {
  337. margin: 20px;
  338. width: 330px;
  339. }
  340.  
  341. .bio {
  342. overflow: auto;
  343. padding: 0 15px 20px 20px;
  344. padding-top: 0;
  345. max-height: 250px;
  346. width: 340px;
  347. text-align: justify;
  348. -webkit-mask-image: -webkit-gradient(linear,center 90%,center bottom,from(rgba(0,0,0,20)),to(rgba(20,0,0,0)));
  349. }
  350.  
  351. .topbar {
  352. position: relative;
  353. overflow: auto;
  354. margin: 40px auto 10px;
  355. width: 1065px;
  356. height: 115px;
  357. background: #000;
  358. color: #fff;
  359. text-align: center;
  360. }
  361.  
  362. #title {
  363. padding-top: 25px;
  364. text-transform: uppercase;
  365. font-size: 35px;
  366. }
  367.  
  368. h1 {
  369. margin: 20px;
  370. padding: 10px;
  371. border: 1px solid #fff;
  372. text-align: left;
  373. font-size: 20px;
  374. }
  375.  
  376. h2 {
  377. margin-bottom: 10px;
  378. padding: 10px 0;
  379. border-bottom: 1px solid #fff;
  380. font-size: 15px;
  381. }
  382.  
  383. h2 span {
  384. font-weight: 100;
  385. font-size: 12px;
  386. font-family: 'Roboto',sans-serif;
  387. }
  388.  
  389. h3 {
  390. display: inline-block;
  391. margin: 0;
  392. margin-right: 10px;
  393. padding: 0;
  394. padding-right: 10px;
  395. border-right: 1px solid #fff;
  396. font-size: 12px;
  397. }
  398.  
  399. p {
  400. padding: 5px 0;
  401. }
  402.  
  403. .box {
  404. position: relative;
  405. display: block;
  406. margin: 20px;
  407. padding: 20px;
  408. border: 1px solid #fff;
  409. }
  410.  
  411. .feed {
  412. display: inline-block;
  413. overflow: auto;
  414. max-height: 400px;
  415. width: 340px;
  416. vertical-align: top;
  417. }
  418.  
  419. .feed li {
  420. margin-right: 20px;
  421. padding: 15px 0;
  422. border-bottom: 1px solid #222;
  423. list-style: none;
  424. }
  425.  
  426. .feed li:last-of-type {
  427. border-bottom: none;
  428. }
  429.  
  430. .feed li i {
  431. color: #B0B0B0;
  432. font-style: normal;
  433. }
  434.  
  435. .feed span {
  436. color: #73CEC9;
  437. }
  438.  
  439. .twitterinfo {
  440. display: inline-block;
  441. margin-right: 35px;
  442. width: 235px;
  443. }
  444.  
  445. .twitterinfo img {
  446. display: inline-block;
  447. width: 180px;
  448. height: 180px;
  449. border-radius: 5px;
  450. }
  451.  
  452. .twitterinfo span,.twitterinfo b {
  453. display: block;
  454. }
  455.  
  456. .twitterinfo b {
  457. font-size: 15px;
  458. }
  459.  
  460. .what {
  461. display: none;
  462. }
  463.  
  464. .what:before,.location:before,.joined:before,.born:before {
  465. display: inline-block;
  466. margin-right: 3px;
  467. width: 20px;
  468. text-align: center;
  469. font-size: 14px;
  470. font-family: "FontAwesome";
  471. }
  472.  
  473. .what:before {
  474. content: '\f0ac';
  475. }
  476.  
  477. .location:before {
  478. content: '\f041';
  479. }
  480.  
  481. .joined:before {
  482. content: '\f017';
  483. }
  484.  
  485. .born:before {
  486. content: '\f1fd';
  487. }
  488.  
  489. .instagram {
  490. padding: 0;
  491. padding-top: 25px;
  492. border: none;
  493. text-align: justify;
  494. }
  495.  
  496. .instagram:after {
  497. display: inline-block;
  498. width: 100%;
  499. content: '';
  500. }
  501.  
  502. .instagram img {
  503. display: inline-block;
  504. margin: 7px 0;
  505. width: 210px;
  506. -webkit-filter: grayscale(100%);
  507. -webkit-transition: all .3s ease-in-out;
  508. -moz-transition: all .3s ease-in-out;
  509. -ms-transition: all .3s ease-in-out;
  510. -o-transition: all .3s ease-in-out;
  511. transition: all .3s ease-in-out;
  512. }
  513.  
  514. .instagram:hover img {
  515. -webkit-filter: grayscale(0%);
  516. }
  517.  
  518. .stats {
  519. list-style: none;
  520. }
  521.  
  522. .topfilters {
  523. position: absolute;
  524. bottom: 0;
  525. z-index: 9999999;
  526. display: none;
  527. width: 100%;
  528. height: 100%;
  529. background: #000;
  530. -webkit-transition: all .3s ease-out;
  531. -moz-transition: all .3s ease-out;
  532. -ms-transition: all .3s ease-out;
  533. -o-transition: all .3s ease-out;
  534. transition: all .3s ease-out;
  535. }
  536.  
  537. .filters {
  538. position: absolute;
  539. bottom: 0;
  540. padding: 15px;
  541. width: 1065px;
  542. }
  543.  
  544.  
  545. button {
  546. display: inline-block;
  547. margin-right: 4px;
  548. padding: 2px 0;
  549. outline: none;
  550. border: none;
  551. border-bottom: 1px solid #222;
  552. background: transparent;
  553. color: #b0b0b0;
  554. text-align: left;
  555. -webkit-transition: all .3s ease-out;
  556. -moz-transition: all .3s ease-out;
  557. -ms-transition: all .3s ease-out;
  558. -o-transition: all .3s ease-out;
  559. transition: all .3s ease-out;
  560. }
  561.  
  562. .button:active,.button.is-checked {
  563. color: #73CEC9;
  564. }
  565.  
  566. .button-group {
  567. display: inline-block;
  568. margin: 0 7px 7px 0;
  569. }
  570.  
  571. iframe {
  572. display: none;
  573. }
  574.  
  575. .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
  576. display: none;
  577. }
  578.  
  579.  
  580. </style>
  581.  
  582. <body>
  583.  
  584.  
  585.  
  586. <div class="topbar">
  587.  
  588. <div id="title">insert title here</div>
  589.  
  590. <div class="topfilters">
  591. <div class="filters">
  592.  
  593. <!-- category one --->
  594. <div class="button-group" data-filter-group="division">
  595. <h3>DIVISION</h3>
  596. <button class="button is-checked" data-filter="">all</button>
  597. <button class="button" data-filter=".une">une</button>
  598. <button class="button" data-filter=".deux">deux</button>
  599. <button class="button" data-filter=".trois">trois</button>
  600. <button class="button" data-filter=".quatre">quatre</button>
  601. </div>
  602.  
  603. <!-- category two --->
  604. <div class="button-group" data-filter-group="availability">
  605. <h3>AVALIABILITY</h3>
  606. <button class="button is-checked" data-filter="">all</button>
  607. <button class="button" data-filter=".open">open</button>
  608. <button class="button" data-filter=".taken">taken</button>
  609. </div>
  610.  
  611. <!-- category three --->
  612. <div class="button-group" data-filter-group="type">
  613. <h3>CHARACTER TYPE</h3>
  614. <button class="button is-checked" data-filter="">all</button>
  615. <button class="button" data-filter=".cc">canon character </button>
  616. <button class="button" data-filter=".oc">original character</button>
  617. <button class="button" data-filter=".wanted">most wanted</button>
  618. </div>
  619.  
  620. <p>
  621. <button><a href="#" class="showfilters">hide filters</a></button>
  622.  
  623. </div>
  624. </div>
  625. <div id="nav">
  626. <a href="/">home</a>
  627. <a href="#" class="showfilters">show filters</a>
  628. <a href="https://hailthehelpful.tumblr.com">credit</a>
  629. </div>
  630. </div>
  631.  
  632. <!-----------------------------BEGIN GRID----------------------------->
  633.  
  634. <div class="grid container">
  635.  
  636. <!--------------------------BEGIN CHARACTER-------------------------->
  637.  
  638. <div class="grid-item thing thing thing">
  639.  
  640. <!--small/before click section-->
  641.  
  642. <div class="intro">
  643. <img src="https://i.imgur.com/VJUXPhq.png"> <!--340x240 image-->
  644. <div class="expand">
  645. <div class="name">FP JONES
  646. <div class="etc">@killingsidney
  647. </div>
  648. </div>
  649. </div>
  650. </div>
  651.  
  652. <!--expanded/after click section-->
  653.  
  654. <div class="header">
  655. <img src="https://i.imgur.com/rJX8CYZ.png"> <!--660x240 image-->
  656. </div>
  657.  
  658. <h1>FP JONES, THE SERPENT KING</h1>
  659.  
  660. <div class="bio">
  661. <p><b>cj&nbsp;</b>writes <b>fp jones</b>.&nbsp;he is known as <b>the&nbsp;serpent king</b>,&nbsp;<b>the leader</b> of the Southside Serpents. before becoming a part of the Serpents, <b>fp jones was known as billy loomis. the supposedly dead teenage killer behind the ghostface murders in woodsboro, ca. what no one knows is that he survived and escaped in riverdale where he settled his roots, became a serpent, got married and fathered two children</b>.&nbsp; <b>fp jones</b> is very <b>charming</b>,&nbsp;<b>loyal</b>, <b>resourceful</b>, but is also <b>deceptive, secretive</b> and <b>aggressive</b>. &nbsp; the best way to describe <b>fp jones</b> would be <b>as a respected yet feared leader who takes care of his own</b>.&nbsp;<br></p>
  662. </div>
  663.  
  664.  
  665.  
  666. </div>
  667.  
  668. <!---------------------------END CHARACTER--------------------------->
  669.  
  670. <!--------------------------BEGIN CHARACTER-------------------------->
  671.  
  672. <div class="grid-item thing thing thing">
  673.  
  674. <!--small/before click section-->
  675.  
  676. <div class="intro">
  677. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  678. <div class="expand">
  679. <div class="name">CHARACTER NAME
  680. <div class="etc">subtitle
  681. </div>
  682. </div>
  683. </div>
  684. </div>
  685.  
  686. <!--expanded/after click section-->
  687.  
  688. <div class="header">
  689. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  690. </div>
  691.  
  692. <h1>CHARACTER NAME</h1>
  693.  
  694. <div class="bio">
  695. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  696.  
  697.  
  698. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  699. </div>
  700.  
  701.  
  702. </div>
  703.  
  704. <!---------------------------END CHARACTER--------------------------->
  705. <!--------------------------BEGIN CHARACTER-------------------------->
  706.  
  707. <div class="grid-item thing thing thing">
  708.  
  709. <!--small/before click section-->
  710.  
  711. <div class="intro">
  712. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  713. <div class="expand">
  714. <div class="name">CHARACTER NAME
  715. <div class="etc">subtitle
  716. </div>
  717. </div>
  718. </div>
  719. </div>
  720.  
  721. <!--expanded/after click section-->
  722.  
  723. <div class="header">
  724. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  725. </div>
  726.  
  727. <h1>CHARACTER NAME</h1>
  728.  
  729. <div class="bio">
  730. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  731.  
  732.  
  733. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  734. </div>
  735.  
  736.  
  737. </div>
  738.  
  739. <!---------------------------END CHARACTER--------------------------->
  740.  
  741. <!--------------------------BEGIN CHARACTER-------------------------->
  742.  
  743. <div class="grid-item thing thing thing">
  744.  
  745. <!--small/before click section-->
  746.  
  747. <div class="intro">
  748. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  749. <div class="expand">
  750. <div class="name">CHARACTER NAME
  751. <div class="etc">subtitle
  752. </div>
  753. </div>
  754. </div>
  755. </div>
  756.  
  757. <!--expanded/after click section-->
  758.  
  759. <div class="header">
  760. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  761. </div>
  762.  
  763. <h1>CHARACTER NAME</h1>
  764.  
  765. <div class="bio">
  766. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  767.  
  768.  
  769. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  770. </div>
  771.  
  772.  
  773.  
  774. </div>
  775.  
  776. <!---------------------------END CHARACTER--------------------------->
  777.  
  778. <!--------------------------BEGIN CHARACTER-------------------------->
  779.  
  780. <div class="grid-item thing thing thing">
  781.  
  782. <!--small/before click section-->
  783.  
  784. <div class="intro">
  785. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  786. <div class="expand">
  787. <div class="name">CHARACTER NAME
  788. <div class="etc">subtitle
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793.  
  794. <!--expanded/after click section-->
  795.  
  796. <div class="header">
  797. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  798. </div>
  799.  
  800. <h1>CHARACTER NAME</h1>
  801.  
  802. <div class="bio">
  803. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  804.  
  805.  
  806. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  807. </div>
  808.  
  809.  
  810.  
  811. </div>
  812.  
  813. <!---------------------------END CHARACTER--------------------------->
  814.  
  815. <!--------------------------BEGIN CHARACTER-------------------------->
  816.  
  817. <div class="grid-item thing thing thing">
  818.  
  819. <!--small/before click section-->
  820.  
  821. <div class="intro">
  822. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  823. <div class="expand">
  824. <div class="name">CHARACTER NAME
  825. <div class="etc">subtitle
  826. </div>
  827. </div>
  828. </div>
  829. </div>
  830.  
  831. <!--expanded/after click section-->
  832.  
  833. <div class="header">
  834. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  835. </div>
  836.  
  837. <h1>CHARACTER NAME</h1>
  838.  
  839. <div class="bio">
  840. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  841.  
  842.  
  843. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  844. </div>
  845.  
  846.  
  847.  
  848. </div>
  849.  
  850. <!---------------------------END CHARACTER--------------------------->
  851.  
  852. <!--------------------------BEGIN CHARACTER-------------------------->
  853.  
  854. <div class="grid-item thing thing thing">
  855.  
  856. <!--small/before click section-->
  857.  
  858. <div class="intro">
  859. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  860. <div class="expand">
  861. <div class="name">CHARACTER NAME
  862. <div class="etc">subtitle
  863. </div>
  864. </div>
  865. </div>
  866. </div>
  867.  
  868. <!--expanded/after click section-->
  869.  
  870. <div class="header">
  871. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  872. </div>
  873.  
  874. <h1>CHARACTER NAME</h1>
  875.  
  876. <div class="bio">
  877. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  878.  
  879.  
  880. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  881. </div>
  882.  
  883.  
  884.  
  885. </div>
  886.  
  887. <!---------------------------END CHARACTER--------------------------->
  888.  
  889. <!--------------------------BEGIN CHARACTER-------------------------->
  890.  
  891. <div class="grid-item thing thing thing">
  892.  
  893. <!--small/before click section-->
  894.  
  895. <div class="intro">
  896. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  897. <div class="expand">
  898. <div class="name">CHARACTER NAME
  899. <div class="etc">subtitle
  900. </div>
  901. </div>
  902. </div>
  903. </div>
  904.  
  905. <!--expanded/after click section-->
  906.  
  907. <div class="header">
  908. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  909. </div>
  910.  
  911. <h1>CHARACTER NAME</h1>
  912.  
  913. <div class="bio">
  914. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  915.  
  916.  
  917. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  918. </div>
  919.  
  920.  
  921. </div>
  922.  
  923. <!---------------------------END CHARACTER--------------------------->
  924.  
  925. <!--------------------------BEGIN CHARACTER-------------------------->
  926.  
  927. <div class="grid-item thing thing thing">
  928.  
  929. <!--small/before click section-->
  930.  
  931. <div class="intro">
  932. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  933. <div class="expand">
  934. <div class="name">CHARACTER NAME
  935. <div class="etc">subtitle
  936. </div>
  937. </div>
  938. </div>
  939. </div>
  940.  
  941. <!--expanded/after click section-->
  942.  
  943. <div class="header">
  944. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  945. </div>
  946.  
  947. <h1>CHARACTER NAME</h1>
  948.  
  949. <div class="bio">
  950. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  951.  
  952.  
  953. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  954. </div>
  955.  
  956.  
  957.  
  958. </div>
  959.  
  960. <!---------------------------END CHARACTER--------------------------->
  961.  
  962. <!--------------------------BEGIN CHARACTER-------------------------->
  963.  
  964. <div class="grid-item thing thing thing">
  965.  
  966. <!--small/before click section-->
  967.  
  968. <div class="intro">
  969. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  970. <div class="expand">
  971. <div class="name">CHARACTER NAME
  972. <div class="etc">subtitle
  973. </div>
  974. </div>
  975. </div>
  976. </div>
  977.  
  978. <!--expanded/after click section-->
  979.  
  980. <div class="header">
  981. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  982. </div>
  983.  
  984. <h1>CHARACTER NAME</h1>
  985.  
  986. <div class="bio">
  987. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  988.  
  989.  
  990. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  991. </div>
  992.  
  993.  
  994.  
  995. </div>
  996.  
  997. <!---------------------------END CHARACTER--------------------------->
  998.  
  999. <!--------------------------BEGIN CHARACTER-------------------------->
  1000.  
  1001. <div class="grid-item thing thing thing">
  1002.  
  1003. <!--small/before click section-->
  1004.  
  1005. <div class="intro">
  1006. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1007. <div class="expand">
  1008. <div class="name">CHARACTER NAME
  1009. <div class="etc">subtitle
  1010. </div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014.  
  1015. <!--expanded/after click section-->
  1016.  
  1017. <div class="header">
  1018. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1019. </div>
  1020.  
  1021. <h1>CHARACTER NAME</h1>
  1022.  
  1023. <div class="bio">
  1024. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  1025.  
  1026.  
  1027. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  1028. </div>
  1029.  
  1030.  
  1031.  
  1032. </div>
  1033.  
  1034. <!---------------------------END CHARACTER--------------------------->
  1035.  
  1036. <!--------------------------BEGIN CHARACTER-------------------------->
  1037.  
  1038. <div class="grid-item thing thing thing">
  1039.  
  1040. <!--small/before click section-->
  1041.  
  1042. <div class="intro">
  1043. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1044. <div class="expand">
  1045. <div class="name">CHARACTER NAME
  1046. <div class="etc">subtitle
  1047. </div>
  1048. </div>
  1049. </div>
  1050. </div>
  1051.  
  1052. <!--expanded/after click section-->
  1053.  
  1054. <div class="header">
  1055. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1056. </div>
  1057.  
  1058. <h1>CHARACTER NAME</h1>
  1059.  
  1060. <div class="bio">
  1061. <p><b>Bold</b> <i>italic</i> <a href="#">link</a> nulla blue bottle craft beer, umami disrupt ramps ennui nesciunt delectus photo booth poutine chambray before they sold out. Viral placeat chillwave ramps. Church-key 8-bit fixie, thundercats next level trust fund whatever. 3 wolf moon put a bird on it hoodie aute. Venmo next level waistcoat placeat, dreamcatcher qui bespoke four dollar toast stumptown hammock. Thundercats irony farm-to-table tumblr, echo park hammock artisan chambray eu nostrud minim in heirloom. Heirloom put a bird on it aliquip, PBR&B green juice blog taxidermy.</p>
  1062.  
  1063.  
  1064. <p>Selfies listicle exercitation fixie kogi, tofu vero dolore swag williamsburg aliqua nostrud waistcoat quinoa odio. Pour-over nesciunt authentic est everyday carry. Selfies art party ullamco, mlkshk stumptown sint YOLO typewriter craft beer cillum irony est microdosing. Plaid dolore ut biodiesel seitan, meh franzen quinoa mlkshk ugh selfies et 3 wolf moon yuccie cillum. Ea humblebrag plaid, twee taxidermy pour-over est fap chillwave austin reprehenderit freegan lomo wayfarers. Gastropub non semiotics laborum intelligentsia migas. Keffiyeh selvage tote bag cardigan mustache raw denim.</p>
  1065. </div>
  1066.  
  1067.  
  1068. </div>
  1069.  
  1070. <!---------------------------END CHARACTER--------------------------->
  1071.  
  1072.  
  1073. </div><!--end container-->
  1074.  
  1075. <!-- SCM Music Player http://scmplayer.net
  1076.  
  1077. adding songs is pretty simple.
  1078. 1) make sure you keep those '''' marks in there!
  1079. 2) replace THE SONG TITLE with your song titles
  1080. 3) replace THE SONG URL with your song urls.
  1081. you can pull them straight from youtube -->
  1082.  
  1083. <script type="text/javascript" src="http://scmplayer.net/script.js"
  1084. data-config="{'skin':'http://static.tumblr.com/nezs2gh/lFOo4ewv8/musicplayer.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[
  1085. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1086. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1087. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1088. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1089. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1090. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1091. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1092. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1093. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1094. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1095. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  1096. {'title':'THE SONG TITLE','url':'THE SONG URL'}]}" ></script>
  1097.  
  1098. </body>
  1099. </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!