API tools faq
paste
rollyjogered

page theme 8

rollyjogered
Jan 8th, 2022
2,298
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme 8 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. INSTRUCTIONS:
  23.  
  24. there are two places to edit.
  25. basic settings (colours, images, etc)
  26. are under 'theme options'
  27. the rest can be edited in the html
  28.  
  29. ctrl + f / cmd + f and look for:
  30.  
  31. 'theme options'
  32. 'edit html here'
  33.  
  34.  
  35. -->
  36.  
  37. <title>about page</title>
  38.  
  39. <link rel="shortcut icon" href="{Favicon}">
  40. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  41. <meta name="description" content="{MetaDescription}" />
  42.  
  43. <!-- scripts -->
  44.  
  45. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  47.  
  48. <!-- fonts -->
  49.  
  50. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  51. <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&display=swap" rel="stylesheet">
  52.  
  53. <!-- icon font -- suiomi.com/font -->
  54.  
  55. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  56.  
  57. <!-- tooltips -->
  58.  
  59. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  60.  
  61. <script>
  62. (function($){
  63. $(document).ready(function(){
  64. $("a[title]").style_my_tooltips({
  65. tip_follows_cursor:true,
  66. tip_delay_time:30,
  67. tip_fade_speed:300,
  68. attribute:"title"
  69. });
  70. });
  71. })(jQuery);
  72. </script>
  73.  
  74. <style type="text/css">
  75.  
  76. /* ---
  77.  
  78. THEME OPTIONS
  79.  
  80. --- */
  81.  
  82. :root {
  83. --background:#e4e8f2;
  84. --container:#fafafa;
  85. --text:#4f4e4e;
  86. --border:#ebebeb;
  87. --links:#c1c7c7;
  88. --accent-one:#c69380;
  89. --accent-two:#847a57;
  90.  
  91. --font-size:12px;
  92.  
  93. --background-image:url('https://64.media.tumblr.com/6cd48e7f7e3728f5c686984bff6b29e9/539c0b05217c2d54-e4/s2048x3072/7de3717c689e36d60f4a74ab2030cd042619939a.png');
  94.  
  95. --background-repeat:repeat;
  96. /* options: repeat or no-repeat */
  97.  
  98. --big-image:url('https://images.unsplash.com/photo-1585960245932-71d47d44159d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80');
  99. }
  100.  
  101. /* --- tumblr controls styling by cyantists
  102. http://cyantists.tumblr.com/tumblr_controls/hover --- */
  103.  
  104. iframe.tmblr-iframe {
  105. z-index:99999999999999!important;
  106. top:-2px!important;
  107. right:0!important;
  108. opacity:0;
  109. padding-right:38px;
  110. /* delete invert(1) from here */
  111. filter:invert(1) contrast(150%);
  112. -webkit-filter:invert(1) contrast(150%);
  113. -o-filter:invert(1) contrast(150%);
  114. -moz-filter:invert(1) contrast(150%);
  115. -ms-filter:invert(1) contrast(150%);
  116. /* to here if your blog has a dark background */
  117. transform:scale(0.65);
  118. transform-origin:100% 0;
  119. -webkit-transform:scale(0.65);
  120. -webkit-transform-origin:100% 0;
  121. -o-transform:scale(0.65);
  122. -o-transform-origin:100% 0;
  123. -moz-transform:scale(0.65);
  124. -moz-transform-origin:100% 0;
  125. -ms-transform:scale(0.65);
  126. -ms-transform-origin:100% 0;}
  127.  
  128. iframe.tmblr-iframe:hover {
  129. opacity:0.6!important;}
  130.  
  131. .hcontrols {
  132. position:fixed;
  133. top:0;
  134. right:0;
  135. z-index:999999999;}
  136.  
  137. .hcontrols svg {
  138. width:14px;
  139. height:14px;
  140. padding:9px;}
  141.  
  142. .hcontrols svg path {
  143. fill:#888888;/* change this to change the color of the icon */}
  144.  
  145. /* --- tooltips & scrollbars --- */
  146.  
  147. #s-m-t-tooltip {
  148. position:absolute;
  149. margin-top: 15px;
  150. z-index:9999;
  151. padding:3px 5px;
  152. background:var(--container);
  153. color:var(--text);
  154. border:1px solid var(--border);
  155. font-size:var(--font-size);
  156. border-radius:5px;
  157. }
  158.  
  159. ::-webkit-scrollbar-thumb {background-color:var(--accent-two);}
  160. ::-webkit-scrollbar {background-color:transparent;width:1px;height:1px;}
  161.  
  162. /* --- basics --- */
  163.  
  164. /* --- background image --- */
  165.  
  166. body {
  167. background-color:var(--background);
  168. background-image:var(--background-image);
  169. background-attachment:fixed;
  170. background-position:center center;
  171. background-repeat:var(--background-repeat);
  172. background-size:auto;
  173. color:var(--text);
  174. font-family: 'Work Sans', sans-serif;
  175. font-size:var(--font-size);
  176. line-height:calc(var(--font-size) + 4px);
  177. font-weight:300;
  178. text-align:justify;
  179. margin:0;
  180. }
  181.  
  182. a {
  183. color:var(--text);
  184. text-decoration:none;
  185. -moz-transition-duration: 0.5s;
  186. -o-transition-duration: 0.5s;
  187. -webkit-transition-duration: 0.5s;
  188. transition-duration: 0.5s;
  189. }
  190.  
  191. a:hover {
  192. color:var(--text);
  193. text-decoration:none;
  194. }
  195.  
  196. p a, .textblock a {box-shadow:var(--links) 0px -5px 0px inset;}
  197. p a:hover, .textblock a:hover {box-shadow:var(--links) 0px -11px 0px inset;}
  198.  
  199. img {
  200. border:none;
  201. text-decoration:none;
  202. }
  203.  
  204. b, strong, bold {
  205. color:var(--accent-one);
  206. font-weight:700;
  207. }
  208.  
  209. i, em, italic {
  210. color:var(--accent-two);
  211. }
  212.  
  213. u {
  214. text-decoration:none;
  215. }
  216.  
  217. .firstletter, u {
  218. display:block;
  219. float:left;
  220. padding:12px 14px;
  221. background:var(--accent-one);
  222. color:var(--container);
  223. font-weight:700;
  224. text-transform:uppercase;
  225. font-size:calc(var(--font-size) + 2px);
  226. margin:0px 10px 0px 0px;
  227. border-radius:5px;
  228. }
  229.  
  230. s, strike {
  231. text-decoration-color:var(--accent-two);
  232. }
  233.  
  234. small, sub, sup, big {
  235. font-size:var(--font-size);
  236. line-height:14px;
  237. vertical-align:baseline;
  238. }
  239.  
  240. blockquote {
  241. padding:0px 5px 0px 15px;
  242. border-left:1px solid var(--border);
  243. margin-left:5px;
  244. margin-right:0px;
  245. }
  246.  
  247. blockquote blockquote {
  248. margin-right:0px;
  249. }
  250.  
  251. pre {
  252. font-family: 'Work Sans', sans-serif;
  253. font-size:var(--font-size);
  254. text-transform:uppercase;
  255. font-weight:700;
  256. padding:10px;
  257. background-color:var(--accent-two);
  258. color:var(--container);
  259. }
  260.  
  261. pre i, pre em, pre b, pre strong, pre a {
  262. color:var(--background);
  263. }
  264.  
  265. ul {
  266. padding-left:15px;
  267. }
  268.  
  269. ul li {
  270. list-style-type:none;
  271. }
  272.  
  273. ul li:before {
  274. content: "— ";
  275. text-indent: -5px;
  276. }
  277.  
  278. /* --- header styles --- */
  279.  
  280. h1 {
  281. margin:0px 0px 20px 0px;
  282. font-weight:600;
  283. color:var(--accent-one);
  284. text-align:left;
  285. letter-spacing:1px;
  286. font-family:'Poppins', sans-serif;
  287. text-transform:lowercase;
  288. font-size:calc(var(--font-size) + 12px);
  289. }
  290.  
  291. h2 {
  292. font-weight:700;
  293. color:var(--accent-two);
  294. text-align:left;
  295. font-size:calc(var(--font-size) + 4px);
  296. }
  297.  
  298. h2 b, b h2, h2 i, i h2,
  299. h2 strong, strong h2, h2 em, em h2 {
  300. color:var(--accent-two);
  301. }
  302.  
  303. h3 {
  304. margin:0px 0px 5px 0px;
  305. font-weight:bold;
  306. color:var(--accent-one);
  307. text-align:left;
  308. font-size:calc(var(--font-size) + 6px);
  309. }
  310.  
  311. h4 {
  312. font-size:var(--font-size);
  313. letter-spacing:2px;
  314. font-weight:normal;
  315. text-transform:uppercase;
  316. text-align:left;
  317. margin:0px;
  318. }
  319.  
  320. /* --- container --- */
  321.  
  322. .container {
  323. position:absolute;
  324. margin-top:-300px;
  325. margin-left:-500px;
  326. top:50%;
  327. left:50%;
  328. width:1000px;
  329. height:600px;
  330. }
  331.  
  332. /* --- navigation --- */
  333.  
  334. .nav {
  335. position:absolute;
  336. top:20px;
  337. left:0px;
  338. width:60px;
  339. height:540px;
  340. border-radius:5px 0px 0px 5px;
  341. background-color:var(--text);
  342. border:1px solid var(--border);
  343. border-right:none;
  344. padding:20px 0px 0px 0px;
  345. text-align:center;
  346. display:flex;
  347. flex-wrap:wrap;
  348. justify-content:center;
  349. align-content:flex-start;
  350. }
  351.  
  352. .nav a {
  353. display:block;
  354. z-index:10;
  355. width:20px;
  356. height:auto;
  357. margin:0px 20px 0px 20px;
  358. padding:0px 0px 10px 0px;
  359. color:var(--accent-one);
  360. font-size:16px;
  361. border-radius:20px;
  362. background-color:var(--text);
  363. }
  364.  
  365. .nav a:nth-of-type(even) {
  366. color:var(--accent-two);
  367. }
  368.  
  369. .nav a:hover {
  370. transform:scale(1.1,1.1);
  371. }
  372.  
  373. .nav-line {
  374. position:absolute;
  375. z-index:1;
  376. top:20px;
  377. left:29.5px;
  378. height:520px;
  379. width:1px;
  380. background-color:var(--border);
  381. opacity:60%;
  382. }
  383.  
  384. /* --- image + chat --- */
  385.  
  386. .image {
  387. position:absolute;
  388. top:0px;
  389. left:61px;
  390. width:400px;
  391. height:598px;
  392. background-image:var(--big-image);
  393. background-position:center center;
  394. background-repeat:no-repeat;
  395. background-size:cover;
  396. border-radius:5px;
  397. border:1px solid var(--border);
  398. }
  399.  
  400. .chat {
  401. position:absolute;
  402. z-index:500;
  403. bottom:40px;
  404. left:40px;
  405. width:440px;
  406. height:auto;
  407. display:flex;
  408. flex-wrap:wrap;
  409. justify-content:space-between;
  410. align-content:flex-end;
  411. }
  412.  
  413. .chat-left {
  414. width:440px;
  415. height:auto;
  416. display:flex;
  417. flex-wrap:wrap;
  418. justify-content:flex-start;
  419. align-content:flex-start;
  420. }
  421.  
  422. .chat-right {
  423. width:440px;
  424. height:auto;
  425. display:flex;
  426. flex-wrap:wrap;
  427. justify-content:flex-end;
  428. align-content:flex-start;
  429. }
  430.  
  431. .chat-left-img {
  432. width:72px;
  433. height:auto;
  434. margin-right:10px;
  435. }
  436.  
  437. .chat-right-img {
  438. width:72px;
  439. height:auto;
  440. margin-left:10px;
  441. }
  442.  
  443. .chat-left-img img,
  444. .chat-right-img img {
  445. width:70px;
  446. height:70px;
  447. border-radius:40px;
  448. border:1px solid var(--border);
  449. }
  450.  
  451. .chat-left-text,
  452. .chat-right-text {
  453. width:160px;
  454. height:auto;
  455. }
  456.  
  457. .chat-left-text,
  458. .chat-left-text span {
  459. text-align:left;
  460. float:left;
  461. clear:both;
  462. }
  463.  
  464. .chat-right-text,
  465. .chat-right-text span {
  466. text-align:right;
  467. float:right;
  468. clear:both;
  469. }
  470.  
  471. .chat-left-text b,
  472. .chat-right-text b {
  473. display:block;
  474. color:var(--container);
  475. width:100%;
  476. margin-bottom:5px;
  477. }
  478.  
  479. .chat-left-text span,
  480. .chat-right-text span {
  481. display:block;
  482. width:auto;
  483. color:var(--container);
  484. padding:4px 6px;
  485. margin:1px 0px;
  486. background:rgba(155, 155, 155, 0.35);
  487. box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.37 );
  488. backdrop-filter: blur(6.0px);
  489. -webkit-backdrop-filter: blur(6.0px);
  490. border-radius: 12px;
  491. border:1px solid rgba(255, 255, 255, 0.18 );
  492. }
  493.  
  494. /* --- text area --- */
  495.  
  496. .textblock {
  497. position:absolute;
  498. top:20px;
  499. right:0px;
  500. width:456px;
  501. height:480px;
  502. border-radius:0px 5px 5px 0px;
  503. background-color:var(--container);
  504. border:1px solid var(--border);
  505. border-left:none;
  506. padding:40px;
  507. overflow:auto;
  508. display:flex;
  509. flex-wrap:wrap;
  510. justify-content:space-between;
  511. align-content:flex-start;
  512. }
  513.  
  514. .text {
  515. width:100%;
  516. height:auto;
  517. margin-top:20px;
  518. padding-top:20px;
  519. border-top:1px solid var(--border);
  520. }
  521.  
  522. .stats-left {
  523. padding-right:20px;
  524. border-right:1px solid var(--border);
  525. }
  526.  
  527. .stat {
  528. width:207.5px;
  529. height:auto;
  530. margin-bottom:5px;
  531. display:flex;
  532. justify-content:space-between;
  533. align-content:baseline;
  534. }
  535.  
  536. .stat b {
  537. max-width:97.5px;
  538. height:auto;
  539. color:var(--accent-two);
  540. font-family:'Poppins', sans-serif;
  541. font-weight:600;
  542. padding:2px 4px;
  543. margin-right:10px;
  544. text-align:left;
  545. font-size:calc(var(--font-size) + 2px);
  546. }
  547.  
  548. .stat span {
  549. max-width:100px;
  550. text-align:right;
  551. }
  552.  
  553. /* --- credit --- */
  554.  
  555. .credit a {
  556. position:fixed;
  557. font-size:14px;
  558. right:10px;
  559. bottom:10px;
  560. text-align:center;
  561. width:30px;
  562. height:30px;
  563. line-height:34px;
  564. color:var(--accent-one);
  565. background-color:var(--container);
  566. border-radius:40px;
  567. border:1px solid var(--border);
  568. }
  569.  
  570.  
  571. </style>
  572. </head>
  573. <body>
  574.  
  575. <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>
  576.  
  577.  
  578. <div class="container">
  579.  
  580. <!-- EDIT HTML HERE -->
  581.  
  582. <div class="nav">
  583. <!-- add as many links as you'd like -->
  584.  
  585. <a href="/" title="link one" class="sf sf-circle"></a>
  586. <a href="/" title="link two" class="sf sf-circle"></a>
  587. <a href="/" title="link three" class="sf sf-circle"></a>
  588. <a href="/" title="link four" class="sf sf-circle"></a>
  589.  
  590. <!-- paste new links above this line -->
  591.  
  592. <div class="nav-line"></div>
  593. </div>
  594.  
  595. <div class="image"></div>
  596.  
  597. <div class="chat">
  598.  
  599. <!-- TEXT MESSAGES
  600. you can have multiple back and forth
  601. or only have on the left side
  602. or only on the right side
  603. -->
  604.  
  605. <!-- left side texts -->
  606.  
  607. <div class="chat-left">
  608. <div class="chat-left-img">
  609. <!-- icon link here -->
  610. <img src="https://i.imgur.com/IC3V5XB.png">
  611. </div>
  612. <div class="chat-left-text">
  613. <!-- bold = texter name
  614. span = text message, new span for new text -->
  615. <b>crush 😍💘✨</b>
  616. <span>hi</span>
  617.  
  618. </div>
  619. </div>
  620.  
  621. <!-- right side texts -->
  622.  
  623. <div class="chat-right">
  624. <div class="chat-right-text">
  625. <!-- bold = texter name
  626. span = text message, new span for new text -->
  627. <b>name</b>
  628. <span>hello</span>
  629. <span>i seem to have lost my phone number</span>
  630. <span>can i have yours?</span>
  631.  
  632. </div>
  633. <div class="chat-right-img">
  634. <!-- icon link here -->
  635. <img src="https://i.imgur.com/NVAl11x.png">
  636. </div>
  637. </div>
  638.  
  639. <!-- left side texts -->
  640.  
  641. <div class="chat-left">
  642. <div class="chat-left-img">
  643. <!-- icon link here -->
  644. <img src="https://i.imgur.com/IC3V5XB.png">
  645. </div>
  646. <div class="chat-left-text">
  647. <!-- bold = texter name
  648. span = text message, new span for new text -->
  649. <b>crush 😍💘✨</b>
  650. <span>...</span>
  651. <span>we're already texting?</span>
  652.  
  653. </div>
  654. </div>
  655.  
  656. <!-- paste new text blocks between here -->
  657.  
  658.  
  659. <!-- and here -->
  660.  
  661. </div>
  662.  
  663. <div class="textblock">
  664.  
  665. <!-- STATISTICS -->
  666.  
  667. <!-- left side -->
  668.  
  669. <div class="stats stats-left">
  670.  
  671. <!-- copy & paste an entire stat block
  672. to add another stat
  673.  
  674. <div class="stat">
  675. <b>question</b>
  676. <span>answer</span>
  677. </div>
  678.  
  679. -->
  680.  
  681. <div class="stat">
  682. <b>name</b>
  683. <span>full name here</span>
  684. </div>
  685.  
  686. <div class="stat">
  687. <b>pronouns</b>
  688. <span>they/them</span>
  689. </div>
  690.  
  691. <div class="stat">
  692. <b>age</b>
  693. <span>##</span>
  694. </div>
  695.  
  696. <div class="stat">
  697. <b>occupation</b>
  698. <span>cool stuff</span>
  699. </div>
  700.  
  701. </div>
  702.  
  703. <!-- right side -->
  704.  
  705. <div class="stats stats-right">
  706.  
  707. <!-- copy & paste an entire stat block
  708. to add another stat
  709.  
  710. <div class="stat">
  711. <b>question</b>
  712. <span>answer</span>
  713. </div>
  714.  
  715. -->
  716.  
  717. <div class="stat">
  718. <b>question</b>
  719. <span>answer</span>
  720. </div>
  721.  
  722. <div class="stat">
  723. <b>lorem</b>
  724. <span>ipsum</span>
  725. </div>
  726.  
  727. <div class="stat">
  728. <b>Sed vel turpis fauci bus</b>
  729. <span>Sed ornare elit eu ultrices auctor</span>
  730. </div>
  731.  
  732. </div>
  733.  
  734. <div class="text">
  735.  
  736. <!-- TEXT BLOCK
  737. any basic html works in here -->
  738.  
  739. <u>P</u>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ante nibh, volutpat eu lorem sed, consequat accumsan est. Aenean nec imperdiet ligula. Aenean gravida justo quis ultrices gravida. Sed ornare elit eu ultrices auctor. Integer elementum tincidunt neque feugiat aliquam. <b>Pellentesque fermentum urna ipsum,</b> ac vulputate nunc porttitor in. Vivamus hendrerit dapibus ex id venenatis. Vivamus eget elementum orci. Sed vel turpis faucibus, hendrerit tellus ac, ultricies diam. Proin vel pulvinar leo. Phasellus lectus tellus, eleifend et nunc ut, ultricies lobortis leo. Integer elit elit, commodo at gravida quis, dignissim tristique lorem.
  740.  
  741. <br><br>
  742.  
  743. <img src="https://i.imgur.com/C3Izm3d.png" style="width:70px; height:70px; border-radius:5px; border:1px solid var(--border); float:right; margin-left:10px;">
  744.  
  745. Sed a turpis vel dui pretium dictum. <i>Praesent feugiat eleifend dui, sed commodo ante pellentesque sit amet.</i> Pellentesque in faucibus nibh. Suspendisse dapibus ac purus at dignissim. Duis et fringilla enim. Pellentesque ut imperdiet felis. Phasellus ac malesuada dui. Nullam faucibus mi at arcu fermentum fermentum. Fusce at diam dui. Phasellus gravida euismod lectus, in elementum arcu luctus ac. Maecenas tincidunt gravida ipsum, ut convallis nunc pulvinar ut. Morbi dictum a lacus quis tristique. Vivamus ex ligula, pulvinar et metus et, imperdiet sollicitudin nunc.
  746. <blockquote>
  747. Proin in ornare nunc. Morbi vitae lectus semper, congue ex at, rhoncus augue. Curabitur varius non diam ac fringilla. Curabitur eu hendrerit velit, eu faucibus turpis. Nullam ultrices sem vitae massa accumsan, eu egestas nunc lacinia. Aliquam erat volutpat. Morbi tincidunt quis mauris et iaculis.
  748. </blockquote>
  749.  
  750. Maecenas vestibulum diam nec magna mattis, nec viverra urna ornare. Quisque sit amet orci nec dolor sodales auctor ac laoreet dui. Aenean rutrum ut justo lacinia pulvinar. Donec in consequat quam. Aliquam eget accumsan magna. Aenean ultrices et metus id vulputate. Cras rhoncus faucibus ligula non aliquam. Quisque bibendum lacus mattis nibh viverra scelerisque. Mauris sit amet ipsum varius, feugiat nisi eget, egestas dolor. Vestibulum vitae massa sed sapien porttitor imperdiet. Donec rhoncus bibendum ultrices. Pellentesque purus lectus, maximus quis lacinia sit amet, ornare efficitur lectus.
  751. </div>
  752. </div>
  753.  
  754. </div> <!-- end of container -->
  755.  
  756. <div class="credit"><a class="sf sf-code" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  757.  
  758. </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!