API tools faq
paste
dylanohelps

X.I - Alessio

dylanohelps
Mar 16th, 2016
1,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. X.I ALESSIO by DOMINICWRITES
  9.  
  10. Rules and Regulations:
  11. #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on it, so I'd appreciate if you didn't.
  12.  
  13. #2: DO NOT redistribute this theme/page, claiming it as your own design, nor shall you merge this with another theme and redistribute regardless of crediting the theme/page makers.
  14.  
  15. #3: You can customize to your liking!
  16.  
  17. #4: Please don't remove the credit. The more people like/reblog my stuff, the more motivated I'll be to create more.
  18.  
  19. Credits:
  20. All fonts - Google Fonts
  21. All images - Google Images
  22. All Javascript codes go to their respective creators.
  23.  
  24. FEATURES
  25. - Masonry coding for the 3 box sizes.
  26. - Smooth page scrolling
  27. - Four links
  28. - Header (840x200)
  29. - Box 1
  30. - Portrait (235x235)
  31. - Biography
  32. - 5 Default links
  33. - Stats Section
  34. - Box 2
  35. - Portrait (480x235)
  36. - Box 3
  37. - Portrait (235x480)
  38.  
  39.  
  40.  
  41. ---------------->
  42.  
  43. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  44. <head>
  45. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  46.  
  47. <title>{Title}</title>
  48.  
  49. <meta charset="utf-8">
  50.  
  51. <meta name="description" content="{MetaDescription}" />
  52.  
  53. <link rel="shortcut icon" href="{Favicon}" />
  54. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  55.  
  56. <!-- FONT SCRIPT CODES -->
  57.  
  58. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  59. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  60. <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
  61. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
  62.  
  63.  
  64. <!-- JAVASCRIPT CODES -->
  65.  
  66. <script type="text/javascript">
  67. $(function() {
  68. $('a[href*=#]:not([href=#])').click(function() {
  69. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  70. var target = $(this.hash);
  71. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  72. if (target.length) {
  73. $('html,body').animate({
  74. scrollTop: target.offset().top
  75. }, 1000);
  76. return false;
  77. }
  78. }
  79. });
  80. });
  81.  
  82. </script>
  83.  
  84.  
  85. <!-- JAVASCRIPT CODES -->
  86.  
  87. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  88. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  89.  
  90. <script type="text/javascript">
  91. $(function(){
  92. var $container = $('#boxes');
  93. $container.imagesLoaded(function(){
  94. $container.masonry({
  95. itemSelector: '.box',
  96. });
  97. });
  98. $container.infinitescroll({
  99. itemSelector : ".box",
  100. navSelector : "div.pagination",
  101. nextSelector : ".pagination a#next",
  102. loadingImg : "",
  103. loadingText : "<em></em>",
  104. bufferPx : 10000,
  105. extraScrollPx: 12000,
  106. },
  107. // trigger Masonry as a callback
  108. function( newElements ) {
  109. var $newElems = $( newElements ).css({ opacity: 0 });
  110. // ensure that images load before adding to masonry layout
  111. $newElems.imagesLoaded(function(){
  112. $newElems.animate({ opacity: 1 });
  113. $container.masonry( 'appended', $newElems, true );
  114. });
  115. }
  116. );
  117. });
  118. </script>
  119.  
  120.  
  121. </head>
  122. <style type="text/css">
  123. body {
  124. margin: 0px;
  125. padding: 0px;
  126. width: 100%;
  127. height: 100%;
  128. list-style: none;
  129. background-color: #FFFFFF;
  130. background-image:url('http://static.tumblr.com/kamm2qy/U12o4483q/crossword.png');
  131. font-family: 'Roboto', sans-serif;
  132. font-weight: 300;
  133. font-size: 10px;
  134. color: #877b76;
  135.  
  136.  
  137. }
  138.  
  139. a {
  140. text-decoration: none;
  141. color: #0195ab;
  142. }
  143.  
  144. b,i,strong,em {
  145. color: #cbd165;
  146. }
  147.  
  148. ::-webkit-scrollbar-thumb:vertical {
  149. background-color: #e1a5a3;
  150. height: 10px;
  151. }
  152. ::-webkit-scrollbar-thumb:horizontal {
  153. background-color: #e1a5a3;
  154. height: 7px!important;
  155. }
  156. ::-webkit-scrollbar {
  157. background-color: transparent;
  158. height: px;
  159. width: 0px;
  160. }
  161.  
  162. container {
  163. width: 100%;
  164. height: 100%;
  165. }
  166.  
  167. #books {
  168. width: 800px;
  169. height: auto;
  170. padding: 20px;
  171. margin-bottom: 80px;
  172. background-color: #FFFFFF;
  173. margin: auto;
  174. }
  175.  
  176. /* HEADER */
  177.  
  178. .header {
  179. display: table;
  180. width: 840px;
  181. height: 200px;
  182. margin-left: -20px;
  183. margin-top: -20px;
  184. background-color: #FFFFFF;
  185. background-size: cover;
  186. vertical-align: middle;
  187. display: block;
  188. text-align: center;
  189. }
  190.  
  191. .header .title {
  192. display: table-cell;
  193. vertical-align: middle;
  194. text-align: center;
  195. width: 840px;
  196. height: 200px;
  197. font-family: 'Playfair Display';
  198. font-size: 24px;
  199. color: #eeeeee;
  200. text-transform: uppercase;
  201. text-shadow: 0px 0px 3px #202020;
  202. }
  203.  
  204. .links {
  205. display: block;
  206. padding: 10px 0px;
  207. text-align: center;
  208. background-color: #FA6900;
  209. margin-left: -20px;
  210. width: 840px;
  211. }
  212.  
  213. .links a {
  214. font-family: 'Source Sans Pro';
  215. font-weight: 700;
  216. font-size: 10px;
  217. text-transform: uppercase;
  218. color: #FFFFFF;
  219. margin: 0px 10px;
  220. }
  221.  
  222. /* BOXES */
  223.  
  224. #boxes {
  225. display: block;
  226. width: 743px;
  227. height: auto;
  228. padding: 0px;
  229. background-color: transparent;
  230. margin: auto;
  231. margin-top: 40px;
  232. margin-bottom: 80px;
  233.  
  234. }
  235.  
  236. .box {
  237. width: 235px;
  238. height: 235px;
  239. background-color: #dddddd;
  240. display: inline-block;
  241. margin: 5px;
  242. display: table;
  243. }
  244.  
  245. /* BOX ONE */
  246.  
  247. #box1 {
  248. background-size: cover;
  249. -webkit-transition: all 0.2s ease-in-out;
  250. -moz-transition: all 0.2s ease-in-out;
  251. -o-transition: all 0.2s ease-in-out;
  252. -ms-transition: all 0.2s ease-in-out;
  253. transition: all 0.2s ease-in-out;
  254. }
  255.  
  256. #box1 .name {
  257. margin: 10px;
  258. height: 200px;
  259. height: 200px;
  260. text-align: center;
  261. display: table-cell;
  262. vertical-align: middle;
  263. }
  264.  
  265. .name .thisname {
  266. padding: 15px;
  267. border: 2px solid #FFFFFF;
  268. width: 150px;
  269. margin: auto;
  270. vertical-align: middle;
  271. font-family: 'Playfair Display';
  272. font-weight: 700;
  273. font-size: 14px;
  274. color: #FFFFFF;
  275. text-shadow: 0px 0px 10px #202020;
  276. text-transform: uppercase;
  277. opacity: 1;
  278. }
  279.  
  280. #box1 .bio {
  281. position: absolute;
  282. background-color: #FFFFFF;
  283. opacity: 0;
  284. width: 195px;
  285. height: 195px;
  286. overflow: auto;
  287. padding: 20px;
  288. z-index: 3;
  289. -webkit-transition: all 0.2s ease-in-out;
  290. -moz-transition: all 0.2s ease-in-out;
  291. -o-transition: all 0.2s ease-in-out;
  292. -ms-transition: all 0.2s ease-in-out;
  293. transition: all 0.2s ease-in-out;
  294.  
  295. }
  296.  
  297. #box1:hover .bio {
  298. opacity: 1;
  299. background:rgba(255,255,255,0.8);
  300. }
  301.  
  302. #box1:hover .thisname {
  303. opacity: 0;
  304. }
  305.  
  306. #box1 .thatname {
  307. font-family: 'PLayfair Display';
  308. font-weight: 700;
  309. font-size: 16px;
  310. color: #F38630;
  311. text-align: center;
  312. text-transform: uppercase;
  313. margin-top: 10px;
  314. padding-bottom: 10px;
  315. -webkit-transition: all 0.2s ease-in-out;
  316. -moz-transition: all 0.2s ease-in-out;
  317. -o-transition: all 0.2s ease-in-out;
  318. -ms-transition: all 0.2s ease-in-out;
  319. transition: all 0.2s ease-in-out;
  320. }
  321.  
  322. #box1:hover .thatname {
  323. margin-top: 0px;
  324. }
  325.  
  326. #box1 .quote {
  327. font-family: 'Libre Baskerville';
  328. font-weight: 700;
  329. font-size: 10px;
  330. font-style: italic;
  331. color: #202020;
  332. text-align: center;
  333. padding-bottom: 10px;
  334. border-bottom: 1px solid #E0E4CC;
  335. margin-bottom: 20px;
  336. letter-spacing: 1px;
  337. line-height: 90%;
  338. }
  339.  
  340. #box1 .about {
  341. font-family: 'Source Sans Pro';
  342. font-size: 10px;
  343. font-weight: 400;
  344. color: #202020;
  345. padding-bottom: 20px;
  346. border-bottom: 1px solid #E0E4CC;
  347. text-align: left;
  348. }
  349.  
  350. #box1 .stats {
  351. display: block;
  352. margin-bottom: 20px;
  353. margin-top: 20px;
  354. }
  355.  
  356. #box1 .section {
  357. display: block;
  358. margin-bottom: 5px;
  359. padding: 5px;
  360. background-color: #FFFFFF;
  361. font-family: 'Playfair Display';
  362. font-size: 10px;
  363. font-weight: 700;
  364. text-transform: lowercase;
  365. font-style: italic;
  366. color: #69D2E7;
  367. text-align: center;
  368. letter-spacing: 1px;
  369. -webkit-transition: all 0.2s ease-in-out;
  370. -moz-transition: all 0.2s ease-in-out;
  371. -o-transition: all 0.2s ease-in-out;
  372. -ms-transition: all 0.2s ease-in-out;
  373. transition: all 0.2s ease-in-out;
  374. }
  375.  
  376. #box1 .section:hover {
  377. background-color: #69D2E7;
  378. color: #FFFFFF;
  379. }
  380.  
  381. #box1 .innerlink {
  382. display: block;
  383. margin-bottom: 20px;
  384. }
  385.  
  386. #box1 .innerlink a {
  387. display: block;
  388. margin: 5px 0px;
  389. border-left: 10px solid #FA6900;
  390. padding: 0px 5px;
  391. text-align: left;
  392. font-family: 'Source Sans Pro';
  393. font-size: 8px;
  394. font-weight: 700;
  395. text-transform: uppercase;
  396. color: #202020;
  397. background-color: transparent;
  398. -webkit-transition: all 0.2s ease-in-out;
  399. -moz-transition: all 0.2s ease-in-out;
  400. -o-transition: all 0.2s ease-in-out;
  401. -ms-transition: all 0.2s ease-in-out;
  402. transition: all 0.2s ease-in-out;
  403. }
  404.  
  405. #box1 .innerlink a:hover {
  406. color: #A7DBD8;
  407. border-left: 10px solid #E0E4CC;
  408. }
  409.  
  410. /* BOX TWO */
  411.  
  412. #box2 {
  413. width: 480px;
  414. height: 235px;
  415. }
  416.  
  417. #box2 .bio {
  418. position: absolute;
  419. background-color: #FFFFFF;
  420. opacity: 0;
  421. width: 440px;
  422. height: 195px;
  423. overflow: auto;
  424. padding: 20px;
  425. z-index: 3;
  426. -webkit-transition: all 0.2s ease-in-out;
  427. -moz-transition: all 0.2s ease-in-out;
  428. -o-transition: all 0.2s ease-in-out;
  429. -ms-transition: all 0.2s ease-in-out;
  430. transition: all 0.2s ease-in-out;
  431. }
  432.  
  433. #box2:hover .bio {
  434. opacity: 1;
  435. background:rgba(255,255,255,0.8);
  436. }
  437.  
  438. #box2:hover .name {
  439. opacity: 0;
  440. }
  441.  
  442. #box2 .name {
  443. width: 480px;
  444. height: 235px;
  445. text-align: center;
  446. display: table-cell;
  447. vertical-align: middle;
  448. -webkit-transition: all 0.2s ease-in-out;
  449. -moz-transition: all 0.2s ease-in-out;
  450. -o-transition: all 0.2s ease-in-out;
  451. -ms-transition: all 0.2s ease-in-out;
  452. transition: all 0.2s ease-in-out;
  453. }
  454.  
  455. #box2 .thisname {
  456. padding: 15px;
  457. border: 2px solid #FFFFFF;
  458. width: 150px;
  459. margin: auto;
  460. vertical-align: middle;
  461. font-family: 'Playfair Display';
  462. font-weight: 700;
  463. font-size: 14px;
  464. color: #FFFFFF;
  465. text-shadow: 0px 0px 10px #202020;
  466. text-transform: uppercase;
  467. opacity: 1;
  468.  
  469. }
  470.  
  471. #box2 .bioleft {
  472. float: left;
  473. display: inline-block;
  474. width: 210px;
  475. height: 200px;
  476. margin-right: 7px;
  477. }
  478.  
  479. #box2 .bioright {
  480. display: inline-block;
  481. width: 210px;
  482. height: 200px;
  483. margin-left: 7px;
  484. }
  485.  
  486. #box2 .about {
  487. font-family: 'Source Sans Pro';
  488. font-size: 10px;
  489. font-weight: 400;
  490. color: #202020;
  491. padding-bottom: 20px;
  492. border-bottom: 1px solid #E0E4CC;
  493. text-align: left;
  494. }
  495.  
  496. #box2 .thatname {
  497. font-family: 'PLayfair Display';
  498. font-weight: 700;
  499. font-size: 16px;
  500. color: #F38630;
  501. text-align: center;
  502. text-transform: uppercase;
  503. margin-top: 10px;
  504. padding-bottom: 10px;
  505. -webkit-transition: all 0.2s ease-in-out;
  506. -moz-transition: all 0.2s ease-in-out;
  507. -o-transition: all 0.2s ease-in-out;
  508. -ms-transition: all 0.2s ease-in-out;
  509. transition: all 0.2s ease-in-out;
  510. }
  511.  
  512. #box2:hover .thatname {
  513. margin-top: 0px;
  514. }
  515.  
  516. #box2 .quote {
  517. font-family: 'Libre Baskerville';
  518. font-weight: 700;
  519. font-size: 10px;
  520. font-style: italic;
  521. color: #202020;
  522. text-align: center;
  523. padding-bottom: 10px;
  524. border-bottom: 1px solid #E0E4CC;
  525. margin-bottom: 20px;
  526. letter-spacing: 1px;
  527. line-height: 90%;
  528. }
  529.  
  530. #box2 .stats {
  531. display: block;
  532. margin-bottom: 20px;
  533. margin-top: 20px;
  534. }
  535.  
  536. #box2 .section {
  537. display: block;
  538. margin-bottom: 5px;
  539. padding: 5px;
  540. background-color: #FFFFFF;
  541. font-family: 'Playfair Display';
  542. font-size: 10px;
  543. font-weight: 700;
  544. text-transform: lowercase;
  545. font-style: italic;
  546. color: #69D2E7;
  547. text-align: center;
  548. letter-spacing: 1px;
  549. -webkit-transition: all 0.2s ease-in-out;
  550. -moz-transition: all 0.2s ease-in-out;
  551. -o-transition: all 0.2s ease-in-out;
  552. -ms-transition: all 0.2s ease-in-out;
  553. transition: all 0.2s ease-in-out;
  554. }
  555.  
  556. #box2 .section:hover {
  557. background-color: #69D2E7;
  558. color: #FFFFFF;
  559. }
  560.  
  561. #box2 .innerlink {
  562. display: block;
  563. margin-bottom: 20px;
  564. }
  565.  
  566. #box2 .innerlink a {
  567. display: block;
  568. margin: 5px 0px;
  569. border-left: 10px solid #FA6900;
  570. padding: 0px 5px;
  571. text-align: left;
  572. font-family: 'Source Sans Pro';
  573. font-size: 8px;
  574. font-weight: 700;
  575. text-transform: uppercase;
  576. color: #202020;
  577. background-color: transparent;
  578. -webkit-transition: all 0.2s ease-in-out;
  579. -moz-transition: all 0.2s ease-in-out;
  580. -o-transition: all 0.2s ease-in-out;
  581. -ms-transition: all 0.2s ease-in-out;
  582. transition: all 0.2s ease-in-out;
  583. }
  584.  
  585. #box2 .innerlink a:hover {
  586. color: #A7DBD8;
  587. border-left: 10px solid #E0E4CC;
  588. }
  589.  
  590.  
  591. /* BOOK THREE */
  592.  
  593. #box3 {
  594. width: 235px;
  595. height: 480px;
  596. -webkit-transition: all 0.2s ease-in-out;
  597. -moz-transition: all 0.2s ease-in-out;
  598. -o-transition: all 0.2s ease-in-out;
  599. -ms-transition: all 0.2s ease-in-out;
  600. transition: all 0.2s ease-in-out;
  601. }
  602.  
  603. #box3 .name {
  604. /*
  605. -ms-transform: rotate(-90deg);
  606. -webkit-transform: rotate(-90deg);
  607. transform: rotate(-90deg);
  608. */
  609. width: 235px;
  610. height: 480px;
  611. text-align: center;
  612. display: table-cell;
  613. vertical-align: middle;
  614. opacity: 1;
  615. }
  616.  
  617. #box3 .thisname3 {
  618. padding: 15px;
  619. border: 2px solid #FFFFFF;
  620. width: 120px;
  621. margin: auto;
  622. vertical-align: middle;
  623. font-family: 'Playfair Display';
  624. font-weight: 700;
  625. font-size: 14px;
  626. color: #FFFFFF;
  627. text-shadow: 0px 0px 10px #202020;
  628. text-transform: uppercase;
  629. }
  630.  
  631. #box3:hover .name {
  632. opacity: 0;
  633. }
  634.  
  635. #box3 .bio {
  636. position: absolute;
  637. background-color: #FFFFFF;
  638. opacity: 0;
  639. width: 195px;
  640. height: 440px;
  641. overflow: auto;
  642. padding: 20px;
  643. z-index: 3;
  644. -webkit-transition: all 0.2s ease-in-out;
  645. -moz-transition: all 0.2s ease-in-out;
  646. -o-transition: all 0.2s ease-in-out;
  647. -ms-transition: all 0.2s ease-in-out;
  648. transition: all 0.2s ease-in-out;
  649. }
  650.  
  651. #box3:hover .bio {
  652. opacity: 1;
  653. background:rgba(255,255,255,0.8);
  654. }
  655.  
  656. #box3 .about {
  657. font-family: 'Source Sans Pro';
  658. font-size: 10px;
  659. font-weight: 400;
  660. color: #202020;
  661. padding-bottom: 20px;
  662. border-bottom: 1px solid #E0E4CC;
  663. text-align: left;
  664. }
  665.  
  666. #box3 .thatname {
  667. font-family: 'PLayfair Display';
  668. font-weight: 700;
  669. font-size: 16px;
  670. color: #F38630;
  671. text-align: center;
  672. text-transform: uppercase;
  673. margin-top: 10px;
  674. padding-bottom: 10px;
  675. -webkit-transition: all 0.2s ease-in-out;
  676. -moz-transition: all 0.2s ease-in-out;
  677. -o-transition: all 0.2s ease-in-out;
  678. -ms-transition: all 0.2s ease-in-out;
  679. transition: all 0.2s ease-in-out;
  680. }
  681.  
  682. #box3:hover .thatname {
  683. margin-top: 0px;
  684. }
  685.  
  686. #box3 .quote {
  687. font-family: 'Libre Baskerville';
  688. font-weight: 700;
  689. font-size: 10px;
  690. font-style: italic;
  691. color: #202020;
  692. text-align: center;
  693. padding-bottom: 10px;
  694. border-bottom: 1px solid #E0E4CC;
  695. margin-bottom: 20px;
  696. letter-spacing: 1px;
  697. line-height: 90%;
  698. }
  699.  
  700. #box3 .stats {
  701. display: block;
  702. margin-bottom: 20px;
  703. margin-top: 20px;
  704. }
  705.  
  706. #box3 .section {
  707. display: block;
  708. margin-bottom: 5px;
  709. padding: 5px;
  710. background-color: #FFFFFF;
  711. font-family: 'Playfair Display';
  712. font-size: 10px;
  713. font-weight: 700;
  714. text-transform: lowercase;
  715. font-style: italic;
  716. color: #69D2E7;
  717. text-align: center;
  718. letter-spacing: 1px;
  719. -webkit-transition: all 0.2s ease-in-out;
  720. -moz-transition: all 0.2s ease-in-out;
  721. -o-transition: all 0.2s ease-in-out;
  722. -ms-transition: all 0.2s ease-in-out;
  723. transition: all 0.2s ease-in-out;
  724. }
  725.  
  726. #box3 .section:hover {
  727. background-color: #69D2E7;
  728. color: #FFFFFF;
  729. }
  730.  
  731. #box3 .innerlink {
  732. display: block;
  733. margin-bottom: 20px;
  734. }
  735.  
  736. #box3 .innerlink a {
  737. display: block;
  738. margin: 5px 0px;
  739. border-left: 10px solid #FA6900;
  740. padding: 0px 5px;
  741. text-align: left;
  742. font-family: 'Source Sans Pro';
  743. font-size: 8px;
  744. font-weight: 700;
  745. text-transform: uppercase;
  746. color: #202020;
  747. background-color: transparent;
  748. -webkit-transition: all 0.2s ease-in-out;
  749. -moz-transition: all 0.2s ease-in-out;
  750. -o-transition: all 0.2s ease-in-out;
  751. -ms-transition: all 0.2s ease-in-out;
  752. transition: all 0.2s ease-in-out;
  753. }
  754.  
  755. #box3 .innerlink a:hover {
  756. color: #A7DBD8;
  757. border-left: 10px solid #E0E4CC;
  758. }
  759.  
  760. </style>
  761. <body>
  762.  
  763. <container>
  764.  
  765. <div id="books">
  766. <!-- HEADER -->
  767. <div class="header" style="background-image: url('HEADER URL');">
  768. <div class="title">My Deviants</div>
  769. </div>
  770. <div class="links">
  771. <a href="#">Link one</a>
  772. <a href="#">Link two</a>
  773. <a href="#">Link three</a>
  774. <a href="#">Link four</a>
  775. <a href="http://dominicwrites.tumblr.com">theme</a>
  776. </div>
  777.  
  778. <!-- BOX CONTAINER -->
  779.  
  780. <div id="boxes">
  781.  
  782. <!-- BOX ONE-->
  783. <div class="box" id="box1" style="background-image:url('BOX 1 IMAGE URL');">
  784. <div class="bio">
  785. <div class="thatname">INSIDE NAME</div>
  786. <div class="quote">
  787. &#10077;
  788. QUOTE HERE
  789. &#10078;
  790. </div>
  791. <div class="about">
  792. BIO HERE
  793. </div>
  794. <div class="stats">
  795. <div class="section">Twenty-five</div>
  796. <div class="section">Human</div>
  797. <div class="section">Venice, Italy</div>
  798. <div class="section">Shiplocked</div>
  799. <div class="section">Single-verse</div>
  800. </div>
  801. <div class="innerlink">
  802. <a href="#">character post</a>
  803. <a href="#">inspiration</a>
  804. <a href="#">portraits</a>
  805. <a href="#">opposite</a>
  806. <a href="#">verse</a>
  807. </div>
  808. </div>
  809. <div class="name"><div class="thisname">OUTSIDE NAME</div></div>
  810.  
  811. </div>
  812.  
  813. <!-- BOX ONE -->
  814. <div class="box" id="box1" style="background-image:url('BOX 1 IMAGE URL');">
  815. <div class="bio">
  816. <div class="thatname">INSIDE NAME</div>
  817. <div class="quote">
  818. &#10077;
  819. QUOTE HERE
  820. &#10078;
  821. </div>
  822. <div class="about">
  823. BIO HERE
  824. </div>
  825. <div class="stats">
  826. <div class="section">Twenty-five</div>
  827. <div class="section">Human</div>
  828. <div class="section">Venice, Italy</div>
  829. <div class="section">Shiplocked</div>
  830. <div class="section">Single-verse</div>
  831. </div>
  832. <div class="innerlink">
  833. <a href="#">character post</a>
  834. <a href="#">inspiration</a>
  835. <a href="#">portraits</a>
  836. <a href="#">opposite</a>
  837. <a href="#">verse</a>
  838. </div>
  839. </div>
  840. <div class="name"><div class="thisname">OUTSIDE NAME</div></div>
  841. </div>
  842.  
  843.  
  844. <!-- BOX TWO -->
  845. <div class="box" id="box2" style="background-image:url('BOX 2 IMAGE URL');">
  846. <div class="bio">
  847. <div class="thatname">INSIDE NAME</div>
  848. <div class="bioleft">
  849. <div class="quote">
  850. &#10077;
  851. QUOTE HERE
  852. &#10078;
  853. </div>
  854. <div class="stats">
  855. <div class="section">Twenty-five</div>
  856. <div class="section">Human</div>
  857. <div class="section">Venice, Italy</div>
  858. <div class="section">Shiplocked</div>
  859. <div class="section">Single-verse</div>
  860. </div>
  861. <div class="innerlink">
  862. <a href="#">character post</a>
  863. <a href="#">inspiration</a>
  864. <a href="#">portraits</a>
  865. <a href="#">opposite</a>
  866. <a href="#">verse</a>
  867. </div>
  868. </div>
  869.  
  870. <div class="bioright">
  871. <div class="about">
  872. BIO HERE
  873. </div>
  874. </div>
  875.  
  876.  
  877.  
  878. </div>
  879.  
  880. <div class="name"><div class="thisname">OUTSIDE NAME</div></div>
  881.  
  882. </div>
  883.  
  884. <!-- BOX THREE -->
  885. <div class="box" id="box3" style="background-image:url('BOX 3 IMAGE URL');">
  886. <div class="bio">
  887. <div class="thatname">INSIDE NAME</div>
  888. <div class="quote">
  889. &#10077;
  890. QUOTE HERE
  891. &#10078;
  892. </div>
  893. <div class="about">
  894. BIO HERE
  895. </div>
  896. <div class="stats">
  897. <div class="section">Twenty-five</div>
  898. <div class="section">Human</div>
  899. <div class="section">Venice, Italy</div>
  900. <div class="section">Shiplocked</div>
  901. <div class="section">Single-verse</div>
  902. </div>
  903. <div class="innerlink">
  904. <a href="#">character post</a>
  905. <a href="#">inspiration</a>
  906. <a href="#">portraits</a>
  907. <a href="#">opposite</a>
  908. <a href="#">verse</a>
  909. </div>
  910. </div>
  911.  
  912.  
  913. <div class="name"><div class="thisname3">OUTSIDE NAME</div></div>
  914. </div>
  915.  
  916.  
  917.  
  918.  
  919.  
  920.  
  921.  
  922.  
  923.  
  924.  
  925. <!-- ALL CODE MUST BE PASTED ABOVE THIS COMMENT!! -->
  926. </div>
  927. </div>
  928.  
  929. </container>
  930.  
  931.  
  932.  
  933. </body>
  934. </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!