API tools faq
paste
codesbyraven

dilemma

codesbyraven
May 4th, 2016
12,274
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 69.29 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(http://i.imgur.com/UyDBHed.png);
  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: 700px;
  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: 660px;
  339. }
  340.  
  341. .bio {
  342. overflow: auto;
  343. padding: 0 15px 20px 20px;
  344. padding-top: 0;
  345. max-height: 250px;
  346. width: 680px;
  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="http://placehold.it/340x240"> <!--340x240 image-->
  644. <div class="expand">
  645. <div class="name">CHARACTER NAME
  646. <div class="etc">subtitle
  647. </div>
  648. </div>
  649. </div>
  650. </div>
  651.  
  652. <!--expanded/after click section-->
  653.  
  654. <div class="header">
  655. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  656. </div>
  657.  
  658. <h1>CHARACTER NAME</h1>
  659.  
  660. <div class="bio">
  661. <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>
  662.  
  663.  
  664. <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>
  665. </div>
  666.  
  667. <!---------------------------twitter section--------------------------->
  668.  
  669. <div class="box">
  670.  
  671. <div class="twitterinfo">
  672. <img src="http://placehold.it/180">
  673.  
  674. <h2>name
  675. <span>@username</span></h2>
  676.  
  677. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  678.  
  679. <ul class="stats">
  680. <li class="what">what</li>
  681. <li class="location">place</li>
  682. <li class="joined">Joined Month 20XX</li>
  683. <li class="born">Born on Month 00, 19XX</li>
  684. </ul>
  685. </div>
  686.  
  687. <div class="feed">
  688.  
  689. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  690.  
  691. <ul>
  692. <li><b>name</b> <i>@username</i><br>
  693. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  694.  
  695. <li><b>name</b> <i>@username</i><br>
  696. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  697.  
  698. <li><b>name</b> <i>@username</i><br>
  699. Chicharrones williamsburg venmo craft beer.</li>
  700.  
  701. <li><b>name</b> <i>@username</i><br>
  702. Authentic franzen actually chillwave fashion axe godard.</li>
  703.  
  704. <li><b>name</b> <i>@username</i><br>
  705. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  706. </ul>
  707. </div>
  708.  
  709. </div>
  710.  
  711. <!--------------------------instagram section-------------------------->
  712.  
  713. <div class="instagram box">
  714. <h2>@instaname <span>— some cool bio thing here</span></h2>
  715. <img src="http://placehold.it/210">
  716. <img src="http://placehold.it/210">
  717. <img src="http://placehold.it/210">
  718. <img src="http://placehold.it/210">
  719. <img src="http://placehold.it/210">
  720. <img src="http://placehold.it/210">
  721. </div>
  722. <!-------------------------navigation section------------------------->
  723.  
  724. <div class="links box">
  725. <div class="linkgroup">
  726. <h2>the first</h2>
  727. <a href="/">nerves</a>
  728. <a href="/">rawks</a>
  729. <a href="/">y.a.l.a</a>
  730. <a href="/">so fast, so maybe</a>
  731. </div>
  732.  
  733.  
  734. <div class="linkgroup">
  735. <h2>the second</h2>
  736. <a href="/">no duh</a>
  737. <a href="/">braveheart</a>
  738. <a href="/">heaven knows</a>
  739. <a href="/">hear the bells</a>
  740. </div>
  741.  
  742.  
  743. <div class="linkgroup">
  744. <h2>the third</h2>
  745. <a href="/">90s music</a>
  746. <a href="/">cynics & critics</a>
  747. <a href="/">enemy fire</a>
  748. <a href="/">u don't know</a>
  749. </div>
  750. </div>
  751.  
  752. </div>
  753.  
  754. <!---------------------------END CHARACTER--------------------------->
  755.  
  756. <!--------------------------BEGIN CHARACTER-------------------------->
  757.  
  758. <div class="grid-item thing thing thing">
  759.  
  760. <!--small/before click section-->
  761.  
  762. <div class="intro">
  763. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  764. <div class="expand">
  765. <div class="name">CHARACTER NAME
  766. <div class="etc">subtitle
  767. </div>
  768. </div>
  769. </div>
  770. </div>
  771.  
  772. <!--expanded/after click section-->
  773.  
  774. <div class="header">
  775. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  776. </div>
  777.  
  778. <h1>CHARACTER NAME</h1>
  779.  
  780. <div class="bio">
  781. <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>
  782.  
  783.  
  784. <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>
  785. </div>
  786.  
  787. <!---------------------------twitter section--------------------------->
  788.  
  789. <div class="box">
  790.  
  791. <div class="twitterinfo">
  792. <img src="http://placehold.it/180">
  793.  
  794. <h2>name
  795. <span>@username</span></h2>
  796.  
  797. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  798.  
  799. <ul class="stats">
  800. <li class="what">what</li>
  801. <li class="location">place</li>
  802. <li class="joined">Joined Month 20XX</li>
  803. <li class="born">Born on Month 00, 19XX</li>
  804. </ul>
  805. </div>
  806.  
  807. <div class="feed">
  808.  
  809. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  810.  
  811. <ul>
  812. <li><b>name</b> <i>@username</i><br>
  813. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  814.  
  815. <li><b>name</b> <i>@username</i><br>
  816. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  817.  
  818. <li><b>name</b> <i>@username</i><br>
  819. Chicharrones williamsburg venmo craft beer.</li>
  820.  
  821. <li><b>name</b> <i>@username</i><br>
  822. Authentic franzen actually chillwave fashion axe godard.</li>
  823.  
  824. <li><b>name</b> <i>@username</i><br>
  825. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  826. </ul>
  827. </div>
  828.  
  829. </div>
  830.  
  831. <!--------------------------instagram section-------------------------->
  832.  
  833. <div class="instagram box">
  834. <h2>@instaname <span>— some cool bio thing here</span></h2>
  835. <img src="http://placehold.it/210">
  836. <img src="http://placehold.it/210">
  837. <img src="http://placehold.it/210">
  838. <img src="http://placehold.it/210">
  839. <img src="http://placehold.it/210">
  840. <img src="http://placehold.it/210">
  841. </div>
  842. <!-------------------------navigation section------------------------->
  843.  
  844. <div class="links box">
  845. <div class="linkgroup">
  846. <h2>the first</h2>
  847. <a href="/">nerves</a>
  848. <a href="/">rawks</a>
  849. <a href="/">y.a.l.a</a>
  850. <a href="/">so fast, so maybe</a>
  851. </div>
  852.  
  853.  
  854. <div class="linkgroup">
  855. <h2>the second</h2>
  856. <a href="/">no duh</a>
  857. <a href="/">braveheart</a>
  858. <a href="/">heaven knows</a>
  859. <a href="/">hear the bells</a>
  860. </div>
  861.  
  862.  
  863. <div class="linkgroup">
  864. <h2>the third</h2>
  865. <a href="/">90s music</a>
  866. <a href="/">cynics & critics</a>
  867. <a href="/">enemy fire</a>
  868. <a href="/">u don't know</a>
  869. </div>
  870. </div>
  871.  
  872. </div>
  873.  
  874. <!---------------------------END CHARACTER--------------------------->
  875. <!--------------------------BEGIN CHARACTER-------------------------->
  876.  
  877. <div class="grid-item thing thing thing">
  878.  
  879. <!--small/before click section-->
  880.  
  881. <div class="intro">
  882. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  883. <div class="expand">
  884. <div class="name">CHARACTER NAME
  885. <div class="etc">subtitle
  886. </div>
  887. </div>
  888. </div>
  889. </div>
  890.  
  891. <!--expanded/after click section-->
  892.  
  893. <div class="header">
  894. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  895. </div>
  896.  
  897. <h1>CHARACTER NAME</h1>
  898.  
  899. <div class="bio">
  900. <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>
  901.  
  902.  
  903. <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>
  904. </div>
  905.  
  906. <!---------------------------twitter section--------------------------->
  907.  
  908. <div class="box">
  909.  
  910. <div class="twitterinfo">
  911. <img src="http://placehold.it/180">
  912.  
  913. <h2>name
  914. <span>@username</span></h2>
  915.  
  916. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  917.  
  918. <ul class="stats">
  919. <li class="what">what</li>
  920. <li class="location">place</li>
  921. <li class="joined">Joined Month 20XX</li>
  922. <li class="born">Born on Month 00, 19XX</li>
  923. </ul>
  924. </div>
  925.  
  926. <div class="feed">
  927.  
  928. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  929.  
  930. <ul>
  931. <li><b>name</b> <i>@username</i><br>
  932. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  933.  
  934. <li><b>name</b> <i>@username</i><br>
  935. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  936.  
  937. <li><b>name</b> <i>@username</i><br>
  938. Chicharrones williamsburg venmo craft beer.</li>
  939.  
  940. <li><b>name</b> <i>@username</i><br>
  941. Authentic franzen actually chillwave fashion axe godard.</li>
  942.  
  943. <li><b>name</b> <i>@username</i><br>
  944. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  945. </ul>
  946. </div>
  947.  
  948. </div>
  949.  
  950. <!--------------------------instagram section-------------------------->
  951.  
  952. <div class="instagram box">
  953. <h2>@instaname <span>— some cool bio thing here</span></h2>
  954. <img src="http://placehold.it/210">
  955. <img src="http://placehold.it/210">
  956. <img src="http://placehold.it/210">
  957. <img src="http://placehold.it/210">
  958. <img src="http://placehold.it/210">
  959. <img src="http://placehold.it/210">
  960. </div>
  961. <!-------------------------navigation section------------------------->
  962.  
  963. <div class="links box">
  964. <div class="linkgroup">
  965. <h2>the first</h2>
  966. <a href="/">nerves</a>
  967. <a href="/">rawks</a>
  968. <a href="/">y.a.l.a</a>
  969. <a href="/">so fast, so maybe</a>
  970. </div>
  971.  
  972.  
  973. <div class="linkgroup">
  974. <h2>the second</h2>
  975. <a href="/">no duh</a>
  976. <a href="/">braveheart</a>
  977. <a href="/">heaven knows</a>
  978. <a href="/">hear the bells</a>
  979. </div>
  980.  
  981.  
  982. <div class="linkgroup">
  983. <h2>the third</h2>
  984. <a href="/">90s music</a>
  985. <a href="/">cynics & critics</a>
  986. <a href="/">enemy fire</a>
  987. <a href="/">u don't know</a>
  988. </div>
  989. </div>
  990.  
  991. </div>
  992.  
  993. <!---------------------------END CHARACTER--------------------------->
  994.  
  995. <!--------------------------BEGIN CHARACTER-------------------------->
  996.  
  997. <div class="grid-item thing thing thing">
  998.  
  999. <!--small/before click section-->
  1000.  
  1001. <div class="intro">
  1002. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1003. <div class="expand">
  1004. <div class="name">CHARACTER NAME
  1005. <div class="etc">subtitle
  1006. </div>
  1007. </div>
  1008. </div>
  1009. </div>
  1010.  
  1011. <!--expanded/after click section-->
  1012.  
  1013. <div class="header">
  1014. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1015. </div>
  1016.  
  1017. <h1>CHARACTER NAME</h1>
  1018.  
  1019. <div class="bio">
  1020. <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>
  1021.  
  1022.  
  1023. <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>
  1024. </div>
  1025.  
  1026. <!---------------------------twitter section--------------------------->
  1027.  
  1028. <div class="box">
  1029.  
  1030. <div class="twitterinfo">
  1031. <img src="http://placehold.it/180">
  1032.  
  1033. <h2>name
  1034. <span>@username</span></h2>
  1035.  
  1036. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1037.  
  1038. <ul class="stats">
  1039. <li class="what">what</li>
  1040. <li class="location">place</li>
  1041. <li class="joined">Joined Month 20XX</li>
  1042. <li class="born">Born on Month 00, 19XX</li>
  1043. </ul>
  1044. </div>
  1045.  
  1046. <div class="feed">
  1047.  
  1048. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1049.  
  1050. <ul>
  1051. <li><b>name</b> <i>@username</i><br>
  1052. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1053.  
  1054. <li><b>name</b> <i>@username</i><br>
  1055. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1056.  
  1057. <li><b>name</b> <i>@username</i><br>
  1058. Chicharrones williamsburg venmo craft beer.</li>
  1059.  
  1060. <li><b>name</b> <i>@username</i><br>
  1061. Authentic franzen actually chillwave fashion axe godard.</li>
  1062.  
  1063. <li><b>name</b> <i>@username</i><br>
  1064. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1065. </ul>
  1066. </div>
  1067.  
  1068. </div>
  1069.  
  1070. <!--------------------------instagram section-------------------------->
  1071.  
  1072. <div class="instagram box">
  1073. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1074. <img src="http://placehold.it/210">
  1075. <img src="http://placehold.it/210">
  1076. <img src="http://placehold.it/210">
  1077. <img src="http://placehold.it/210">
  1078. <img src="http://placehold.it/210">
  1079. <img src="http://placehold.it/210">
  1080. </div>
  1081. <!-------------------------navigation section------------------------->
  1082.  
  1083. <div class="links box">
  1084. <div class="linkgroup">
  1085. <h2>the first</h2>
  1086. <a href="/">nerves</a>
  1087. <a href="/">rawks</a>
  1088. <a href="/">y.a.l.a</a>
  1089. <a href="/">so fast, so maybe</a>
  1090. </div>
  1091.  
  1092.  
  1093. <div class="linkgroup">
  1094. <h2>the second</h2>
  1095. <a href="/">no duh</a>
  1096. <a href="/">braveheart</a>
  1097. <a href="/">heaven knows</a>
  1098. <a href="/">hear the bells</a>
  1099. </div>
  1100.  
  1101.  
  1102. <div class="linkgroup">
  1103. <h2>the third</h2>
  1104. <a href="/">90s music</a>
  1105. <a href="/">cynics & critics</a>
  1106. <a href="/">enemy fire</a>
  1107. <a href="/">u don't know</a>
  1108. </div>
  1109. </div>
  1110.  
  1111. </div>
  1112.  
  1113. <!---------------------------END CHARACTER--------------------------->
  1114.  
  1115. <!--------------------------BEGIN CHARACTER-------------------------->
  1116.  
  1117. <div class="grid-item thing thing thing">
  1118.  
  1119. <!--small/before click section-->
  1120.  
  1121. <div class="intro">
  1122. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1123. <div class="expand">
  1124. <div class="name">CHARACTER NAME
  1125. <div class="etc">subtitle
  1126. </div>
  1127. </div>
  1128. </div>
  1129. </div>
  1130.  
  1131. <!--expanded/after click section-->
  1132.  
  1133. <div class="header">
  1134. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1135. </div>
  1136.  
  1137. <h1>CHARACTER NAME</h1>
  1138.  
  1139. <div class="bio">
  1140. <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>
  1141.  
  1142.  
  1143. <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>
  1144. </div>
  1145.  
  1146. <!---------------------------twitter section--------------------------->
  1147.  
  1148. <div class="box">
  1149.  
  1150. <div class="twitterinfo">
  1151. <img src="http://placehold.it/180">
  1152.  
  1153. <h2>name
  1154. <span>@username</span></h2>
  1155.  
  1156. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1157.  
  1158. <ul class="stats">
  1159. <li class="what">what</li>
  1160. <li class="location">place</li>
  1161. <li class="joined">Joined Month 20XX</li>
  1162. <li class="born">Born on Month 00, 19XX</li>
  1163. </ul>
  1164. </div>
  1165.  
  1166. <div class="feed">
  1167.  
  1168. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1169.  
  1170. <ul>
  1171. <li><b>name</b> <i>@username</i><br>
  1172. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1173.  
  1174. <li><b>name</b> <i>@username</i><br>
  1175. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1176.  
  1177. <li><b>name</b> <i>@username</i><br>
  1178. Chicharrones williamsburg venmo craft beer.</li>
  1179.  
  1180. <li><b>name</b> <i>@username</i><br>
  1181. Authentic franzen actually chillwave fashion axe godard.</li>
  1182.  
  1183. <li><b>name</b> <i>@username</i><br>
  1184. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1185. </ul>
  1186. </div>
  1187.  
  1188. </div>
  1189.  
  1190. <!--------------------------instagram section-------------------------->
  1191.  
  1192. <div class="instagram box">
  1193. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1194. <img src="http://placehold.it/210">
  1195. <img src="http://placehold.it/210">
  1196. <img src="http://placehold.it/210">
  1197. <img src="http://placehold.it/210">
  1198. <img src="http://placehold.it/210">
  1199. <img src="http://placehold.it/210">
  1200. </div>
  1201. <!-------------------------navigation section------------------------->
  1202.  
  1203. <div class="links box">
  1204. <div class="linkgroup">
  1205. <h2>the first</h2>
  1206. <a href="/">nerves</a>
  1207. <a href="/">rawks</a>
  1208. <a href="/">y.a.l.a</a>
  1209. <a href="/">so fast, so maybe</a>
  1210. </div>
  1211.  
  1212.  
  1213. <div class="linkgroup">
  1214. <h2>the second</h2>
  1215. <a href="/">no duh</a>
  1216. <a href="/">braveheart</a>
  1217. <a href="/">heaven knows</a>
  1218. <a href="/">hear the bells</a>
  1219. </div>
  1220.  
  1221.  
  1222. <div class="linkgroup">
  1223. <h2>the third</h2>
  1224. <a href="/">90s music</a>
  1225. <a href="/">cynics & critics</a>
  1226. <a href="/">enemy fire</a>
  1227. <a href="/">u don't know</a>
  1228. </div>
  1229. </div>
  1230.  
  1231. </div>
  1232.  
  1233. <!---------------------------END CHARACTER--------------------------->
  1234.  
  1235. <!--------------------------BEGIN CHARACTER-------------------------->
  1236.  
  1237. <div class="grid-item thing thing thing">
  1238.  
  1239. <!--small/before click section-->
  1240.  
  1241. <div class="intro">
  1242. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1243. <div class="expand">
  1244. <div class="name">CHARACTER NAME
  1245. <div class="etc">subtitle
  1246. </div>
  1247. </div>
  1248. </div>
  1249. </div>
  1250.  
  1251. <!--expanded/after click section-->
  1252.  
  1253. <div class="header">
  1254. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1255. </div>
  1256.  
  1257. <h1>CHARACTER NAME</h1>
  1258.  
  1259. <div class="bio">
  1260. <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>
  1261.  
  1262.  
  1263. <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>
  1264. </div>
  1265.  
  1266. <!---------------------------twitter section--------------------------->
  1267.  
  1268. <div class="box">
  1269.  
  1270. <div class="twitterinfo">
  1271. <img src="http://placehold.it/180">
  1272.  
  1273. <h2>name
  1274. <span>@username</span></h2>
  1275.  
  1276. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1277.  
  1278. <ul class="stats">
  1279. <li class="what">what</li>
  1280. <li class="location">place</li>
  1281. <li class="joined">Joined Month 20XX</li>
  1282. <li class="born">Born on Month 00, 19XX</li>
  1283. </ul>
  1284. </div>
  1285.  
  1286. <div class="feed">
  1287.  
  1288. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1289.  
  1290. <ul>
  1291. <li><b>name</b> <i>@username</i><br>
  1292. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1293.  
  1294. <li><b>name</b> <i>@username</i><br>
  1295. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1296.  
  1297. <li><b>name</b> <i>@username</i><br>
  1298. Chicharrones williamsburg venmo craft beer.</li>
  1299.  
  1300. <li><b>name</b> <i>@username</i><br>
  1301. Authentic franzen actually chillwave fashion axe godard.</li>
  1302.  
  1303. <li><b>name</b> <i>@username</i><br>
  1304. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1305. </ul>
  1306. </div>
  1307.  
  1308. </div>
  1309.  
  1310. <!--------------------------instagram section-------------------------->
  1311.  
  1312. <div class="instagram box">
  1313. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1314. <img src="http://placehold.it/210">
  1315. <img src="http://placehold.it/210">
  1316. <img src="http://placehold.it/210">
  1317. <img src="http://placehold.it/210">
  1318. <img src="http://placehold.it/210">
  1319. <img src="http://placehold.it/210">
  1320. </div>
  1321. <!-------------------------navigation section------------------------->
  1322.  
  1323. <div class="links box">
  1324. <div class="linkgroup">
  1325. <h2>the first</h2>
  1326. <a href="/">nerves</a>
  1327. <a href="/">rawks</a>
  1328. <a href="/">y.a.l.a</a>
  1329. <a href="/">so fast, so maybe</a>
  1330. </div>
  1331.  
  1332.  
  1333. <div class="linkgroup">
  1334. <h2>the second</h2>
  1335. <a href="/">no duh</a>
  1336. <a href="/">braveheart</a>
  1337. <a href="/">heaven knows</a>
  1338. <a href="/">hear the bells</a>
  1339. </div>
  1340.  
  1341.  
  1342. <div class="linkgroup">
  1343. <h2>the third</h2>
  1344. <a href="/">90s music</a>
  1345. <a href="/">cynics & critics</a>
  1346. <a href="/">enemy fire</a>
  1347. <a href="/">u don't know</a>
  1348. </div>
  1349. </div>
  1350.  
  1351. </div>
  1352.  
  1353. <!---------------------------END CHARACTER--------------------------->
  1354.  
  1355. <!--------------------------BEGIN CHARACTER-------------------------->
  1356.  
  1357. <div class="grid-item thing thing thing">
  1358.  
  1359. <!--small/before click section-->
  1360.  
  1361. <div class="intro">
  1362. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1363. <div class="expand">
  1364. <div class="name">CHARACTER NAME
  1365. <div class="etc">subtitle
  1366. </div>
  1367. </div>
  1368. </div>
  1369. </div>
  1370.  
  1371. <!--expanded/after click section-->
  1372.  
  1373. <div class="header">
  1374. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1375. </div>
  1376.  
  1377. <h1>CHARACTER NAME</h1>
  1378.  
  1379. <div class="bio">
  1380. <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>
  1381.  
  1382.  
  1383. <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>
  1384. </div>
  1385.  
  1386. <!---------------------------twitter section--------------------------->
  1387.  
  1388. <div class="box">
  1389.  
  1390. <div class="twitterinfo">
  1391. <img src="http://placehold.it/180">
  1392.  
  1393. <h2>name
  1394. <span>@username</span></h2>
  1395.  
  1396. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1397.  
  1398. <ul class="stats">
  1399. <li class="what">what</li>
  1400. <li class="location">place</li>
  1401. <li class="joined">Joined Month 20XX</li>
  1402. <li class="born">Born on Month 00, 19XX</li>
  1403. </ul>
  1404. </div>
  1405.  
  1406. <div class="feed">
  1407.  
  1408. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1409.  
  1410. <ul>
  1411. <li><b>name</b> <i>@username</i><br>
  1412. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1413.  
  1414. <li><b>name</b> <i>@username</i><br>
  1415. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1416.  
  1417. <li><b>name</b> <i>@username</i><br>
  1418. Chicharrones williamsburg venmo craft beer.</li>
  1419.  
  1420. <li><b>name</b> <i>@username</i><br>
  1421. Authentic franzen actually chillwave fashion axe godard.</li>
  1422.  
  1423. <li><b>name</b> <i>@username</i><br>
  1424. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1425. </ul>
  1426. </div>
  1427.  
  1428. </div>
  1429.  
  1430. <!--------------------------instagram section-------------------------->
  1431.  
  1432. <div class="instagram box">
  1433. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1434. <img src="http://placehold.it/210">
  1435. <img src="http://placehold.it/210">
  1436. <img src="http://placehold.it/210">
  1437. <img src="http://placehold.it/210">
  1438. <img src="http://placehold.it/210">
  1439. <img src="http://placehold.it/210">
  1440. </div>
  1441. <!-------------------------navigation section------------------------->
  1442.  
  1443. <div class="links box">
  1444. <div class="linkgroup">
  1445. <h2>the first</h2>
  1446. <a href="/">nerves</a>
  1447. <a href="/">rawks</a>
  1448. <a href="/">y.a.l.a</a>
  1449. <a href="/">so fast, so maybe</a>
  1450. </div>
  1451.  
  1452.  
  1453. <div class="linkgroup">
  1454. <h2>the second</h2>
  1455. <a href="/">no duh</a>
  1456. <a href="/">braveheart</a>
  1457. <a href="/">heaven knows</a>
  1458. <a href="/">hear the bells</a>
  1459. </div>
  1460.  
  1461.  
  1462. <div class="linkgroup">
  1463. <h2>the third</h2>
  1464. <a href="/">90s music</a>
  1465. <a href="/">cynics & critics</a>
  1466. <a href="/">enemy fire</a>
  1467. <a href="/">u don't know</a>
  1468. </div>
  1469. </div>
  1470.  
  1471. </div>
  1472.  
  1473. <!---------------------------END CHARACTER--------------------------->
  1474.  
  1475. <!--------------------------BEGIN CHARACTER-------------------------->
  1476.  
  1477. <div class="grid-item thing thing thing">
  1478.  
  1479. <!--small/before click section-->
  1480.  
  1481. <div class="intro">
  1482. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1483. <div class="expand">
  1484. <div class="name">CHARACTER NAME
  1485. <div class="etc">subtitle
  1486. </div>
  1487. </div>
  1488. </div>
  1489. </div>
  1490.  
  1491. <!--expanded/after click section-->
  1492.  
  1493. <div class="header">
  1494. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1495. </div>
  1496.  
  1497. <h1>CHARACTER NAME</h1>
  1498.  
  1499. <div class="bio">
  1500. <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>
  1501.  
  1502.  
  1503. <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>
  1504. </div>
  1505.  
  1506. <!---------------------------twitter section--------------------------->
  1507.  
  1508. <div class="box">
  1509.  
  1510. <div class="twitterinfo">
  1511. <img src="http://placehold.it/180">
  1512.  
  1513. <h2>name
  1514. <span>@username</span></h2>
  1515.  
  1516. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1517.  
  1518. <ul class="stats">
  1519. <li class="what">what</li>
  1520. <li class="location">place</li>
  1521. <li class="joined">Joined Month 20XX</li>
  1522. <li class="born">Born on Month 00, 19XX</li>
  1523. </ul>
  1524. </div>
  1525.  
  1526. <div class="feed">
  1527.  
  1528. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1529.  
  1530. <ul>
  1531. <li><b>name</b> <i>@username</i><br>
  1532. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1533.  
  1534. <li><b>name</b> <i>@username</i><br>
  1535. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1536.  
  1537. <li><b>name</b> <i>@username</i><br>
  1538. Chicharrones williamsburg venmo craft beer.</li>
  1539.  
  1540. <li><b>name</b> <i>@username</i><br>
  1541. Authentic franzen actually chillwave fashion axe godard.</li>
  1542.  
  1543. <li><b>name</b> <i>@username</i><br>
  1544. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1545. </ul>
  1546. </div>
  1547.  
  1548. </div>
  1549.  
  1550. <!--------------------------instagram section-------------------------->
  1551.  
  1552. <div class="instagram box">
  1553. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1554. <img src="http://placehold.it/210">
  1555. <img src="http://placehold.it/210">
  1556. <img src="http://placehold.it/210">
  1557. <img src="http://placehold.it/210">
  1558. <img src="http://placehold.it/210">
  1559. <img src="http://placehold.it/210">
  1560. </div>
  1561. <!-------------------------navigation section------------------------->
  1562.  
  1563. <div class="links box">
  1564. <div class="linkgroup">
  1565. <h2>the first</h2>
  1566. <a href="/">nerves</a>
  1567. <a href="/">rawks</a>
  1568. <a href="/">y.a.l.a</a>
  1569. <a href="/">so fast, so maybe</a>
  1570. </div>
  1571.  
  1572.  
  1573. <div class="linkgroup">
  1574. <h2>the second</h2>
  1575. <a href="/">no duh</a>
  1576. <a href="/">braveheart</a>
  1577. <a href="/">heaven knows</a>
  1578. <a href="/">hear the bells</a>
  1579. </div>
  1580.  
  1581.  
  1582. <div class="linkgroup">
  1583. <h2>the third</h2>
  1584. <a href="/">90s music</a>
  1585. <a href="/">cynics & critics</a>
  1586. <a href="/">enemy fire</a>
  1587. <a href="/">u don't know</a>
  1588. </div>
  1589. </div>
  1590.  
  1591. </div>
  1592.  
  1593. <!---------------------------END CHARACTER--------------------------->
  1594.  
  1595. <!--------------------------BEGIN CHARACTER-------------------------->
  1596.  
  1597. <div class="grid-item thing thing thing">
  1598.  
  1599. <!--small/before click section-->
  1600.  
  1601. <div class="intro">
  1602. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1603. <div class="expand">
  1604. <div class="name">CHARACTER NAME
  1605. <div class="etc">subtitle
  1606. </div>
  1607. </div>
  1608. </div>
  1609. </div>
  1610.  
  1611. <!--expanded/after click section-->
  1612.  
  1613. <div class="header">
  1614. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1615. </div>
  1616.  
  1617. <h1>CHARACTER NAME</h1>
  1618.  
  1619. <div class="bio">
  1620. <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>
  1621.  
  1622.  
  1623. <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>
  1624. </div>
  1625.  
  1626. <!---------------------------twitter section--------------------------->
  1627.  
  1628. <div class="box">
  1629.  
  1630. <div class="twitterinfo">
  1631. <img src="http://placehold.it/180">
  1632.  
  1633. <h2>name
  1634. <span>@username</span></h2>
  1635.  
  1636. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1637.  
  1638. <ul class="stats">
  1639. <li class="what">what</li>
  1640. <li class="location">place</li>
  1641. <li class="joined">Joined Month 20XX</li>
  1642. <li class="born">Born on Month 00, 19XX</li>
  1643. </ul>
  1644. </div>
  1645.  
  1646. <div class="feed">
  1647.  
  1648. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1649.  
  1650. <ul>
  1651. <li><b>name</b> <i>@username</i><br>
  1652. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1653.  
  1654. <li><b>name</b> <i>@username</i><br>
  1655. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1656.  
  1657. <li><b>name</b> <i>@username</i><br>
  1658. Chicharrones williamsburg venmo craft beer.</li>
  1659.  
  1660. <li><b>name</b> <i>@username</i><br>
  1661. Authentic franzen actually chillwave fashion axe godard.</li>
  1662.  
  1663. <li><b>name</b> <i>@username</i><br>
  1664. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1665. </ul>
  1666. </div>
  1667.  
  1668. </div>
  1669.  
  1670. <!--------------------------instagram section-------------------------->
  1671.  
  1672. <div class="instagram box">
  1673. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1674. <img src="http://placehold.it/210">
  1675. <img src="http://placehold.it/210">
  1676. <img src="http://placehold.it/210">
  1677. <img src="http://placehold.it/210">
  1678. <img src="http://placehold.it/210">
  1679. <img src="http://placehold.it/210">
  1680. </div>
  1681. <!-------------------------navigation section------------------------->
  1682.  
  1683. <div class="links box">
  1684. <div class="linkgroup">
  1685. <h2>the first</h2>
  1686. <a href="/">nerves</a>
  1687. <a href="/">rawks</a>
  1688. <a href="/">y.a.l.a</a>
  1689. <a href="/">so fast, so maybe</a>
  1690. </div>
  1691.  
  1692.  
  1693. <div class="linkgroup">
  1694. <h2>the second</h2>
  1695. <a href="/">no duh</a>
  1696. <a href="/">braveheart</a>
  1697. <a href="/">heaven knows</a>
  1698. <a href="/">hear the bells</a>
  1699. </div>
  1700.  
  1701.  
  1702. <div class="linkgroup">
  1703. <h2>the third</h2>
  1704. <a href="/">90s music</a>
  1705. <a href="/">cynics & critics</a>
  1706. <a href="/">enemy fire</a>
  1707. <a href="/">u don't know</a>
  1708. </div>
  1709. </div>
  1710.  
  1711. </div>
  1712.  
  1713. <!---------------------------END CHARACTER--------------------------->
  1714.  
  1715. <!--------------------------BEGIN CHARACTER-------------------------->
  1716.  
  1717. <div class="grid-item thing thing thing">
  1718.  
  1719. <!--small/before click section-->
  1720.  
  1721. <div class="intro">
  1722. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1723. <div class="expand">
  1724. <div class="name">CHARACTER NAME
  1725. <div class="etc">subtitle
  1726. </div>
  1727. </div>
  1728. </div>
  1729. </div>
  1730.  
  1731. <!--expanded/after click section-->
  1732.  
  1733. <div class="header">
  1734. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1735. </div>
  1736.  
  1737. <h1>CHARACTER NAME</h1>
  1738.  
  1739. <div class="bio">
  1740. <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>
  1741.  
  1742.  
  1743. <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>
  1744. </div>
  1745.  
  1746. <!---------------------------twitter section--------------------------->
  1747.  
  1748. <div class="box">
  1749.  
  1750. <div class="twitterinfo">
  1751. <img src="http://placehold.it/180">
  1752.  
  1753. <h2>name
  1754. <span>@username</span></h2>
  1755.  
  1756. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1757.  
  1758. <ul class="stats">
  1759. <li class="what">what</li>
  1760. <li class="location">place</li>
  1761. <li class="joined">Joined Month 20XX</li>
  1762. <li class="born">Born on Month 00, 19XX</li>
  1763. </ul>
  1764. </div>
  1765.  
  1766. <div class="feed">
  1767.  
  1768. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1769.  
  1770. <ul>
  1771. <li><b>name</b> <i>@username</i><br>
  1772. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1773.  
  1774. <li><b>name</b> <i>@username</i><br>
  1775. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1776.  
  1777. <li><b>name</b> <i>@username</i><br>
  1778. Chicharrones williamsburg venmo craft beer.</li>
  1779.  
  1780. <li><b>name</b> <i>@username</i><br>
  1781. Authentic franzen actually chillwave fashion axe godard.</li>
  1782.  
  1783. <li><b>name</b> <i>@username</i><br>
  1784. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1785. </ul>
  1786. </div>
  1787.  
  1788. </div>
  1789.  
  1790. <!--------------------------instagram section-------------------------->
  1791.  
  1792. <div class="instagram box">
  1793. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1794. <img src="http://placehold.it/210">
  1795. <img src="http://placehold.it/210">
  1796. <img src="http://placehold.it/210">
  1797. <img src="http://placehold.it/210">
  1798. <img src="http://placehold.it/210">
  1799. <img src="http://placehold.it/210">
  1800. </div>
  1801. <!-------------------------navigation section------------------------->
  1802.  
  1803. <div class="links box">
  1804. <div class="linkgroup">
  1805. <h2>the first</h2>
  1806. <a href="/">nerves</a>
  1807. <a href="/">rawks</a>
  1808. <a href="/">y.a.l.a</a>
  1809. <a href="/">so fast, so maybe</a>
  1810. </div>
  1811.  
  1812.  
  1813. <div class="linkgroup">
  1814. <h2>the second</h2>
  1815. <a href="/">no duh</a>
  1816. <a href="/">braveheart</a>
  1817. <a href="/">heaven knows</a>
  1818. <a href="/">hear the bells</a>
  1819. </div>
  1820.  
  1821.  
  1822. <div class="linkgroup">
  1823. <h2>the third</h2>
  1824. <a href="/">90s music</a>
  1825. <a href="/">cynics & critics</a>
  1826. <a href="/">enemy fire</a>
  1827. <a href="/">u don't know</a>
  1828. </div>
  1829. </div>
  1830.  
  1831. </div>
  1832.  
  1833. <!---------------------------END CHARACTER--------------------------->
  1834.  
  1835. <!--------------------------BEGIN CHARACTER-------------------------->
  1836.  
  1837. <div class="grid-item thing thing thing">
  1838.  
  1839. <!--small/before click section-->
  1840.  
  1841. <div class="intro">
  1842. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1843. <div class="expand">
  1844. <div class="name">CHARACTER NAME
  1845. <div class="etc">subtitle
  1846. </div>
  1847. </div>
  1848. </div>
  1849. </div>
  1850.  
  1851. <!--expanded/after click section-->
  1852.  
  1853. <div class="header">
  1854. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1855. </div>
  1856.  
  1857. <h1>CHARACTER NAME</h1>
  1858.  
  1859. <div class="bio">
  1860. <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>
  1861.  
  1862.  
  1863. <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>
  1864. </div>
  1865.  
  1866. <!---------------------------twitter section--------------------------->
  1867.  
  1868. <div class="box">
  1869.  
  1870. <div class="twitterinfo">
  1871. <img src="http://placehold.it/180">
  1872.  
  1873. <h2>name
  1874. <span>@username</span></h2>
  1875.  
  1876. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1877.  
  1878. <ul class="stats">
  1879. <li class="what">what</li>
  1880. <li class="location">place</li>
  1881. <li class="joined">Joined Month 20XX</li>
  1882. <li class="born">Born on Month 00, 19XX</li>
  1883. </ul>
  1884. </div>
  1885.  
  1886. <div class="feed">
  1887.  
  1888. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  1889.  
  1890. <ul>
  1891. <li><b>name</b> <i>@username</i><br>
  1892. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  1893.  
  1894. <li><b>name</b> <i>@username</i><br>
  1895. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  1896.  
  1897. <li><b>name</b> <i>@username</i><br>
  1898. Chicharrones williamsburg venmo craft beer.</li>
  1899.  
  1900. <li><b>name</b> <i>@username</i><br>
  1901. Authentic franzen actually chillwave fashion axe godard.</li>
  1902.  
  1903. <li><b>name</b> <i>@username</i><br>
  1904. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  1905. </ul>
  1906. </div>
  1907.  
  1908. </div>
  1909.  
  1910. <!--------------------------instagram section-------------------------->
  1911.  
  1912. <div class="instagram box">
  1913. <h2>@instaname <span>— some cool bio thing here</span></h2>
  1914. <img src="http://placehold.it/210">
  1915. <img src="http://placehold.it/210">
  1916. <img src="http://placehold.it/210">
  1917. <img src="http://placehold.it/210">
  1918. <img src="http://placehold.it/210">
  1919. <img src="http://placehold.it/210">
  1920. </div>
  1921. <!-------------------------navigation section------------------------->
  1922.  
  1923. <div class="links box">
  1924. <div class="linkgroup">
  1925. <h2>the first</h2>
  1926. <a href="/">nerves</a>
  1927. <a href="/">rawks</a>
  1928. <a href="/">y.a.l.a</a>
  1929. <a href="/">so fast, so maybe</a>
  1930. </div>
  1931.  
  1932.  
  1933. <div class="linkgroup">
  1934. <h2>the second</h2>
  1935. <a href="/">no duh</a>
  1936. <a href="/">braveheart</a>
  1937. <a href="/">heaven knows</a>
  1938. <a href="/">hear the bells</a>
  1939. </div>
  1940.  
  1941.  
  1942. <div class="linkgroup">
  1943. <h2>the third</h2>
  1944. <a href="/">90s music</a>
  1945. <a href="/">cynics & critics</a>
  1946. <a href="/">enemy fire</a>
  1947. <a href="/">u don't know</a>
  1948. </div>
  1949. </div>
  1950.  
  1951. </div>
  1952.  
  1953. <!---------------------------END CHARACTER--------------------------->
  1954.  
  1955. <!--------------------------BEGIN CHARACTER-------------------------->
  1956.  
  1957. <div class="grid-item thing thing thing">
  1958.  
  1959. <!--small/before click section-->
  1960.  
  1961. <div class="intro">
  1962. <img src="http://placehold.it/340x240"> <!--340x240 image-->
  1963. <div class="expand">
  1964. <div class="name">CHARACTER NAME
  1965. <div class="etc">subtitle
  1966. </div>
  1967. </div>
  1968. </div>
  1969. </div>
  1970.  
  1971. <!--expanded/after click section-->
  1972.  
  1973. <div class="header">
  1974. <img src="http://placehold.it/660x240"> <!--660x240 image-->
  1975. </div>
  1976.  
  1977. <h1>CHARACTER NAME</h1>
  1978.  
  1979. <div class="bio">
  1980. <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>
  1981.  
  1982.  
  1983. <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>
  1984. </div>
  1985.  
  1986. <!---------------------------twitter section--------------------------->
  1987.  
  1988. <div class="box">
  1989.  
  1990. <div class="twitterinfo">
  1991. <img src="http://placehold.it/180">
  1992.  
  1993. <h2>name
  1994. <span>@username</span></h2>
  1995.  
  1996. <p>Meditation 8-bit et cornhole irony. Banjo fanny pack pickled duis. Farm-to-table delectus messenger bag, neutra everyday carry nisi. <a href="http://bit.ly/98K8eH">bit.ly/98K8eH</a></p>
  1997.  
  1998. <ul class="stats">
  1999. <li class="what">what</li>
  2000. <li class="location">place</li>
  2001. <li class="joined">Joined Month 20XX</li>
  2002. <li class="born">Born on Month 00, 19XX</li>
  2003. </ul>
  2004. </div>
  2005.  
  2006. <div class="feed">
  2007.  
  2008. <!--- TIP: put <span> around words in the section below to change the color of the words. it makes a faux hashtag, link or @ -->
  2009.  
  2010. <ul>
  2011. <li><b>name</b> <i>@username</i><br>
  2012. Lo-fi wayfarers magna elit, forage umami <span>@gastropub</span> sed cardigan tousled ugh helvetica post-ironic.</li>
  2013.  
  2014. <li><b>name</b> <i>@username</i><br>
  2015. Ut magna williamsburg, knausgaard pug truffaut sapiente gastropub ennui quis <span>#actually</span> small batch literally id gentrify.</li>
  2016.  
  2017. <li><b>name</b> <i>@username</i><br>
  2018. Chicharrones williamsburg venmo craft beer.</li>
  2019.  
  2020. <li><b>name</b> <i>@username</i><br>
  2021. Authentic franzen actually chillwave fashion axe godard.</li>
  2022.  
  2023. <li><b>name</b> <i>@username</i><br>
  2024. Drinking vinegar consectetur enim aliquip, fugiat et actually four loko. Beard enim whatever pug eiusmod, ea vegan.</li>
  2025. </ul>
  2026. </div>
  2027.  
  2028. </div>
  2029.  
  2030. <!--------------------------instagram section-------------------------->
  2031.  
  2032. <div class="instagram box">
  2033. <h2>@instaname <span>— some cool bio thing here</span></h2>
  2034. <img src="http://placehold.it/210">
  2035. <img src="http://placehold.it/210">
  2036. <img src="http://placehold.it/210">
  2037. <img src="http://placehold.it/210">
  2038. <img src="http://placehold.it/210">
  2039. <img src="http://placehold.it/210">
  2040. </div>
  2041. <!-------------------------navigation section------------------------->
  2042.  
  2043. <div class="links box">
  2044. <div class="linkgroup">
  2045. <h2>the first</h2>
  2046. <a href="/">nerves</a>
  2047. <a href="/">rawks</a>
  2048. <a href="/">y.a.l.a</a>
  2049. <a href="/">so fast, so maybe</a>
  2050. </div>
  2051.  
  2052.  
  2053. <div class="linkgroup">
  2054. <h2>the second</h2>
  2055. <a href="/">no duh</a>
  2056. <a href="/">braveheart</a>
  2057. <a href="/">heaven knows</a>
  2058. <a href="/">hear the bells</a>
  2059. </div>
  2060.  
  2061.  
  2062. <div class="linkgroup">
  2063. <h2>the third</h2>
  2064. <a href="/">90s music</a>
  2065. <a href="/">cynics & critics</a>
  2066. <a href="/">enemy fire</a>
  2067. <a href="/">u don't know</a>
  2068. </div>
  2069. </div>
  2070.  
  2071. </div>
  2072.  
  2073. <!---------------------------END CHARACTER--------------------------->
  2074.  
  2075.  
  2076. </div><!--end container-->
  2077.  
  2078. <!-- SCM Music Player http://scmplayer.net
  2079.  
  2080. adding songs is pretty simple.
  2081. 1) make sure you keep those '''' marks in there!
  2082. 2) replace THE SONG TITLE with your song titles
  2083. 3) replace THE SONG URL with your song urls.
  2084. you can pull them straight from youtube -->
  2085.  
  2086. <script type="text/javascript" src="http://scmplayer.net/script.js"
  2087. data-config="{'skin':'http://static.tumblr.com/nezs2gh/lFOo4ewv8/musicplayer.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[
  2088. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2089. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2090. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2091. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2092. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2093. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2094. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2095. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2096. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2097. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2098. {'title':'THE SONG TITLE','url':'THE SONG URL'},
  2099. {'title':'THE SONG TITLE','url':'THE SONG URL'}]}" ></script>
  2100.  
  2101. </body>
  2102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!