API tools faq
paste
Advertisement
rollyjogered

page theme four: war paint

rollyjogered
Jun 30th, 2019 (edited)
6,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme four: war paint 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 cyantists.tumblr.com
  18. icon font by suiomi.com/font
  19.  
  20. -->
  21.  
  22. <title>{Title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <meta name="description" content="{MetaDescription}" />
  27.  
  28. <!-- scripts -->
  29.  
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!-- icon font -- http://suiomi.com/font -->
  33.  
  34. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  35.  
  36. <!-- fonts -->
  37.  
  38. <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,700|DM+Serif+Display" 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. <!---- tabs ---->
  58.  
  59. <script>
  60. $(document).ready(function() {
  61. $('.nav a').on('click', function(e) {
  62. var currentAttrValue = $(this).attr('href');
  63.  
  64. // Show/Hide Tabs
  65. $('.tabs ' + currentAttrValue).show().siblings().hide();
  66.  
  67. // Change/remove current tab to active
  68. $(this).addClass('active').siblings().removeClass('active');
  69.  
  70. e.preventDefault();
  71. });
  72. });
  73. </script>
  74.  
  75. <style type="text/css">
  76.  
  77. /* --- tumblr controls styling by cyantists
  78. http://cyantists.tumblr.com/tumblr_controls/hover --- */
  79.  
  80. iframe.tmblr-iframe {
  81. z-index:99999999999999!important;
  82. top:-2px!important;
  83. right:0!important;
  84. opacity:0;
  85. padding-right:38px;
  86. /* delete invert(1) from here */
  87. filter:invert(1) contrast(150%);
  88. -webkit-filter:invert(1) contrast(150%);
  89. -o-filter:invert(1) contrast(150%);
  90. -moz-filter:invert(1) contrast(150%);
  91. -ms-filter:invert(1) contrast(150%);
  92. /* to here if your blog has a dark background */
  93. transform:scale(0.65);
  94. transform-origin:100% 0;
  95. -webkit-transform:scale(0.65);
  96. -webkit-transform-origin:100% 0;
  97. -o-transform:scale(0.65);
  98. -o-transform-origin:100% 0;
  99. -moz-transform:scale(0.65);
  100. -moz-transform-origin:100% 0;
  101. -ms-transform:scale(0.65);
  102. -ms-transform-origin:100% 0;}
  103.  
  104. iframe.tmblr-iframe:hover {
  105. opacity:0.6!important;}
  106.  
  107. .hcontrols {
  108. position:fixed;
  109. top:0;
  110. right:0;
  111. z-index:999999999;}
  112.  
  113. .hcontrols svg {
  114. width:14px;
  115. height:14px;
  116. padding:9px;}
  117.  
  118. .hcontrols svg path {
  119. fill:#888888;/* change this to change the color of the icon */}
  120.  
  121.  
  122. /* --- tooltips & scrollbars --- */
  123.  
  124. #s-m-t-tooltip {
  125. position:absolute;
  126. margin-top: 15px;
  127. z-index:9999;
  128. padding:3px 5px;
  129. background:#ffffff;
  130. color:#1d1d1d;
  131. border-radius:3px;
  132. font-size:10px;
  133. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  134. -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  135. box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  136. }
  137.  
  138. ::-webkit-scrollbar-thumb:vertical {background-color:#f6f6f6;}
  139. ::-webkit-scrollbar-button:horizontal {background-color:#f6f6f6;}
  140. ::-webkit-scrollbar {background-color:transparent; width:1px;}
  141.  
  142. /* --- basics --- */
  143.  
  144. body {
  145. position:absolute;
  146. top: 0; bottom: 0; left: 0; right: 0;
  147. height: 100%;
  148. background-color:#f6f6f6; /* if you change the background colour, make sure you also change the borders around the images! */
  149. color:#1d1d1d;
  150. font-family: 'DM Sans', sans-serif;
  151. font-size:12px;
  152. line-height:18px;
  153. font-weight:300;
  154. text-align:justify;
  155. margin:0;
  156. }
  157.  
  158. a {
  159. color:#1d1d1d;
  160. text-decoration:none;
  161. transition-duration: 0.5s;
  162. }
  163.  
  164. a:hover {
  165. color:#1d1d1d;
  166. text-decoration:none;
  167. }
  168.  
  169. p a {box-shadow:#ba9e91 0px -2px 0px inset;}
  170. p a:hover {box-shadow:#ba9e91 0px -17px 0px inset;}
  171.  
  172. img {
  173. border:none;
  174. text-decoration:none;
  175. }
  176.  
  177. b, strong, bold {
  178. color:#a2261a;
  179. font-weight:500;
  180. font-family: 'DM Serif Display', serif;
  181. font-size:120%;
  182. }
  183.  
  184. i, em, italic {
  185. color:#a2261a;
  186. }
  187.  
  188. u {
  189. text-decoration:none;
  190. border-bottom:1px solid #a2261a;
  191. }
  192.  
  193. s, strike {
  194. text-decoration-color:#a2261a;
  195. }
  196.  
  197. fl {
  198. display:block;
  199. float:left;
  200. padding:8px 12px;
  201. background:#a2261a;
  202. color:#fff;
  203. font-weight:700;
  204. text-transform:uppercase;
  205. font-size:14px;
  206. margin:0px 10px 0px 0px;
  207. }
  208.  
  209. /* --- headers --- */
  210.  
  211. h1 {
  212. font-weight:300;
  213. color:#a2261a;
  214. margin:0px;
  215. line-height:22px;
  216. padding-left:10px;
  217. border-left:5px solid #a4c1c7;
  218. font-family: 'DM Serif Display', serif;
  219. }
  220.  
  221. h2 {
  222. font-weight:300;
  223. text-align:center;
  224. font-family: 'DM Serif Display', serif;
  225. font-size:24px;
  226. color:#a4c1c7;
  227. background-color:#f6f6f6;
  228. line-height:28px;
  229. padding:5px;
  230. margin:0px;
  231. }
  232.  
  233. h3 {
  234. font-weight:700;
  235. text-transform:uppercase;
  236. letter-spacing:0.5px;
  237. word-spacing:1px;
  238. font-size:10px;
  239. margin:5px 0px;
  240. text-align:center;
  241. color:#b29790;
  242. }
  243.  
  244. /* --- container --- */
  245.  
  246. .container {
  247. position:absolute;
  248. margin-top:-300px;
  249. margin-left:-500px;
  250. top:50%;
  251. left:50%;
  252. width:1000px;
  253. height:600px;
  254. }
  255.  
  256. /* --- navigation --- */
  257.  
  258. .nav {
  259. position:absolute;
  260. z-index:99999;
  261. left:300px;
  262. top:0px;
  263. width:400px;
  264. height:40px;
  265. text-align:right;
  266. box-sizing:border-box;
  267. padding:0px;
  268. text-align:center;
  269. }
  270.  
  271. .nav a {
  272. display:inline-block;
  273. width:auto;
  274. height:40px;
  275. line-height:40px;
  276. text-align:center;
  277. font-size:14px;
  278. margin:0px 10px;
  279. color:#a2261a;
  280. letter-spacing:1px;
  281. font-weight:500;
  282. }
  283.  
  284. .nav a:hover {
  285. font-style:italic;
  286. }
  287.  
  288. .nav .active {
  289. font-style:italic;
  290. }
  291.  
  292. /* --- images --- */
  293.  
  294. .mb-img {
  295. position:absolute;
  296. background-position:center center;
  297. background-repeat:no-repeat;
  298. background-size:cover;
  299. }
  300.  
  301. .img-1 {
  302. z-index:10;
  303. width:220px;
  304. height:320px;
  305. top:110px;
  306. left:0px;
  307. }
  308.  
  309. .img-2 {
  310. z-index:20;
  311. width:300px;
  312. height:200px;
  313. top:380px;
  314. left:40px;
  315. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  316. }
  317.  
  318. .img-3 {
  319. z-index:40;
  320. width:220px;
  321. height:200px;
  322. top:0px;
  323. left:700px;
  324. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  325. }
  326.  
  327. .img-4 {
  328. z-index:30;
  329. width:240px;
  330. height:320px;
  331. top:150px;
  332. left:760px;
  333. }
  334.  
  335. .img-5 {
  336. z-index:50;
  337. width:130px;
  338. height:130px;
  339. top:260px;
  340. left:150px;
  341. border-radius:100px;
  342. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  343. }
  344.  
  345. /* --- navigation --- */
  346.  
  347. .icon-nav {
  348. position:absolute;
  349. z-index:999;
  350. left:710px;
  351. top:210px;
  352. width:40px;
  353. height:330px;
  354. text-align:center;
  355. box-sizing:border-box;
  356. background-color:transparent;
  357. }
  358.  
  359. .icon-nav a {
  360. display:block;
  361. width:20px;
  362. height:20px;
  363. font-size:14px;
  364. line-height:20px;
  365. box-sizing:border-box;
  366. padding:3px;
  367. text-align:center;
  368. margin:20px 10px;
  369. border-radius:3px;
  370. color:#ba9e91;
  371. }
  372.  
  373.  
  374. /* --- extras --- */
  375.  
  376. .tape {
  377. position:absolute;
  378. z-index:99;
  379. width:90px;
  380. height:25px;
  381. top:360px;
  382. left:10px;
  383. background-color:#cad3d8; /* change the colour of the tape on the bottom left here */
  384. opacity:0.7;
  385. transform:rotate(35deg);
  386. }
  387.  
  388. .tape-2 {
  389. position:absolute;
  390. z-index:99;
  391. width:110px;
  392. height:30px;
  393. top:450px;
  394. left:930px;
  395. background-color:#a2261a; /* change the colour of the tape on the bottom right here */
  396. opacity:0.7;
  397. transform:rotate(-30deg);
  398. }
  399.  
  400. @font-face { font-family: "zerocal"; src: url('https://dl.dropbox.com/s/kz5u5dwcjprsg2c/Zerocalcare%20Blackletter%20copy.ttf'); format("truetype");}
  401.  
  402. .quote {
  403. position:absolute;
  404. z-index:99;
  405. width:200px;
  406. height:auto;
  407. top:90px;
  408. left:90px;
  409. transform:rotate(10deg);
  410. font-family: "zerocal";
  411. font-size:40px;
  412. line-height:30px;
  413. text-align:center;
  414. color:#a4c1c7; /* change the colour of the quote here */
  415. }
  416.  
  417. /* --- tabs --- */
  418.  
  419. .tab-bio, .tab-social {
  420. display:none;
  421. }
  422.  
  423. /* --- stats --- */
  424.  
  425. .stats {
  426. position:absolute;
  427. z-index:100;
  428. top:50px;
  429. left:300px;
  430. width:400px;
  431. height:500px;
  432. background-color:#fff;
  433. box-sizing:border-box;
  434. border:10px solid #fff;
  435. outline:10px solid #f6f6f6;
  436. overflow:auto;
  437. padding:10px;
  438. }
  439.  
  440. .stats-social h2 {
  441. padding:0px;
  442. margin-top:-30px;
  443. margin-bottom:-10px;
  444. background-color:transparent;
  445. }
  446.  
  447. .stats-social blockquote {
  448. text-align:center;
  449. margin-bottom:20px;
  450. }
  451.  
  452. .social-header {
  453. position:relative;
  454. top:10px;
  455. left:0px;
  456. width:360px;
  457. height:140px;
  458. background-size:cover;
  459. background-position:center bottom;
  460. }
  461.  
  462. .social-icon {
  463. position:relative;
  464. top:-40px;
  465. left:130px;
  466. width:80px;
  467. height:80px;
  468. border-radius:100px;
  469. border:10px solid #ffffff;
  470. background-size:cover;
  471. background-position:center center;
  472. }
  473.  
  474. .social-media {
  475. float:left;
  476. width:110px;
  477. height:110px;
  478. margin:5px 4px 5px 5px;
  479. background-color:#f6f6f6;
  480. background-size:cover;
  481. background-position:center center;
  482. }
  483.  
  484. /* --- credit --- */
  485.  
  486. .credit a {
  487. position:fixed;
  488. font-size:14px;
  489. right:10px;
  490. bottom:10px;
  491. text-align:center;
  492. width:15px;
  493. height:15px;
  494. line-height:15px;
  495. color:#a2261a;
  496. }
  497.  
  498.  
  499. </style>
  500. </head>
  501. <body>
  502.  
  503. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  504.  
  505.  
  506. <div class="container">
  507.  
  508. <!-- start of navigation -->
  509.  
  510. <div class="nav">
  511. <a href="#tab1" class="active">statistics</a>
  512. <a href="#tab2">biography</a>
  513. <a href="#tab3">social</a>
  514. </div>
  515.  
  516. <!-- images -->
  517. <!-- change the images here! replace YOUR_URL_HERE with the url of your image. make sure you keep the ' ' around the url! -->
  518.  
  519. <!-- top left -->
  520. <div class="mb-img img-1" style="background-image:url('YOUR_URL_HERE');"></div>
  521.  
  522. <!-- bottom left -->
  523. <div class="mb-img img-2" style="background-image:url('YOUR_URL_HERE');"></div>
  524.  
  525. <!-- top right -->
  526. <div class="mb-img img-3" style="background-image:url('YOUR_URL_HERE');"></div>
  527.  
  528. <!-- bottom right -->
  529. <div class="mb-img img-4" style="background-image:url('YOUR_URL_HERE');"></div>
  530.  
  531. <!-- circle -->
  532. <div class="mb-img img-5" style="background-image:url('YOUR_URL_HERE');"></div>
  533.  
  534. <!-- navigation -->
  535.  
  536. <div class="icon-nav">
  537. <a href="/" title="link one">
  538. <span class="sf sf-balloons"></span>
  539. </a>
  540. <a href="/" title="link two">
  541. <span class="sf sf-bee"></span>
  542. </a>
  543. <a href="/" title="link three">
  544. <span class="sf sf-duck"></span>
  545. </a>
  546. <a href="/" title="link four">
  547. <span class="sf sf-band-aid"></span>
  548. </a>
  549. <a href="/" title="link five">
  550. <span class="sf sf-jupiter"></span>
  551. </a>
  552. <a href="/" title="link six">
  553. <span class="sf sf-orange"></span>
  554. </a>
  555. <a href="/" title="link seven">
  556. <span class="sf sf-gaming-controller"></span>
  557. </a>
  558. <a href="/" title="link eight">
  559. <span class="sf sf-feather"></span>
  560. </a>
  561. </div>
  562.  
  563. <!-- extras -->
  564.  
  565. <div class="tape"></div>
  566. <div class="tape-2"></div>
  567.  
  568. <div class="quote">your quote here</div>
  569.  
  570. <div class="tabs">
  571.  
  572. <!---- start of statistics tab ---->
  573.  
  574. <div id="tab1" class="tab tab-stats active">
  575.  
  576. <div class="stats">
  577. <h1>statistics</h1>
  578.  
  579. <br>
  580.  
  581. <h3>basics</h3>
  582.  
  583. <br>
  584.  
  585. <b>name</b>
  586. <br>
  587. full name
  588.  
  589. <br><br>
  590.  
  591. <b>age</b>
  592. <br>
  593. number
  594.  
  595. <br><br>
  596.  
  597. <b>gender & pronouns</b>
  598. <br>
  599. cis female, she/her
  600.  
  601. <br><br>
  602.  
  603. <b>faceclaim</b>
  604. <br>
  605. actress
  606.  
  607. <br><br>
  608.  
  609. <b>occupation</b>
  610. <br>
  611. normal text
  612.  
  613. <br><br>
  614.  
  615. <b>location</b>
  616. <br>
  617. normal text
  618.  
  619. <br><br>
  620.  
  621. <h3>appearance</h3>
  622.  
  623. <b>title</b>
  624. <br>
  625. normal text
  626.  
  627. <br><br>
  628.  
  629. <b>title</b>
  630. <br>
  631. normal text
  632.  
  633. <br><br>
  634.  
  635. <b>title</b>
  636. <br>
  637. normal text
  638.  
  639. <br><br>
  640.  
  641. <b>title</b>
  642. <br>
  643. normal text
  644.  
  645. <h3>connections</h3>
  646.  
  647. <b>title</b>
  648. <br>
  649. normal text
  650.  
  651. <br><br>
  652.  
  653. <b>title</b>
  654. <br>
  655. normal text
  656.  
  657. <br><br>
  658.  
  659. </div>
  660.  
  661. </div>
  662.  
  663. <!---- start of biography tab ---->
  664.  
  665. <div id="tab2" class="tab tab-bio">
  666. <div class="stats">
  667. <h1>biography</h1>
  668. <br>
  669. <blockquote>
  670. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum posuere neque, eget euismod enim elementum ac. Duis quis egestas est, sit amet interdum purus. Vestibulum at condimentum dolor, quis bibendum leo.</p>
  671. </blockquote>
  672.  
  673. <h2>chapter one</h2>
  674. <h3>a quote or subtitle in here</h3>
  675.  
  676. <p><fl>P</fl>raesent quam odio, tempus in finibus vitae, rutrum eu metus. Sed sollicitudin at nibh id aliquam. Morbi elementum ligula elementum cursus feugiat. Pellentesque ut augue at ligula fermentum cursus vel vitae risus. Sed semper purus vel maximus mattis. Donec dignissim semper lectus, at hendrerit risus interdum at. <b>Mauris eu enim</b> eu dui porta sagittis. Aliquam mauris nibh, accumsan faucibus aliquet quis, accumsan ac tellus. Vestibulum accumsan sed sem vel aliquam. Vivamus non dui a lectus facilisis efficitur vel at risus. Aliquam finibus tortor nec mauris tincidunt, id interdum massa blandit. Duis ut neque eget ipsum egestas suscipit sit amet sit amet est.</p>
  677.  
  678. <p>Aliquam erat volutpat. Vivamus pharetra lobortis leo, sagittis ultrices mauris blandit ac. <i>Integer sollicitudin faucibus neque,</i> non sodales nibh euismod ac. Sed fringilla pharetra nibh. Pellentesque tincidunt dui molestie mi consequat, quis scelerisque ante pretium. Aliquam porta ultrices tempor. Sed venenatis egestas est, congue accumsan nisl elementum at. Vestibulum iaculis suscipit urna, at tempor quam vulputate sed.</p>
  679.  
  680. <h2>chapter two</h2>
  681. <h3>a quote or subtitle in here</h3>
  682.  
  683. <p><fl>L</fl>orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum posuere neque, eget euismod enim elementum ac. Duis quis egestas est, sit amet interdum purus. Vestibulum at condimentum dolor, quis bibendum leo.Praesent quam odio, tempus in finibus vitae, rutrum eu metus. Sed sollicitudin at nibh id aliquam. Morbi elementum ligula elementum cursus feugiat.</p>
  684.  
  685. <blockquote>
  686. <p><b>&ldquo;</b> Pellentesque ut augue at ligula fermentum cursus vel vitae risus. Sed semper purus vel maximus mattis. Donec dignissim semper lectus, at hendrerit risus interdum at. Mauris eu enim eu dui porta sagittis. Aliquam mauris nibh, accumsan faucibus aliquet quis, accumsan ac tellus. Vestibulum accumsan sed sem vel aliquam. Vivamus non dui a lectus facilisis efficitur vel at risus. Aliquam finibus tortor nec mauris tincidunt, id interdum massa blandit. Duis ut neque eget ipsum egestas suscipit sit amet sit amet est. <b>&rdquo;</b></p>
  687. </blockquote>
  688.  
  689. <p>Aliquam erat volutpat. Vivamus pharetra lobortis leo, sagittis ultrices mauris blandit ac. Integer sollicitudin faucibus neque, non sodales nibh euismod ac. Sed fringilla pharetra nibh. Pellentesque tincidunt dui molestie mi consequat, quis scelerisque ante pretium. Aliquam porta ultrices tempor.</p>
  690.  
  691. <p>Sed venenatis egestas est, congue accumsan nisl elementum at. Vestibulum iaculis suscipit urna, at tempor quam vulputate sed.</p>
  692. </div>
  693.  
  694. </div>
  695.  
  696. <!---- start of social tab ---->
  697.  
  698. <div id="tab3" class="tab tab-social">
  699. <div class="stats stats-social">
  700. <h1>social</h1>
  701.  
  702. <div class="social-header" style="background-image:url('YOUR_URL_HERE');"></div>
  703. <div class="social-icon" style="background-image:url('YOUR_URL_HERE');"></div>
  704.  
  705. <h2>first last</h2>
  706. <blockquote><p>
  707. icons by <a href="https://pansdora.tumblr.com/icons">pansdora</a>. header by <a href="https://tywvin.tumblr.com/headers">tywvin</a>.
  708. </p></blockquote>
  709.  
  710. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  711. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  712. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  713.  
  714. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  715. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  716. <div class="social-media" style="background-image:url('YOUR_URL_HERE');"></div>
  717.  
  718. </div>
  719. </div>
  720.  
  721. </div> <!--- close of tabs --->
  722.  
  723. </div> <!-- end of .container -->
  724.  
  725.  
  726. <!-- credit -- do not touch this -->
  727. <div class="credit"><a class="sf sf-ship" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  728.  
  729. </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!