API tools faq
paste
Advertisement
Guest User

character page

a guest
Dec 6th, 2019
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.61 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME 10 [BOUSSOLE] by saisei-themes @ tumblr
  4.  
  5. - do not repost
  6. - do not claim as your own
  7. - do not use as base
  8. - enjoy !
  9.  
  10. -->
  11.  
  12.  
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16. <head>
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  19.  
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  29.  
  30. <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
  31.  
  32. <script src="https://use.fontawesome.com/257106a2c1.js"></script>
  33.  
  34. <script>
  35. $(document).ready(function() {
  36. var $container = $('.grid').isotope({
  37. itemSelector: '.grid-item',
  38. masonry: {
  39. columnWidth: 100
  40. }
  41. });
  42.  
  43. $('.btn').click(function () {
  44. $(this) // wrap this, it always refers to the clicked event element
  45. .parents('.grid-item')// find parent grid item
  46. .find('.drop, .drop2, .drop3') // find adjacent drop
  47. .toggle('slow'); // only toggle that one element
  48.  
  49. });
  50.  
  51. $('.btn').click(function () {
  52. $(this)
  53. .parents('.one')
  54. .find('.grid-item')
  55. .toggleClass('fullsize');
  56. $container.isotope('layout');
  57. });
  58.  
  59. });
  60. </script>
  61.  
  62. <style type="text/css">
  63.  
  64. /* POPUP BOXES */
  65.  
  66. .popup_block{
  67. display:none;
  68. background:{color:posts};
  69. padding:20px;
  70. border:5px solid {color:accent};
  71. outline: 1px solid {color:border};
  72. float:left;
  73. position:fixed;
  74. top:50%;left:50%;
  75. z-index: 99999;
  76. font-size: {text:font size}px;
  77. }
  78.  
  79. *html #fade {position: absolute;}
  80. *html .popup_block {position: absolute;}
  81. #fade {
  82. display:none;
  83. position:fixed;
  84. left:0px;
  85. top:0px;
  86. width:100%;
  87. height:100%;
  88. z-index:9999;
  89. background:#000; /* change to #fff for solid white */
  90. opacity:0.2; /* change to opacity:1; */
  91. }
  92.  
  93. #popheading {
  94. font-size: 35px;
  95. font-family: 'radiometry';
  96. color: {color:border};
  97. border-bottom: 1px solid {color:border2};
  98. padding-bottom: 5px;
  99. padding-top: 5px;
  100. margin-bottom: 10px;
  101. }
  102.  
  103. /* CUSTOM FONT */
  104.  
  105. @font-face { font-family: "silkscreen"; src: url('https://dl.dropboxusercontent.com/s/4bj79wi75v77m0r/slkscr.ttf?dl=1'); format(“truetype”);}
  106.  
  107. @font-face { font-family: "bebas_neue"; src: url('https://dl.dropboxusercontent.com/s/scbj3da4dz3dfmf/bebasneue.otf?dl=1'); format(“truetype”);}
  108.  
  109. .dc::-webkit-scrollbar{ width: 5px; }
  110.  
  111. .dc::-webkit-scrollbar-thumb{ background-color: #e6e6e6;}
  112.  
  113. .dc::-webkit-scrollbar-track { background-color: #f6f6f6;}
  114.  
  115.  
  116. /* TEXT STUFF */
  117.  
  118. h1, h2 {
  119. font-size: 25px;
  120. font-family: 'radiometry';
  121. }
  122.  
  123. small, sup, sub {
  124. font-size: {text:font size}px;
  125. }
  126.  
  127. a {
  128. text-decoration: none;
  129. color: #f2b598;
  130. -webkit-transition: all .8s ease-in-out;
  131. -moz-transition: all .8s ease-in-out;
  132. -o-transition: all .8s ease-in-out;
  133. transition: all .8s ease-in-out;
  134. font-style: bold;
  135. }
  136.  
  137. a:hover {
  138. color: #cfcfcf;
  139. -webkit-transition: all .8s ease-in-out;
  140. -moz-transition: all .8s ease-in-out;
  141. -o-transition: all .8s ease-in-out;
  142. transition: all .8s ease-in-out;
  143. }
  144.  
  145. b, strong {
  146. color: #919191;
  147. }
  148.  
  149. i, em {
  150. color: #cfcfcf;
  151. }
  152.  
  153. /* BODY */
  154.  
  155. body {
  156. background: url('http://i.imgur.com/fzhm3tM.png');
  157. margin: 0px;
  158. padding: 0px;
  159. color: {color:text};
  160. font-family: quicksand;
  161. font-size: 13px;
  162. overflow-y: scroll;
  163. overflow-x: hidden;
  164. font-size: {text:font size}px;
  165. -webkit-font-smoothing:antialiased;
  166. }
  167.  
  168. /* GRID */
  169.  
  170. .grid {
  171. margin-left: auto;
  172. margin-right: auto;
  173. margin-top: 50px;
  174. margin-bottom: 50px;
  175. width: 600px;
  176. height: 100%;
  177. }
  178.  
  179. .grid:after {
  180. display: inline-block;
  181. clear: both;
  182. content: '';
  183. }
  184.  
  185. .grid-item {
  186. float: left;
  187. margin: 10px;
  188. width: 150px;
  189. height: 150px;
  190. font-size: 10px;
  191. }
  192.  
  193. .grid-item img {
  194. height: 100px;
  195. width: 100px;
  196. }
  197.  
  198. .grid-item.fullsize {
  199. float: left;
  200. height: 350px;
  201. position: relative;
  202. }
  203.  
  204. /* PAGE HEADER */
  205.  
  206. #top {
  207. position: relative;
  208. background: #f2b598;
  209. color: #fff;
  210. width: 100%;
  211. padding: 5px;
  212. font-size: 30px;
  213. top: 0px;
  214. text-align: center;
  215. border-bottom: 2px solid #b78a8a;
  216. letter-spacing: 2px;
  217. font-family:'bebas_neue';
  218. text-shadow: 0px 1px 2px #aa8383;
  219. }
  220.  
  221. /* ROW */
  222.  
  223. .one {
  224. width: 500px;
  225. }
  226.  
  227. /* ICONS */
  228.  
  229. .icon {
  230. position: absolute;
  231. top: 0;
  232. right: 0;
  233. border: 5px solid #fff;
  234. height: 100px;
  235. width: 100px;
  236. outline: 1px solid #e6e6e6;
  237. }
  238.  
  239. /* NAME BUTTON */
  240.  
  241. .btn {
  242. background-color: #f2b598;
  243. color:#fff;
  244. font-size: 8px;
  245. font-family: 'silkscreen';
  246. margin-top: 115px;
  247. padding:3px;
  248. margin-left: 40px;
  249. border: none;
  250. text-align: left;
  251. width: 110px;
  252. -webkit-font-smoothing: none;
  253. border-bottom: 1px solid #b78a8a;
  254. }
  255.  
  256. .btn:after {
  257. position: absolute;
  258. right: 0;
  259. top: 118px;
  260. padding: 0 5px;
  261. content: "+";
  262. font-weight: 100;
  263. }
  264.  
  265. .btn:focus {
  266. outline: 0;
  267. }
  268.  
  269. /* BOXES */
  270.  
  271. .drop {
  272. background-color: #fff;
  273. height: 200px;
  274. width: 488px;
  275. position: absolute;
  276. margin-top: 10px;
  277. color: #919191;
  278. display:none;
  279. text-align: justify;
  280. margin-left: 40px;
  281. padding: 10px;
  282. border: 1px solid #e6e6e6;
  283. letter-spacing: .5px;
  284. z-index: 9999;
  285. }
  286.  
  287. .drop2 {
  288. background-color: #fff;
  289. height: 200px;
  290. width: 488px;
  291. position: absolute;
  292. margin-top: 10px;
  293. color: #919191;
  294. display:none;
  295. text-align: justify;
  296. margin-left: -160px;
  297. padding: 10px;
  298. border: 1px solid #e6e6e6;
  299. z-index: 9999;
  300. }
  301.  
  302. .drop3 {
  303. background-color: #fff;
  304. height: 200px;
  305. width: 488px;
  306. position: absolute;
  307. margin-top: 10px;
  308. color: #919191;
  309. display:none;
  310. text-align: justify;
  311. margin-left: -360px;
  312. padding: 10px;
  313. border: 1px solid #e6e6e6;
  314. z-index: 9999;
  315. }
  316.  
  317. .dc {
  318. width: 465px;
  319. height: 155px;
  320. overflow-y: scroll;
  321. padding: 10px;
  322. position: absolute;
  323. font-size: 11px;
  324. margin-top: 5px;
  325. }
  326.  
  327. /* BOX HEADER */
  328.  
  329. #boxtop {
  330. width: 100%;
  331. margin: -10px -10px 0px -10px;
  332. text-transform: uppercase;
  333. font-size: 15px;
  334. }
  335.  
  336. #header {
  337. font-family: 'bebas_neue';
  338. color: #fff;
  339. position: relative;
  340. letter-spacing: 1px;
  341. background: #f2b598;
  342. padding: 5px;
  343. width: 48%;
  344. text-transform: capitalize;
  345. display: inline-block;
  346. }
  347.  
  348. #subtitle {
  349. font-family: 'bebas_neue';
  350. color: #919191;
  351. position: relative;
  352. letter-spacing: 1px;
  353. border-bottom: 1px solid #e6e6e6;
  354. padding: 5px 9px 4px 10px;
  355. float: right;
  356. width: 50%;
  357. text-transform: uppercase;
  358. display: inline-block;
  359. margin-right: -20px;
  360. text-align: left;
  361. }
  362.  
  363. /* INFO SECTION */
  364.  
  365. .basic {
  366. width: 100%;
  367. margin-top: -10px;
  368. }
  369.  
  370. .info {
  371. width: 50%;
  372. display: inline-block;
  373. }
  374.  
  375. .info li {
  376. border-bottom: 1px solid #e6e6e6;
  377. list-style-type: none;
  378. padding:3px 0px 3px 0px;
  379. }
  380.  
  381. .info li:before {
  382. font-family: 'FontAwesome';
  383. content:"\f101";
  384. padding-right: 4px;
  385. }
  386.  
  387. /* LINKS */
  388.  
  389. .links {
  390. width: 45%;
  391. float:right;
  392. display: inline-block;
  393. margin-left: 10px;
  394. padding-top: 5px;
  395. }
  396.  
  397. .links a, .links i {
  398. display: inline-block;
  399. font-size: 10px;
  400. padding: 3px 0px 3px 0px;
  401. }
  402.  
  403. .links i {
  404. padding-right: 7px;
  405. color: #919191;
  406. }
  407.  
  408.  
  409. /* CREDIT - DO NOT DELETE */
  410.  
  411. #cred {
  412. background-color: #f2b598;
  413. font-family: 'bebas neue';
  414. font-size: 10px;
  415. color: #fff;
  416. padding: 5px 6px 5px 6px;
  417. width: 15px;
  418. border: 2px solid #fff;
  419. outline: 1px solid #f2b598;
  420. float:bottom;
  421. top: 95%;
  422. left: 10px;
  423. position: fixed;
  424. }
  425.  
  426. #cred a {
  427. color: #fff;
  428. font-size: 12px;
  429. letter-spacing: 3px;
  430. }
  431.  
  432. </style></head>
  433.  
  434. <body>
  435. <div id="top">SIMS</div>
  436.  
  437. <div class="grid">
  438.  
  439. <!--BEGIN FIRST ROW -->
  440.  
  441. <!-- FIRST MUSE -->
  442.  
  443. <div class="one">
  444. <div class="grid-item">
  445. <div class="icon"><img src="https://i.imgur.com/EzKxw7K.jpgg"></div>
  446. <button class="btn">ABRAHAM</button>
  447.  
  448. <div class="drop">
  449.  
  450. <div id="boxtop">
  451. <div id="header">ABRAHAM SAUNDERS</div><div id="subtitle">ABE</div></div>
  452.  
  453. <div class="dc">
  454.  
  455. <div class="basic">
  456. <div class="info">
  457.  
  458. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  459.  
  460. <li><b>aka:</b> THE NERDY DAD</li>
  461. <li><b>gender:</b> MALE</li>
  462. <li><b>age:</b> 40</li>
  463. </div>
  464.  
  465. <!-- LINK SECTION -->
  466.  
  467. <div class="links">
  468. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Clumsy, Loner, Bookworm</a>
  469. <br>
  470. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> Married to Trevor</a>
  471. <br>
  472. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">Writer</a></div>
  473. </div>
  474.  
  475. <!-- BIOGRAPHY/INFO SECTION -->
  476.  
  477. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  478.  
  479. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  480.  
  481. </div>
  482. </div>
  483. </div>
  484.  
  485. <!-- SECOND MUSE -->
  486.  
  487. <div class="grid-item">
  488. <div class="icon"><img src="https://i.imgur.com/N8aPzo6.jpgg"></div>
  489. <button class="btn">TREVOR</button>
  490.  
  491. <div class="drop2">
  492.  
  493. <div id="boxtop">
  494. <div id="header">TREVOR SCHMIDT</div><div id="subtitle">Trev</div></div>
  495.  
  496. <div class="dc">
  497.  
  498. <div class="basic">
  499. <div class="info">
  500.  
  501. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  502.  
  503. <li><b>aka:</b> TOUGH DAD</li>
  504. <li><b>gender:</b> MALE</li>
  505. <li><b>age:</b> 42</li>
  506. </div>
  507.  
  508. <!-- LINK SECTION -->
  509.  
  510. <div class="links">
  511. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Glutton, Creative, Self-Assured</a></a>
  512. <br>
  513. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> Married to Abraham</a>
  514. <br>
  515. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">Senior Detective</a></div>
  516. </div>
  517. <!-- BIOGRAPHY/INFO SECTION -->
  518.  
  519. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  520.  
  521. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  522.  
  523. </div>
  524. </div>
  525. </div>
  526.  
  527. <!--THIRD MUSE -->
  528.  
  529. <div class="grid-item">
  530. <div class="icon"><img src="https://i.imgur.com/PW26lZC.giff"></div>
  531. <button class="btn">DANVER</button>
  532.  
  533. <div class="drop3">
  534.  
  535. <div id="boxtop">
  536. <div id="header">DANVER SAUNDERS-SCHMIDT</div><div id="subtitle">PURPLE BOI</div></div>
  537.  
  538. <div class="dc">
  539.  
  540. <div class="basic">
  541. <div class="info">
  542.  
  543. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  544.  
  545. <li><b>aka:</b> THE PURPLE BOI</li>
  546. <li><b>gender:</b> MALE</li>
  547. <li><b>age:</b> 19</li>
  548. </div>
  549.  
  550. <!-- LINK SECTION -->
  551.  
  552. <div class="links">
  553. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Geek, Genius, Dance Machine</a></a>
  554. <br>
  555. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> dating Caleb Vatore</a>
  556. <br>
  557. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">Programming Student at Britechester</a></div>
  558. </div>
  559.  
  560. <!-- BIOGRAPHY/INFO SECTION -->
  561.  
  562. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  563.  
  564. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  565.  
  566. </div>
  567. </div>
  568. </div>
  569.  
  570. </div>
  571.  
  572. <!-- END FIRST ROW -->
  573.  
  574.  
  575. <!-- BEGIN SECOND ROW -->
  576.  
  577. <!-- FOURTH MUSE -->
  578.  
  579. <div class="one">
  580. <div class="grid-item">
  581. <div class="icon"><img src="https://i.imgur.com/1BPq69P.jpg"></div>
  582. <button class="btn">MELODY</button>
  583. <div class="drop">
  584.  
  585. <div id="boxtop">
  586. <div id="header">MARIA MELODY SAUNDERS-SCHMIDT</div><div id="subtitle"></div></div>
  587.  
  588. <div class="dc">
  589.  
  590. <div class="basic">
  591. <div class="info">
  592.  
  593. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  594.  
  595. <li><b>aka:</b> THE GEEK CHIC</li>
  596. <li><b>gender:</b> FEMALE</li>
  597. <li><b>age:</b> 17</li>
  598. </div>
  599.  
  600. <!-- LINK SECTION -->
  601.  
  602. <div class="links">
  603. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Genius, Music Lover</a></a>
  604. <br>
  605. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> none</a>
  606. <br>
  607. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">High School Student, Milktea Barista</a></div>
  608. </div>
  609.  
  610. <!-- BIOGRAPHY/INFO SECTION -->
  611.  
  612. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  613.  
  614. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  615.  
  616. </div>
  617. </div>
  618. </div>
  619.  
  620. <!-- FIFTH MUSE -->
  621.  
  622. <div class="grid-item">
  623. <div class="icon"><img src="https://i.imgur.com/lrp5WDT.jpg"></div>
  624. <button class="btn">AMBER</button>
  625. <div class="drop2">
  626.  
  627. <div id="boxtop">
  628. <div id="header">AMBER WREN SAUNDERS-SCHMIDT</div><div id="subtitle"></div></div>
  629.  
  630. <div class="dc">
  631.  
  632. <div class="basic">
  633. <div class="info">
  634.  
  635. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  636.  
  637. <li><b>aka:</b> LITTLE MISS CHIEF</li>
  638. <li><b>gender:</b> FEMALE</li>
  639. <li><b>age:</b> 11</li>
  640. </div>
  641.  
  642. <!-- LINK SECTION -->
  643.  
  644. <div class="links">
  645. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Kleptomaniac</a></a></a>
  646. <br>
  647. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> none</a>
  648. <br>
  649. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">Grade School Student, Stage Designer</a></div>
  650. </div>
  651.  
  652. <!-- BIOGRAPHY/INFO SECTION -->
  653.  
  654. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  655.  
  656. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  657.  
  658. </div>
  659. </div>
  660. </div>
  661.  
  662. <!-- SIXTH MUSE -->
  663.  
  664. <div class="grid-item">
  665. <div class="icon"><img src="https://i.imgur.com/sextNxp.jpg"></div>
  666. <button class="btn">TOPHER</button>
  667. <div class="drop3">
  668.  
  669. <div id="boxtop">
  670. <div id="header">KRISTOPHER SCHMIDT</div><div id="subtitle">Topher</div></div>
  671.  
  672. <div class="dc">
  673.  
  674. <div class="basic">
  675. <div class="info">
  676.  
  677. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  678.  
  679. <li><b>origin:</b> INDEPENDENT BABY</li>
  680. <li><b>gender:</b> MALE</li>
  681. <li><b>age:</b> 5</li>
  682. </div>
  683.  
  684. <!-- LINK SECTION -->
  685.  
  686. <<div class="links">
  687. <i class="fa fa-user" aria-hidden="true"></i><a href="surprisepeach.tumblr.com/tagged/abraham">Independent</a></a></a>
  688. <br>
  689. <i class="fa fa-heart" aria-hidden="true"></i><a href=""> none</a>
  690. <br>
  691. <i class="fa fa-briefcase" aria-hidden="true"></i><a href="LINK URL">Pre-School</a></div>
  692. </div>
  693.  
  694. <!-- BIOGRAPHY/INFO SECTION -->
  695.  
  696. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  697.  
  698. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  699.  
  700. </div>
  701. </div>
  702. </div>
  703. </div>
  704.  
  705. <!-- END ROW 2 -->
  706.  
  707.  
  708. <!-- BEGIN ROW 3 -->
  709.  
  710. <!-- SEVENTH MUSE -->
  711.  
  712. <div class="one">
  713. <div class="grid-item">
  714. <div class="icon"><img src="https://i.imgur.com/KQXNIwM.png"></div>
  715. <button class="btn">MUSE NAME</button>
  716. <div class="drop">
  717.  
  718. <div id="boxtop">
  719. <div id="header">MUSE FULL NAME</div><div id="subtitle">ALIAS, NICKNAME, TITLE</div></div>
  720.  
  721. <div class="dc">
  722.  
  723. <div class="basic">
  724. <div class="info">
  725.  
  726. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  727.  
  728. <li><b>origin:</b> ORIGIN</li>
  729. <li><b>gender:</b> GENDER</li>
  730. <li><b>age:</b> AGE</li>
  731. </div>
  732.  
  733. <!-- LINK SECTION -->
  734.  
  735. <div class="links">
  736. <i class="fa fa-tag" aria-hidden="true"></i><a href="LINK URL">CHARACTER TAG</a>
  737. <br>
  738. <i class="fa fa-heart" aria-hidden="true"></i><a href="LINK URL">RELATIONSHIPS</a>
  739. <br>
  740. <i class="fa fa-user" aria-hidden="true"></i><a href="LINK URL">FACE TAG</a></div>
  741. </div>
  742.  
  743. <!-- BIOGRAPHY/INFO SECTION -->
  744.  
  745. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  746.  
  747. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  748.  
  749. </div>
  750. </div>
  751. </div>
  752.  
  753. <!-- EIGHTH MUSE -->
  754.  
  755. <div class="grid-item">
  756. <div class="icon"><img src="https://i.imgur.com/KQXNIwM.png"></div>
  757. <button class="btn">MUSE NAME</button>
  758. <div class="drop2">
  759.  
  760. <div id="boxtop">
  761. <div id="header">MUSE FULL NAME</div><div id="subtitle">ALIAS, NICKNAME, TITLE</div></div>
  762.  
  763. <div class="dc">
  764.  
  765. <div class="basic">
  766. <div class="info">
  767.  
  768. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  769.  
  770. <li><b>origin:</b> ORIGIN</li>
  771. <li><b>gender:</b> GENDER</li>
  772. <li><b>age:</b> AGE</li>
  773. </div>
  774.  
  775. <!-- LINK SECTION -->
  776.  
  777. <div class="links">
  778. <i class="fa fa-tag" aria-hidden="true"></i><a href="LINK URL">CHARACTER TAG</a>
  779. <br>
  780. <i class="fa fa-heart" aria-hidden="true"></i><a href="LINK URL">RELATIONSHIPS</a>
  781. <br>
  782. <i class="fa fa-user" aria-hidden="true"></i><a href="LINK URL">FACE TAG</a></div>
  783. </div>
  784.  
  785. <!-- BIOGRAPHY/INFO SECTION -->
  786.  
  787. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  788.  
  789. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  790.  
  791. </div>
  792. </div>
  793. </div>
  794.  
  795. <!-- NINTH MUSE -->
  796.  
  797. <div class="grid-item">
  798. <div class="icon"><img src="https://i.imgur.com/KQXNIwM.png"></div>
  799. <button class="btn">RIN</button>
  800. <div class="drop3">
  801.  
  802. <div id="boxtop">
  803. <div id="header">MUSE FULL NAME</div><div id="subtitle">ALIAS, NICKNAME, TITLE</div></div>
  804.  
  805. <div class="dc">
  806.  
  807. <div class="basic">
  808. <div class="info">
  809.  
  810. <!-- WRITE BASIC INFO HERE, EACH LINE BETWEEN <li></li> TAGS. -->
  811.  
  812. <li><b>origin:</b> ORIGIN</li>
  813. <li><b>gender:</b> GENDER</li>
  814. <li><b>age:</b> AGE</li>
  815. </div>
  816.  
  817. <!-- LINK SECTION -->
  818.  
  819. <div class="links">
  820. <i class="fa fa-tag" aria-hidden="true"></i><a href="LINK URL">CHARACTER TAG</a>
  821. <br>
  822. <i class="fa fa-heart" aria-hidden="true"></i><a href="LINK URL">RELATIONSHIPS</a>
  823. <br>
  824. <i class="fa fa-user" aria-hidden="true"></i><a href="LINK URL">FACE TAG</a></div>
  825. </div>
  826.  
  827. <!-- BIOGRAPHY/INFO SECTION -->
  828.  
  829. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  830.  
  831. <p>Ut dapibus diam sed erat sodales, sit amet condimentum arcu facilisis. Suspendisse potenti. Aliquam imperdiet, est eu mollis viverra, ligula ex dignissim massa, nec pulvinar odio nunc eu mi. Curabitur lorem nulla, elementum at libero vel, aliquet varius est. Maecenas interdum vitae nisi sit amet mollis. Maecenas ultrices aliquam tincidunt. Fusce magna magna, efficitur eu magna id, ullamcorper scelerisque lectus. Aenean et purus eleifend, commodo turpis eu, accumsan metus.</p>
  832.  
  833. </div>
  834. </div>
  835. </div>
  836.  
  837. </div>
  838.  
  839. <!-- END ROW 3 -->
  840.  
  841. <!-- TO ADD ANOTHER ROW, COPY CONTENT FROM 'BEGIN ROW 3' TO 'END ROW 3' AND PASTE UNDERNEATH THIS LINE. -->
  842.  
  843.  
  844. </div>
  845.  
  846.  
  847. </body>
  848.  
  849. </body></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!