API tools faq
paste
glenthemes

About Page [04]: Kuebiko

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