API tools faq
paste
Advertisement
rollyjogered

page theme five: høyere

rollyjogered
Feb 20th, 2020 (edited)
3,425
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme five: høyere by pirateskinned
  7.  
  8. please don't: edit & repost / claim as your own
  9. please don't: delete or move the credit
  10. please don't: steal bits of coding
  11.  
  12. if you need any help, feel free to
  13. message me at pirateskinned.tumblr.com
  14.  
  15. ------
  16.  
  17. tumblr controls styling by odeysseus.tumblr.com
  18.  
  19. -->
  20.  
  21. <title>høyere</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. <meta name="description" content="{MetaDescription}" />
  26.  
  27. <!-- scripts -->
  28.  
  29. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!-- fonts -->
  33.  
  34. <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400i" rel="stylesheet">
  35.  
  36. <!-- icon font -- http://suiomi.com/font -->
  37.  
  38. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  39.  
  40. <!-- tooltips -->
  41.  
  42. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43.  
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("a[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:30,
  50. tip_fade_speed:300,
  51. attribute:"title"
  52. });
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57. <style type="text/css">
  58.  
  59. /* ---
  60.  
  61. CHANGE THE COLOURS HERE
  62.  
  63. --- */
  64.  
  65. :root {
  66. --background:#ffffff;
  67. --text:#4f4e4e;
  68. --sidebar:#f6f6f6;
  69. --border:#eeeeee;
  70. --links:#c1c7c7;
  71. --accent-one:#90bbc2;
  72. --accent-two:#c96e42;
  73. }
  74.  
  75. /* --- tumblr controls styling by odeysseus
  76. http://odeysseus.tumblr.com/post/163708246967/ --- */
  77.  
  78. .tmblr-iframe {
  79. white-space:nowrap;
  80. -webkit-filter: invert(100%);
  81. -moz-filter: invert(100%);
  82. -o-filter: invert(100%);
  83. -ms-filter: invert(100%);
  84. filter: invert(100%);
  85. opacity:.2;
  86. transition: .4s ease-in-out;
  87. -webkit-transition: .4s ease-in-out;
  88. -moz-transition: .4s ease-in-out;
  89. -o-transition: .4s ease-in-out;
  90. position:fixed!important;
  91. right:-10px!important;
  92. transform:scale(0.7,0.7);
  93. }
  94.  
  95. .tmblr-iframe:hover {
  96. opacity:1;
  97. }
  98.  
  99. /* --- tooltips & scrollbars --- */
  100.  
  101. #s-m-t-tooltip {
  102. position:absolute;
  103. margin-top: 15px;
  104. z-index:9999;
  105. padding:3px 5px;
  106. background:var(--background);
  107. color:var(--text);
  108. border-radius:3px;
  109. font-size:10px;
  110. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  111. -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  112. box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  113. }
  114.  
  115. ::-webkit-scrollbar-thumb:vertical {background-color:var(--accent-two);}
  116. ::-webkit-scrollbar-button:horizontal {background-color:var(--accent-two);}
  117. ::-webkit-scrollbar {background-color:transparent; width:3px;}
  118.  
  119. /* --- basics --- */
  120.  
  121. body {
  122. background-color:var(--background);
  123. background-image:url('https://static.tumblr.com/ba4f45b9c0e5b8010315cb61a1f717b7/k9k7gco/9Zbpjeuwg/tumblr_static_a5y2w6hsbpk4wowoc8o84kccw.png');
  124. background-attachment:fixed;
  125. background-position:center center;
  126. background-repeat:repeat;
  127. background-size:auto;
  128. color:var(--text);
  129. font-family: 'ABeeZee', sans-serif;
  130. font-size:10px;
  131. line-height:15px;
  132. font-weight:400;
  133. text-align:justify;
  134. margin:0;
  135. }
  136.  
  137. a {
  138. color:var(--text);
  139. text-decoration:none;
  140. -moz-transition-duration: 0.5s;
  141. -o-transition-duration: 0.5s;
  142. -webkit-transition-duration: 0.5s;
  143. transition-duration: 0.5s;
  144. }
  145.  
  146. a:hover {
  147. color:var(--text);
  148. text-decoration:none;
  149. }
  150.  
  151. p a, .description a {box-shadow:var(--links) 0px -5px 0px inset;}
  152. p a:hover, .description a:hover {box-shadow:var(--links) 0px -11px 0px inset;}
  153.  
  154. img {
  155. border:none;
  156. text-decoration:none;
  157. }
  158.  
  159. b, strong, bold {
  160. color:var(--accent-one);
  161. font-weight:700;
  162. }
  163.  
  164. i, em, italic {
  165. color:var(--accent-two);
  166. }
  167.  
  168. u {
  169. text-decoration:none;
  170. }
  171.  
  172. .firstletter, u {
  173. display:block;
  174. float:left;
  175. padding:12px 14px;
  176. background:var(--accent-two);
  177. color:var(--background);
  178. font-weight:700;
  179. text-transform:uppercase;
  180. font-size:14px;
  181. margin:0px 10px 0px 0px;
  182. border-radius:6px;
  183. }
  184.  
  185. s, strike {
  186. text-decoration-color:var(--accent-two);
  187. }
  188.  
  189. small, sub, sup, big {
  190. font-size:10px;
  191. line-height:14px;
  192. vertical-align:baseline;
  193. }
  194.  
  195. blockquote {
  196. padding:0px 5px 0px 15px;
  197. border-left:1px solid var(--border);
  198. margin-left:5px;
  199. margin-right:0px;
  200. }
  201.  
  202. blockquote blockquote {
  203. margin-right:0px;
  204. }
  205.  
  206. pre {
  207. font-family: 'ABeeZee', sans-serif;
  208. font-size:10px;
  209. text-transform:uppercase;
  210. font-weight:700;
  211. padding:10px;
  212. background-color:var(--accent-two);
  213. color:var(--background);
  214. border-radius:6px;
  215. }
  216.  
  217. pre i, pre em, pre b, pre strong, pre a {
  218. color:var(--background);
  219. }
  220.  
  221. ul {
  222. padding-left:15px;
  223. }
  224.  
  225. ul li {
  226. list-style-type:none;
  227. }
  228.  
  229. ul li:before {
  230. content: "— ";
  231. text-indent: -5px;
  232. }
  233.  
  234. /* --- header styles --- */
  235.  
  236. h1 {
  237. margin:0px 0px 10px 0px;
  238. font-weight:bold;
  239. color:var(--accent-one);
  240. text-align:left;
  241. font-size:22px;
  242. }
  243.  
  244. h2 {
  245. font-weight:normal;
  246. color:var(--accent-two);
  247. text-align:left;
  248. text-transform:uppercase;
  249. font-size:16px;
  250. }
  251.  
  252. h2 b, b h2, h2 i, i h2,
  253. h2 strong, strong h2, h2 em, em h2 {
  254. color:var(--accent-two);
  255. }
  256.  
  257. h3 {
  258. margin:0px 0px 5px 0px;
  259. font-weight:bold;
  260. color:var(--accent-one);
  261. text-align:left;
  262. font-size:16px;
  263. }
  264.  
  265. h4 {
  266. font-size:10px;
  267. letter-spacing:2px;
  268. font-weight:normal;
  269. text-transform:uppercase;
  270. text-align:left;
  271. margin:0px;
  272. }
  273.  
  274.  
  275. /* --- container --- */
  276.  
  277. .container {
  278. position:absolute;
  279. margin-top:-300px;
  280. margin-left:-450px;
  281. top:50%;
  282. left:50%;
  283. width:900px;
  284. height:600px;
  285. overflow:hidden;
  286. border-radius:6px;
  287. background-color:var(--sidebar);
  288. background-image:url('https://static.tumblr.com/aaeb5ffa11616df82902281c4c0c77a5/6amorxd/ARIq5lgyf/tumblr_static_9vqsr8c8abs44wgwc0so044cc.jpg');
  289. background-position:center center;
  290. background-repeat:no-repeat;
  291. background-size:cover;
  292. border:1px solid var(--border);
  293. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  294. }
  295.  
  296. /* --- sidebar --- */
  297.  
  298. .sidebar {
  299. position:absolute;
  300. z-index:7;
  301. top:100px;
  302. left:60px;
  303. width:260px;
  304. height:150px;
  305. background:var(--sidebar);
  306. border-radius:6px;
  307. border:1px solid var(--border);
  308. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  309. }
  310.  
  311. /* --- description + sidebar icon --- */
  312.  
  313. .sidebar img {
  314. position:absolute;
  315. width:70px;
  316. height:70px;
  317. margin:20px;
  318. border-radius:6px;
  319. }
  320.  
  321. .description {
  322. position:absolute;
  323. z-index:5;
  324. left:90px;
  325. top:0px;
  326. width:170px;
  327. height:112px;
  328. padding:20px;
  329. box-sizing:border-box;
  330. font-size:10px;
  331. line-height:18px;
  332. overflow-x:hidden;
  333. overflow-y:auto;
  334. text-align-last:justify;
  335. }
  336.  
  337. /* --- navigation --- */
  338.  
  339. .nav {
  340. position:absolute;
  341. left:0px;
  342. bottom:0px;
  343. width:260px;
  344. height:40px;
  345. text-align:center;
  346. box-sizing:border-box;
  347. padding:0px;
  348. border-radius:0px 0px 6px 6px;
  349. background-color:var(--background);
  350. border-top:1px solid var(--border);
  351. }
  352.  
  353. .nav a {
  354. -webkit-transition-duration: 0.6s;
  355. transition-duration: 0.6s;
  356. display:inline-block;
  357. width:auto;
  358. height:14px;
  359. line-height:14px;
  360. text-align:center;
  361. font-size:10px;
  362. margin:13px 5px;
  363. color:var(--text);
  364. border-bottom:1px solid transparent;
  365. }
  366.  
  367. .nav a:hover {
  368. border-bottom:1px solid var(--text);
  369. }
  370.  
  371. /* --- previous + next muses --- */
  372.  
  373. .muse-pagination {
  374. position:absolute;
  375. top:290px;
  376. left:60px;
  377. width:260px;
  378. height:150px;
  379. }
  380.  
  381. .muse-pagination-link {
  382. position:relative;
  383. float:left;
  384. width:110px;
  385. height:80px;
  386. background-color:var(--sidebar);
  387. border-radius:6px;
  388. border:1px solid var(--border);
  389. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  390. overflow:hidden;
  391. }
  392.  
  393. .muse-pagination-link img {
  394. width:80px;
  395. height:80px;
  396. opacity:0.8;
  397. }
  398.  
  399. .muse-pagination-link span {
  400. position:absolute;
  401. top:25px;
  402. right:-25px;
  403. height:30px;
  404. width:80px;
  405. line-height:30px;
  406. text-align:center;
  407. background-color:var(--background);
  408. border-top:1px solid var(--border);
  409. transform:rotate(-90deg);
  410. }
  411.  
  412. .muse-pagination-link .icon {
  413. position:absolute;
  414. z-index:500;
  415. top:0px;
  416. left:0px;
  417. width:80px;
  418. height:80px;
  419. text-align:center;
  420. line-height:85px;
  421. color:var(--background);
  422. font-size:16px;
  423. }
  424.  
  425. /* --- about container --- */
  426.  
  427. .about-container {
  428. position:absolute;
  429. z-index:3;
  430. top:0px;
  431. right:0px;
  432. width:600px;
  433. height:600px;
  434. overflow-x:hidden;
  435. overflow-y:auto;
  436. background-color:transparent;
  437. box-sizing:border-box;
  438. padding:60px 60px 40px 100px;
  439. border-radius:6px;
  440. }
  441.  
  442. /* --- about cards --- */
  443.  
  444. .stats, .traits, .skills, .bio, .con {
  445. position:relative;
  446. width:100%;
  447. height:auto;
  448. margin-bottom:20px;
  449. background-color:var(--background);
  450. border-radius:6px;
  451. border:1px solid var(--border);
  452. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  453. overflow:hidden;
  454. box-sizing:border-box;
  455. }
  456.  
  457. /* --- stats --- */
  458.  
  459. .stats {
  460. height:240px;
  461. }
  462.  
  463. .stats-images {
  464. position:absolute;
  465. top:20px;
  466. left:20px;
  467. width:90px;
  468. height:auto;
  469. }
  470.  
  471. .stats-images img {
  472. width:90px;
  473. height:90px;
  474. float:left;
  475. border-radius:6px;
  476. }
  477.  
  478. .stats-images img:nth-of-type(1) {
  479. margin-bottom:20px;
  480. }
  481.  
  482. .stats-text {
  483. position:absolute;
  484. top:0px;
  485. right:0px;
  486. height:240px;
  487. width:330px;
  488. overflow:auto;
  489. box-sizing:border-box;
  490. padding:20px 20px 18px 20px;
  491. }
  492.  
  493. .stats-text table tr {
  494. height:18px;
  495. }
  496.  
  497. .stats-text table tr td:nth-of-type(1) {
  498. width:30%;
  499. font-weight:bold;
  500. }
  501.  
  502. .stats-text table tr td:nth-of-type(2) {
  503. width:70%;
  504. }
  505.  
  506. /* --- traits --- */
  507.  
  508. .traits {
  509. padding:20px;
  510. text-align:center;
  511. }
  512.  
  513. .traits span {
  514. display:inline-block;
  515. padding:5px 10px;
  516. border-radius:6px;
  517. margin:5px;
  518. background-color:var(--accent-one);
  519. color:var(--background);
  520. }
  521.  
  522. /* --- skills --- */
  523.  
  524. .skills {
  525. padding:20px 20px 0px 20px;
  526. }
  527.  
  528. .skills:after {
  529. clear:both;
  530. }
  531.  
  532. .skill-bar {
  533. float:left;
  534. width:180px;
  535. height:30px;
  536. margin-bottom:20px;
  537. font-weight:bold;
  538. font-size:110%;
  539. line-height:150%;
  540. }
  541.  
  542. .skill-bar:nth-of-type(odd) {
  543. margin-right:30px;
  544. }
  545.  
  546. .bar {
  547. width:100%;
  548. height:10px;
  549. background-color:var(--accent-two);
  550. border-radius:6px;
  551. border:1px solid var(--border);
  552. }
  553.  
  554. /* --- biography --- */
  555.  
  556. .bio {
  557. padding:20px;
  558. }
  559.  
  560. /* --- connections --- */
  561.  
  562. .con {
  563. padding:20px 20px 0px 20px;
  564. }
  565.  
  566. .connection {
  567. width:100%;
  568. height:auto;
  569. margin-bottom:20px;
  570. }
  571.  
  572. .connection img {
  573. width:90px;
  574. height:90px;
  575. border-radius:6px;
  576. float:left;
  577. margin:0px 15px 15px 0px;
  578. }
  579.  
  580. .connection:after {
  581. clear:both;
  582. }
  583.  
  584. .con hr {
  585. width:100%;
  586. height:1px;
  587. background-color:var(--border);
  588. margin:0px 0px 20px 0px;
  589. border:none;
  590. }
  591.  
  592. /* --- credit --- */
  593.  
  594. .credit a {
  595. position:fixed;
  596. font-size:14px;
  597. right:10px;
  598. bottom:10px;
  599. text-align:center;
  600. width:15px;
  601. height:15px;
  602. line-height:15px;
  603. color:var(--accent-one);
  604. }
  605.  
  606.  
  607. </style>
  608. </head>
  609. <body>
  610.  
  611.  
  612. <div class="container">
  613.  
  614.  
  615. <!-- start of .sidebar -->
  616.  
  617. <div class="sidebar">
  618.  
  619. <img src="http://i.imgur.com/8xzGUrt.png">
  620.  
  621. <div class="description">
  622. a biography page to match with themes hærra + higher.
  623. all icons used were created by <a href="http://acuite.tumblr.com/icons">acuite</a>.
  624. </div>
  625.  
  626. <!-- start of navigation -->
  627.  
  628. <div class="nav">
  629. <a href="/">home</a>
  630. <a href="/ask">message</a>
  631. <a href="/">about</a>
  632. <a href="/">navigate</a>
  633. </div>
  634.  
  635. </div>
  636.  
  637. <!-- end of .sidebar -->
  638.  
  639. <!-- start of muse pagination
  640. you can use this to link to connected muses
  641.  
  642. don't want this? simply delete everything between here
  643. and where it says the muse pagination ends
  644.  
  645. change the link under href="/" -->
  646.  
  647. <div class="muse-pagination">
  648.  
  649. <a href="/" title="learn more about juniper">
  650. <div class="muse-pagination-link" style="margin-right:35px;">
  651.  
  652. <img src="http://i.imgur.com/SEcpnpX.png">
  653. <span>juniper</span>
  654.  
  655. <div class="icon sf sf-arrow-left"></div>
  656.  
  657. </div>
  658. </a>
  659.  
  660. <a href="/" title="learn more about waverly">
  661. <div class="muse-pagination-link">
  662.  
  663. <img src="http://i.imgur.com/aqp9Jo6.png">
  664. <span>waverly</span>
  665.  
  666. <div class="icon sf sf-arrow-right"></div>
  667.  
  668. </div>
  669. </a>
  670.  
  671. </div>
  672.  
  673. <!-- end of muse pagination -->
  674.  
  675. <!-- start of about container
  676.  
  677. all items in here can be moved around to have them
  678. in whatever order you want. you can also duplicate
  679. them if you'd like.
  680.  
  681. there are 5 different kinds:
  682. .stats
  683. - statistics
  684. .traits
  685. - traits / tags
  686. .skills
  687. - progress bars
  688. .bio
  689. - plain text
  690. .con
  691. - connections
  692.  
  693. -->
  694.  
  695. <div class="about-container">
  696.  
  697. <!-- statistics -->
  698.  
  699. <div class="stats">
  700.  
  701. <div class="stats-images">
  702. <img src="http://i.imgur.com/47pmIeH.png">
  703. <img src="http://i.imgur.com/m1Ac38p.png">
  704. </div>
  705.  
  706. <div class="stats-text">
  707. <table style="width: 100%;">
  708. <tbody>
  709. <!-- want another row? copy from here... -->
  710. <tr>
  711. <td>name:</td>
  712. <td>boo rabbit</td>
  713. </tr>
  714. <!-- ...to here! -->
  715. <tr>
  716. <td>nicknames:</td>
  717. <td>something funky</td>
  718. </tr>
  719. <tr>
  720. <td>birthday:</td>
  721. <td>june 9th</td>
  722. </tr>
  723. <tr>
  724. <td>age:</td>
  725. <td>twenty-five</td>
  726. </tr>
  727. <tr>
  728. <td>zodiac sign:</td>
  729. <td>gemini</td>
  730. </tr>
  731. <tr>
  732. <td>gender:</td>
  733. <td>female</td>
  734. </tr>
  735. <tr>
  736. <td>pronouns:</td>
  737. <td>she/her</td>
  738. </tr>
  739. <tr>
  740. <td>sexuality:</td>
  741. <td>gay</td>
  742. </tr>
  743. <tr>
  744. <td>faceclaim:</td>
  745. <td>first last</td>
  746. </tr>
  747. <tr>
  748. <td>status:</td>
  749. <td>open for interactions</td>
  750. </tr>
  751. </tbody>
  752. </table>
  753. </div>
  754.  
  755. </div>
  756.  
  757. <!-- end of statistics -->
  758.  
  759. <!-- traits -->
  760.  
  761. <div class="traits">
  762. <span>music lover</span>
  763. <span>foodie</span>
  764. <span>loves outdoors</span>
  765. <span>cheerful</span>
  766. <span>bookworm</span>
  767. <span>outgoing</span>
  768. <span>child of the islands</span>
  769. <span>vegetarian</span>
  770. </div>
  771.  
  772. <!-- end of traits -->
  773.  
  774. <!-- skills
  775.  
  776. the first negative number on the box shadow
  777. tells how far the bar is filled in.
  778.  
  779. 0px means the bar is completely filled
  780. -90px means the bar is halfway filled
  781. -180px means the bar is completely empty
  782.  
  783. -->
  784.  
  785. <div class="skills">
  786.  
  787. <div class="skill-bar">
  788. charisma
  789. <div class="bar" style="box-shadow:var(--sidebar) -150px 0px 0px inset;"></div>
  790. </div>
  791.  
  792. <div class="skill-bar">
  793. fitness
  794. <div class="bar" style="box-shadow:var(--sidebar) -10px 0px 0px inset;"></div>
  795. </div>
  796.  
  797. <div class="skill-bar">
  798. cooking
  799. <div class="bar" style="box-shadow:var(--sidebar) -50px 0px 0px inset;"></div>
  800. </div>
  801.  
  802. <div class="skill-bar">
  803. guitar
  804. <div class="bar" style="box-shadow:var(--sidebar) -110px 0px 0px inset;"></div>
  805. </div>
  806.  
  807. <div class="skill-bar">
  808. handiness
  809. <div class="bar" style="box-shadow:var(--sidebar) -90px 0px 0px inset;"></div>
  810. </div>
  811.  
  812. <div class="skill-bar">
  813. programming
  814. <div class="bar" style="box-shadow:var(--sidebar) -130px 0px 0px inset;"></div>
  815. </div>
  816.  
  817. </div>
  818.  
  819. <!-- end of skills -->
  820.  
  821. <!-- biography -->
  822.  
  823. <div class="bio">
  824. <h1>Lorem ipsum dolor sit amet</h1>
  825. <p><u>c</u>onsectetur adipiscing elit. Vivamus eleifend nisl eros, vitae dignissim enim eleifend eget. Pellentesque nec dictum mi. Nulla id justo accumsan, suscipit ligula eu, commodo mauris. In convallis posuere ligula, vel ornare nisi varius a. Curabitur malesuada lobortis augue, sed condimentum leo fringilla eu. Aliquam interdum erat vel tincidunt efficitur. Quisque sed nibh malesuada, aliquet lorem ut, mattis sem. Aliquam erat volutpat. Nunc eu purus ac diam aliquet convallis sit amet a dui.</p>
  826.  
  827. <blockquote><p>Mauris mollis vehicula neque, id ultricies ex maximus rutrum. Pellentesque sed viverra arcu, eget sollicitudin sem. Curabitur consequat sem at augue varius, nec finibus orci tempor. Pellentesque a aliquet nunc. Fusce sollicitudin porta elit, sed commodo lacus sollicitudin sit amet. Curabitur fringilla urna porta dolor scelerisque scelerisque. Praesent egestas augue commodo enim egestas, sed mattis lectus mattis.</p></blockquote>
  828.  
  829. <h2>Pellentesque a aliquet nunc</h2>
  830.  
  831. <p>Etiam vehicula odio vel dui porta, vitae euismod orci luctus. Fusce ullamcorper dictum aliquet. Etiam ipsum quam, commodo et nunc quis, tincidunt elementum nibh. In volutpat imperdiet interdum. Proin vitae feugiat turpis, et vestibulum orci. Pellentesque consequat leo vel pellentesque suscipit. Mauris lobortis, lorem eu sagittis luctus, turpis urna feugiat nulla, at tincidunt arcu libero quis felis. Sed sit amet bibendum felis, quis imperdiet magna. Etiam ut mollis est.</p>
  832.  
  833. <pre>Vivamus rutrum</pre>
  834.  
  835. <p>Turpis ac pharetra pulvinar, velit lacus tempus urna, vitae congue tortor neque et sem. Pellentesque at libero tortor. Morbi vestibulum malesuada leo ac aliquam. Quisque vitae elit vel libero sodales imperdiet. Quisque at suscipit est, tincidunt pharetra justo. Cras quam velit, rhoncus nec dictum non, consequat in tellus. Morbi convallis posuere mauris quis tempus. Fusce ut risus a nisl sollicitudin sodales nec eget mauris.</p>
  836.  
  837. <p>Sed ut tincidunt elit. Mauris vitae luctus neque. Aliquam urna velit, finibus ac molestie a, semper eget magna. Ut sagittis, lorem ornare maximus lacinia, urna ex vestibulum erat, eget sollicitudin leo nisi sit amet tortor. Pellentesque eleifend non neque rutrum aliquam. Quisque vitae neque id eros sagittis semper ac pulvinar lorem. Maecenas aliquet aliquam enim eget aliquet.</p>
  838. </div>
  839.  
  840. <!-- end of biography -->
  841.  
  842. <!-- connections -->
  843.  
  844. <div class="con">
  845.  
  846. <div class="connection">
  847. <img src="http://i.imgur.com/DDzEIC3.png">
  848.  
  849. <h3>sprout rabbit</h3>
  850. <h4>sister</h4>
  851.  
  852. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend nisl eros, vitae dignissim enim eleifend eget. Pellentesque nec dictum mi. Nulla id justo accumsan, suscipit ligula eu, commodo mauris. Aliquam urna velit, finibus ac molestie a, semper eget magna. Ut sagittis, lorem ornare maximus lacinia, urna ex vestibulum erat, eget sollicitudin leo nisi sit amet tortor.</p>
  853. </div>
  854.  
  855. <!-- add <hr> between the connections for the grey line -->
  856.  
  857. <hr>
  858.  
  859. <div class="connection">
  860. <img src="http://i.imgur.com/2tZetdu.png">
  861.  
  862. <h3>poppy oats</h3>
  863. <h4>best friend</h4>
  864.  
  865. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend nisl eros, vitae dignissim enim eleifend eget. Pellentesque nec dictum mi. Nulla id justo accumsan, suscipit ligula eu, commodo mauris.</p>
  866. </div>
  867.  
  868. <hr>
  869.  
  870. <div class="connection">
  871. <img src="http://i.imgur.com/SALHu7B.png">
  872.  
  873. <h3>mabel darby</h3>
  874. <h4>ex-girlfriend</h4>
  875.  
  876. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend nisl eros, vitae dignissim enim eleifend eget. Pellentesque nec dictum mi.</p>
  877. </div>
  878.  
  879. </div>
  880.  
  881. <!-- end of connections -->
  882.  
  883. </div> <!-- end of about container -->
  884.  
  885. </div> <!-- end of container -->
  886.  
  887. <div class="credit"><a class="sf sf-boat" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  888.  
  889. </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!