API tools faq
paste
txrpe

[10] BOUSSOLE

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