glenthemes

About Page [04]: Kuebiko

Jul 7th, 2018 (edited)
5,199
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-----------------------------------------------------------------------
  2. About Page [04]: Kuebiko
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/07/07
  6. Re-release: 2020/08/01
  7. Last updated: 2021/01/20
  8.  
  9. TERMS OF USE:
  10. 1) Do not remove the page credit.
  11. 2) Do not repost/redistribute my themes.
  12. 3) Do not take parts of the code and use it as your own.
  13. 4) Do not use my themes as a base code.
  14. 5) Do not mix my themes together.
  15.  
  16. Customization pointers:
  17. ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ = places to edit
  18. ------------------------------------------------------------------------>
  19.  
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  22.  
  23. <head>
  24.  
  25. <title>{Title}</title>
  26.  
  27. <link rel="shortcut icon" href="{Favicon}">
  28.  
  29. <!--------------------JAVASCRIPTS-------------------->
  30. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  31. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("a[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:50,
  38. tip_fade_speed:0,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <link href="//fonts.googleapis.com/css?family=Darker+Grotesque:400,500|Padauk|Recursive|Monda|Libre+Franklin" rel="stylesheet">
  46.  
  47. <script src="//dl.dropbox.com/s/7p5jxk87jnqm91w/kuebiko.js"></script>
  48.  
  49. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  50.  
  51. <!-------------------------------------------------------------------->
  52.  
  53. <style type="text/css">
  54.  
  55. /*--------------------TOOLTIPS--------------------*/
  56. #s-m-t-tooltip {
  57. padding:7px 10px;
  58. margin:22px;
  59. max-width:var(--BioText-Width);
  60. background-color:var(--Tooltips-BG);
  61. font-family:padauk;
  62. font-size:var(--Tooltips-Font-Size);
  63. text-transform:uppercase;
  64. letter-spacing:1.3px;
  65. color:var(--Tooltips-Text);
  66. line-height:1.69em;
  67. z-index:99;
  68. }
  69.  
  70. /*--------------------TUMBLR CONTROLS--------------------*/
  71. iframe#tumblr_controls, .iframe-controls--desktop {
  72. top:7px!important;
  73. right:7px!important;
  74. position:fixed!important;
  75.  
  76. transform:scale(0.8,0.8);
  77. -webkit-transform:scale(0.8,0.8);
  78. -moz-transform:scale(0.8,0.8);
  79. -o-transform:scale(0.8,0.8);
  80. -ms-transform:scale(0.8,0.8);
  81.  
  82. transform-origin:100% 0;
  83. -webkit-transform-origin:100% 0;
  84. -moz-transform-origin:100% 0;
  85. -o-transform-origin:100% 0;
  86. -ms-transform-origin:100% 0;
  87. z-index:999999!important;
  88. }
  89.  
  90. /*--------------------TEXT HIGHLIGHT--------------------*/
  91. ::selection {
  92. background:var(--Text-On-Highlight-BG);
  93. }
  94.  
  95. ::-moz-selection {
  96. background:var(--Text-On-Highlight-BG);
  97. }
  98.  
  99. /*--------------------BASICS--------------------*/
  100. body {
  101. background-attachment:fixed;
  102. line-height:1.6em;
  103. font-size:12px;
  104. overflow:hidden;
  105. }
  106.  
  107. a {
  108. color:var(--Links);
  109. text-decoration:none;
  110. -webkit-transition: all 0.269s ease-in-out;
  111. -moz-transition: all 0.269s ease-in-out;
  112. -o-transition: all 0.269s ease-in-out;
  113. }
  114.  
  115. pre, code {
  116. white-space:pre-wrap;
  117. }
  118.  
  119. img {vertical-align:middle;}
  120.  
  121. * {
  122. /*-------- CURSOR --------*/
  123. /*-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ --*/
  124.  
  125. /* to remove the custom cursor, delete the line below */
  126.  
  127. cursor:url(//dl.dropbox.com/s/1hxwbc6vc8tidwb/nier_cursor_5.png), auto;
  128. }
  129.  
  130. /*------------ CUSTOMIZATION OPTIONS ------------*/
  131. /*-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ --*/
  132. /* all colors, sizes etc are edited inside :root
  133. with the exception of the background color & image, edited below: */
  134.  
  135. body {
  136. background-color:#fff; /* background color */
  137.  
  138. /* background image */
  139. /* put the image url between the brackets */
  140. /* do not remove the brackets or semicolon at the end */
  141. background-image:url(//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/qAaoy90vm/tumblr_static_c7ybwm57sv4k0s0kswccgoss0.png);
  142.  
  143. /* if you have a large full-screen background, change
  144. "repeat" to "no-repeat" */
  145. background-repeat:repeat;
  146. }
  147.  
  148. :root {
  149. /*-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ --*/
  150.  
  151. /*------- TOP LINKS -------*/
  152. --TopLinks-Padding:12px;
  153. --TopLinks-BG:#fbfbfb;
  154. --TopLinks-Border:#f2f2f2;
  155. --TopLinks-Color:#333;
  156. --TopLinks-Font-Size:12px;
  157.  
  158. --TopLinks-BG-On-Hover:#121212;
  159. --TopLinks-Border-On-Hover:#121212;
  160. --TopLinks-Color-On-Hover:#eee;
  161.  
  162. --TopLinks-Spacing:15px;
  163.  
  164. /*------- MUSIC PLAYER -------*/
  165. --Music-Player-BG:#fbfbfb;
  166. --Music-Player-Border:#f2f2f2;
  167.  
  168. --Music-Controls-Color:#333;
  169. --Music-Controls-Size:12px;
  170.  
  171. --TopLinks-Bottom-Gap:15px;
  172.  
  173. /*------- MAIN CONTAINER -------*/
  174. --Container-BG:#fbfbfb;
  175. --Container-Border:#f2f2f2;
  176. --Container-Padding:22px;
  177.  
  178. --BioText-Width:420px;
  179.  
  180. /*------- TITLE -------*/
  181. --Title-Font-Size:18px;
  182. --Title-Color:#222;
  183. --Title-Shadow-Color:#e4e4e4;
  184.  
  185. /*------- SUBTITLE -------*/
  186. --Subtitle-Top-Gap:1px;
  187. --Subtitle-Lines-Color:#777;
  188. --Subtitle-Color:#666;
  189. --Subtitle-Font-Size:11px;
  190. --Subtitle-Bottom-Gap:14px;
  191.  
  192. /*------- BIO TEXT -------*/
  193. --BioText-Font-Size:12px;
  194. --BioText-Color:#666;
  195. --BioText-Line-Height:1.85;
  196.  
  197. --Links:#000;
  198. --Links-Bottom-Border:#ddd;
  199.  
  200. --Links-On-Hover:#000;
  201. --Links-Bottom-Border-On-Hover:#ddd;
  202.  
  203. --Scrollbar-Thumb:#999;
  204. --Scrollbar-Track:#f0f0f0;
  205.  
  206. /*------- QUOTE -------*/
  207. --Quote-Section-Top-Gap:16px;
  208. --Quotation-Mark-Size:30px;
  209. --Quotation-Mark-Color:#151515;
  210. --Quote-Border-Color:#151515;
  211.  
  212. --Quote-Text-Left-Gap:15px;
  213. --Quote-Text-Color:#555;
  214. --Quote-Text-Font-Size:12px;
  215. --Quote-Line-Height:2.2;
  216.  
  217. --Quote-Source-Line:#aaa;
  218. --Quote-Source-Line-Width:20px;
  219. --Quote-Source-Line-Spacing:8px;
  220. --Quote-Source-Font-Size:10px;
  221. --Quote-Source-Color:#888;
  222.  
  223. /*------- CUSTOM LINKS -------*/
  224. --CustomLinks-Top-Gap:16px;
  225. --CustomLinks-Per-Row:4;
  226. --CustomLinks-Padding:9px;
  227.  
  228. --CustomLinks-BG:#fafafa;
  229. --CustomLinks-Border-Color:#f2f2f2;
  230. --CustomLinks-Color:#222;
  231.  
  232. --CustomLinks-BG-On-Hover:#121212;
  233. --CustomLinks-Border-On-Hover:#121212;
  234. --CustomLinks-Color-On-Hover:#eee;
  235.  
  236. --CustomLinks-Font-Size:9px;
  237. --CustomLinks-Spacing:4px;
  238.  
  239. --Gutter-Width:25px; /* space between sidebar and text */
  240.  
  241. /*------- RIGHT SIDEBAR IMAGE -------*/
  242. --Sidebar-Image-Width:300px;
  243. --Sidebar-Image-Height:420px;
  244.  
  245. /*------- MISC/OTHER -------*/
  246. --Tooltips-BG:#151515;
  247. --Tooltips-Text:#eee;
  248. --Tooltips-Font-Size:10px;
  249. --Text-On-Highlight-BG:#f2f2f2;
  250. }
  251.  
  252. /*---------- OUTER "CONTAINER" ----------*/
  253. #horizontal-a {
  254. position:fixed;
  255. top:0;left:0;right:0;
  256. margin:0 auto;
  257. height:100vh;
  258. text-align:center;
  259. z-index:-1;
  260. }
  261.  
  262. #horizontal-b {
  263. display:inline-block;
  264. }
  265.  
  266. #vertigo-a {
  267. height:100vh;
  268. display:table;
  269. }
  270.  
  271. #vertigo-b {
  272. display:table-cell;
  273. vertical-align:middle;
  274. }
  275.  
  276. #enigma {
  277. text-align:left;
  278. }
  279.  
  280. /*---------- TOP BOXES ----------*/
  281. #topstuff {
  282. display:flex;
  283. align-items:center;
  284. margin-bottom:var(--TopLinks-Bottom-Gap);
  285. }
  286.  
  287. /*---------- TOP LINKS ----------*/
  288. .toplinks {
  289. display:flex;
  290. align-items:center;
  291. }
  292.  
  293. .toplinks a {
  294. margin-right:var(--TopLinks-Spacing);
  295. padding:var(--TopLinks-Padding) calc(var(--TopLinks-Padding) * 1.69);
  296. background:var(--TopLinks-BG);
  297. border:1px solid var(--TopLinks-Border);
  298. font-family:darker grotesque;
  299. font-weight:500;
  300. font-size:var(--TopLinks-Font-Size);
  301. text-transform:uppercase;
  302. letter-spacing:2px;
  303. color:var(--TopLinks-Color);
  304. line-height:1em;
  305. }
  306.  
  307. .toplinks a:hover {
  308. background:var(--TopLinks-BG-On-Hover);
  309. border-color:var(--TopLinks-Border-On-Hover);
  310. color:var(--TopLinks-Color-On-Hover);
  311. }
  312.  
  313. /*---------- MUSIC PLAYER ----------*/
  314. .la-musique {
  315. width:calc((var(--TopLinks-Padding) * 2) + var(--TopLinks-Font-Size) + 1px);
  316. height:calc((var(--TopLinks-Padding) * 2) + var(--TopLinks-Font-Size) + 1px);
  317. }
  318.  
  319. .parmesan {
  320. width:100%;
  321. height:100%;
  322. background:var(--Music-Player-BG);
  323. border:1px solid var(--Music-Player-Border);
  324. box-sizing:border-box;
  325. }
  326.  
  327. .music-controls {
  328. display:flex;
  329. align-items:center;
  330. justify-content:center;
  331. width:100%;
  332. height:100%;
  333. user-select:none;
  334. }
  335.  
  336. .playy svg {
  337. width:var(--Music-Controls-Size);
  338. height:var(--Music-Controls-Size);
  339. color:var(--Music-Controls-Color);
  340. opacity:0.7;
  341. }
  342.  
  343. .pausee {
  344. display:none;
  345. margin-top:1px;
  346. font-size:calc(var(--Music-Controls-Size) - 3px);
  347. color:var(--Music-Controls-Color);
  348. line-height:1em;
  349. }
  350.  
  351. .beff {display:none;}
  352. .aff {display:block;}
  353.  
  354. /*---------- MAIN CONTAINER ----------*/
  355. #iconteven {
  356. padding:var(--Container-Padding);
  357. background:var(--Container-BG);
  358. border:1px solid var(--Container-Border);
  359. display:table;
  360. }
  361.  
  362. /*---------- LEFTSIDE ----------*/
  363. #mainleft {
  364. display:table-cell;
  365. vertical-align:top;
  366. width:var(--BioText-Width);
  367. padding-right:var(--Gutter-Width);
  368. }
  369.  
  370. .title {
  371. font-family:darker grotesque;
  372. font-weight:400;
  373. font-size:var(--Title-Font-Size);
  374. text-transform:uppercase;
  375. letter-spacing:2.5px;
  376. color:var(--Title-Color);
  377. text-shadow:2px 2px 0px var(--Title-Shadow-Color);
  378. line-height:1.69em;
  379. }
  380.  
  381. .subtitle {
  382. position:relative;
  383. margin-top:calc(var(--Subtitle-Top-Gap) + (var(--Subtitle-Font-Size) / 2));
  384. margin-bottom:var(--Subtitle-Bottom-Gap);
  385. margin-left:calc(var(--Subtitle-Font-Size) * 2);
  386. font-family:padauk;
  387. font-size:var(--Subtitle-Font-Size);
  388. text-transform:uppercase;
  389. letter-spacing:2px;
  390. color:var(--Subtitle-Color);
  391. line-height:1em;
  392. }
  393.  
  394. .subtitle:before {
  395. content:"";
  396. position:absolute;
  397. margin-top:calc(var(--Subtitle-Font-Size) * -.5);
  398. margin-left:calc(var(--Subtitle-Font-Size) * -2);
  399. width:var(--Subtitle-Font-Size);
  400. height:var(--Subtitle-Font-Size);
  401. border-left:1px solid var(--Subtitle-Lines-Color);
  402. border-bottom:1px solid var(--Subtitle-Lines-Color);
  403. }
  404.  
  405. /*---------- BIO TEXT ----------*/
  406. .bio-text {
  407. width:calc(100% + 5px);
  408. height:0px; /* won't actually be 0 */
  409. overflow:hidden;
  410. }
  411.  
  412. .the-text {
  413. padding-top:2px;
  414. padding-right:10px;
  415. max-height:100%;
  416. overflow-y:auto;
  417. font-family:libre franklin;
  418. font-size:var(--BioText-Font-Size);
  419. letter-spacing:0.3px;
  420. color:var(--BioText-Color);
  421. line-height:var(--BioText-Line-Height);
  422. text-align:justify;
  423. }
  424.  
  425. .the-text a {
  426. padding-bottom:2.5px;
  427. border-bottom:1px solid var(--Links-Bottom-Border);
  428. color:var(--Links);
  429. }
  430.  
  431. .the-text a:hover {
  432. border-color:var(--Links-Bottom-Border-On-Hover);
  433. color:var(--Links-On-Hover);
  434. }
  435.  
  436.  
  437. .the-text::-webkit-scrollbar {
  438. width:13px;
  439. height:13px;
  440. }
  441.  
  442. .the-text::-webkit-scrollbar-thumb {
  443. background-color:var(--Scrollbar-Thumb);
  444. border:6px solid var(--Container-BG);
  445. }
  446.  
  447. .the-text::-webkit-scrollbar-track {
  448. background:var(--Scrollbar-Track);
  449. border:6px solid var(--Container-BG);
  450. }
  451.  
  452. .the-text p:last-child {margin-bottom:0;}
  453.  
  454. /*---------- QUOTE ----------*/
  455. .quote-sect {
  456. margin-top:var(--Quote-Section-Top-Gap);
  457. position:relative;
  458. }
  459.  
  460. .quote-mark {
  461. position:absolute;
  462. width:var(--Quotation-Mark-Size);
  463. height:var(--Quotation-Mark-Size);
  464. background:var(--Container-BG);
  465. border-radius:100%;
  466. z-index:1;
  467. }
  468.  
  469. .quote-svg svg {
  470. }
  471.  
  472. .quote-text {
  473. display:inline-block;
  474. margin-left:calc((var(--Quotation-Mark-Size) / 2) - 1px);
  475. padding-left:calc((var(--Quotation-Mark-Size) / 2) + var(--Quote-Text-Left-Gap) + 1px);
  476. border-left:1px solid var(--Quote-Border-Color);
  477. padding-right:var(--Quote-Text-Left-Gap);
  478. font-family:recursive;
  479. font-size:var(--Quote-Text-Font-Size);
  480. color:var(--Quote-Text-Color);
  481. line-height:var(--Quote-Line-Height);
  482. text-align:left;
  483. }
  484.  
  485. .quote-text p {
  486. display:inline-block;
  487. margin-top:3px;
  488. }
  489.  
  490. .quote-text p:last-of-type {margin-bottom:-3px;}
  491.  
  492. .imdoingmybest {
  493. display:table;
  494. width:100%;
  495. }
  496.  
  497. .quote-text span {
  498. display:table-cell;
  499. width:100%;
  500. white-space:nowrap;
  501. }
  502.  
  503. .quote-source {
  504. display:table-cell;
  505. vertical-align:middle;
  506. }
  507.  
  508. .quote-source.right, .quote-source.inline {
  509. display:table;
  510. margin-left:auto;
  511. }
  512.  
  513. .ergh {
  514. position:absolute;
  515. opacity:0;
  516. }
  517.  
  518. .sausage {
  519. display:flex;
  520. align-items:center;
  521. }
  522.  
  523. .q-line {
  524. margin-right:var(--Quote-Source-Line-Spacing);
  525. width:var(--Quote-Source-Line-Width);
  526. height:1px;
  527. background:var(--Quote-Source-Line);
  528. }
  529.  
  530. .quote-source.inline .q-line {margin-top:-6px;}
  531.  
  532. .source-text {
  533. font-family:padauk;
  534. font-size:var(--Quote-Source-Font-Size);
  535. text-transform:uppercase;
  536. letter-spacing:1.5px;
  537. color:var(--Quote-Source-Color);
  538. line-height:1em;
  539. white-space:nowrap;
  540. }
  541.  
  542. .quote-source.inline .source-text {margin-top:-6px;}
  543.  
  544. /*---------- CUSTOM LINKS ----------*/
  545. .customlinks {
  546. margin-top:calc(var(--CustomLinks-Top-Gap) - var(--CustomLinks-Spacing));
  547. margin-bottom:calc(var(--CustomLinks-Spacing) * -1);
  548. margin-left:calc(var(--CustomLinks-Spacing) * -1);
  549. width:calc(100% + (var(--CustomLinks-Spacing) * 2));
  550. display:flex;
  551. flex-wrap:wrap;
  552. }
  553.  
  554. .customlinks a {
  555. display:block;
  556. margin:var(--CustomLinks-Spacing);
  557. width:calc((100% / var(--CustomLinks-Per-Row)) - (var(--CustomLinks-Spacing) * 2));
  558. box-sizing:border-box;
  559. padding:var(--CustomLinks-Padding) calc(var(--CustomLinks-Padding) * 1.5);
  560. background:var(--CustomLinks-BG);
  561. border:1px solid var(--CustomLinks-Border-Color);
  562. font-family:Monda;
  563. font-size:var(--CustomLinks-Font-Size);
  564. text-transform:uppercase;
  565. letter-spacing:1.3px;
  566. color:var(--CustomLinks-Color);
  567. line-height:1.5em;
  568. text-align:center;
  569. }
  570.  
  571. .customlinks a:hover {
  572. background:var(--CustomLinks-BG-On-Hover);
  573. border-color:var(--CustomLinks-Border-On-Hover);
  574. color:var(--CustomLinks-Color-On-Hover);
  575. }
  576.  
  577. /*---------- RIGHT SIDEBAR IMAGE ----------*/
  578. #sidebar {
  579. display:table-cell;
  580. vertical-align:top;
  581. width:var(--Sidebar-Image-Width);
  582. height:var(--Sidebar-Image-Height);
  583.  
  584. /*------- SIDEBAR IMAGE -------*/
  585. /*-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ --*/
  586. /* image url goes between brackets. do not remove brackets or semicolon */
  587.  
  588. background-image:url(//64.media.tumblr.com/13c8afc22302c8fa44a8268bdfed673f/8a31703dcece7b58-41/s1280x1920/a149e70bd96309aa7b19090bf9adfd6fe04eb7fd.jpg);
  589.  
  590. background-repeat:no-repeat;
  591. background-size:cover;
  592. background-position:center;
  593. }
  594.  
  595. </style>
  596.  
  597. </head>
  598.  
  599. <body>
  600.  
  601. <div id="horizontal-a">
  602. <div id="horizontal-b">
  603. <div id="vertigo-a">
  604. <div id="vertigo-b">
  605. <div id="enigma">
  606. <div id="topstuff">
  607.  
  608.  
  609. <!--------- TOP LINKS --------->
  610. <!-- home, ask, archive, etc -->
  611. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  612. <!-- url goes between quotation marks of href="" -->
  613.  
  614. <div class="toplinks">
  615. <a href="/">index</a>
  616. <a href="/ask">message</a>
  617. <a href="/archive">archive</a>
  618.  
  619. <!-- pls do not remove the credit, thank you! *\(^o^)-๏ผŠ -->
  620. <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  621. </div><!--end toplinks-->
  622.  
  623.  
  624.  
  625. <!--------- MUSIC PLAYER --------->
  626. <div class="la-musique">
  627. <div class="parmesan">
  628.  
  629. <!----- MUSIC TITLE ----->
  630. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  631. <!-- music title goes between quotation marks of title="''" -->
  632.  
  633. <a class="music-controls" title="'Blissful Death'">
  634. <div class="playy">
  635. <i data-feather="play"></i>
  636. </div>
  637. <div class="pausee">โŒทโŒท</div>
  638. </a>
  639. </div><!--parmesan-->
  640. </div><!--la-musique-->
  641.  
  642.  
  643. <!--------- MUSIC LINK --------->
  644. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  645. <!--
  646. HOW TO ADD YOUR OWN MUSIC: PLEASE READ:
  647. //glenthemes.tumblr.com/post/164215965424/dropbox-links
  648.  
  649. Put the finalized url between the quotation marks of src=""
  650. -->
  651.  
  652. <audio id="audio" src="//dl.dropbox.com/s/t93a12m9qr6ejdc/Blissful%20Death.mp3" type="audio"></audio>
  653.  
  654. <!--end music player-->
  655. </div><!--topstuff--><!--do not delete this line-->
  656.  
  657.  
  658.  
  659.  
  660. <div id="iconteven">
  661. <div id="mainleft">
  662.  
  663.  
  664. <!--------- TITLE & SUBTITLE --------->
  665. <div class="title">your title here</div>
  666. <div class="subtitle">your subtitle here</div>
  667.  
  668.  
  669.  
  670. <div class="bio-text">
  671. <div class="the-text">
  672.  
  673. <!--------- BIO TEXT --------->
  674. <!-- height is autoatically generated -->
  675.  
  676. Biography text goes here.
  677. <p>
  678. Supports long text. Text that's too long will overflow, and a scrollbar will be added automatically.
  679. <p>
  680. NOTE: open your page in a new tab and refresh periodically to see your changes live. the editor panel isn't always accurate (especially the height of this text space).
  681.  
  682. </div><!--do not delete this line-->
  683. </div><!--do not delete this line-->
  684.  
  685.  
  686.  
  687.  
  688. <div class="quote-sect">
  689. <div class="quote-mark">
  690. <div class="quote-svg"></div>
  691. </div>
  692. <div class="quote-text">
  693.  
  694. <!--------- A QUOTE HERE --------->
  695. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  696. <!-- do not remove the <p> & </p> -->
  697. <!-- you CAN have multiple paragraphs but personally
  698. I recommend 1-2 -->
  699.  
  700. <p>
  701.  
  702. We want our lives back, we want to get back to โ€˜normalโ€™.
  703. But life doesnโ€™t care.
  704. Now it is night again and I am waiting for
  705. the dawn tomorrow.
  706.  
  707. </p>
  708.  
  709.  
  710. <!--------- QUOTE SOURCE --------->
  711. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  712. <!--
  713. you have 3 choices for the positioning:
  714. > position="left" : under the quote, on the left.
  715. > position="right" : under the quote, on the right.
  716. > position="inline" : on the same line as the quote,
  717. on the right.
  718. -->
  719. <div class="quote-source ergh" position="inline">
  720. <div class="sausage">
  721. <div class="q-line"></div>
  722.  
  723. <!----- QUOTE SOURCE TEXT (THEIR NAME) ----->
  724. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  725.  
  726. <div class="source-text">Nayyirah Waheed</div>
  727.  
  728. </div>
  729. </div>
  730.  
  731. </div><!--quote-text-->
  732. </div><!--quote-sect-->
  733.  
  734.  
  735.  
  736.  
  737.  
  738. <!--------- CUSTOM LINKS --------->
  739. <!-- ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ๐ŸŒผ -->
  740. <!--
  741. > put the url between the quotation marks of href=""
  742.  
  743. > if your display text is too long to fit, you can change
  744. the number of links per row. scroll up and search for
  745. --CustomLinks-Per-Row
  746.  
  747. > feel free to add/delete as you want
  748. -->
  749. <div class="customlinks">
  750. <a href="">link 1</a>
  751. <a href="">link 2</a>
  752. <a href="">link 3</a>
  753. <a href="">link 4</a>
  754. <a href="">link 5</a>
  755. <a href="">link 6</a>
  756. <a href="">link 7</a>
  757. <a href="">link 8</a>
  758. </div><!--customlinks--><!--do not delete this line-->
  759. </div><!--mainleft-->
  760.  
  761.  
  762.  
  763. <!--------- RIGHT SIDEBAR IMAGE --------->
  764. <!-- not changed here. scroll up and search for #sidebar -->
  765. <div id="sidebar"></div>
  766.  
  767. </div><!--iconteven-->
  768. </div><!--enigma-->
  769. </div>
  770. </div>
  771. </div>
  772. </div>
  773.  
  774. <script>feather.replace()</script>
  775. </body>
  776.  
  777. </html>
RAW Paste Data