glenthemes

About Page [17]: Love Letter

May 7th, 2020 (edited)
5,754
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.43 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. About Page [17]: Love Letter
  3. Made by glenthemes
  4.  
  5. Initial release: 2020/05/07
  6. Last updated: 2023/10/14
  7.  
  8. What's new:
  9. โœฑ rehosted some images
  10. โœฑ fixed inconsistent heart bullet across devices
  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>
  24. <html lang="en">
  25.  
  26. <head>
  27.  
  28. <title>{Title}</title>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32. <!--------------------JAVASCRIPTS-------------------->
  33. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  34. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  35. <script>
  36. (function($){
  37. $(document).ready(function(){
  38. $("a[title]").style_my_tooltips({
  39. tip_follows_cursor:true,
  40. tip_delay_time:50,
  41. tip_fade_speed:0,
  42. attribute:"title"
  43. });
  44. });
  45. })(jQuery);
  46. </script>
  47.  
  48. <link href="//fonts.googleapis.com/css?family=Work+Sans|Handlee|Barlow|DM+Sans|Dela+Gothic+One|Material+Icons" rel="stylesheet">
  49.  
  50. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  51.  
  52. <script src="//glenthemes.github.io/-music-/glenplayer07.js"></script>
  53.  
  54. <!-------------------------------------------------------------------->
  55.  
  56. <style type="text/css">
  57.  
  58. /*--------------------TOOLTIPS--------------------*/
  59. #s-m-t-tooltip {
  60. padding:5px 10px;
  61. margin:20px;
  62. background-color:var(--Container-Background);
  63. border:1px solid var(--Container-Border);
  64. border-radius:2px;
  65. font-family:work sans;
  66. font-size:9px;
  67. letter-spacing:0.5px;
  68. text-transform:uppercase;
  69. color:var(--Main-Text);
  70. z-index:99;
  71. max-width:40vw;
  72. }
  73.  
  74. /*--------------------TUMBLR CONTROLS--------------------*/
  75. iframe#tumblr_controls, .iframe-controls--desktop {
  76. top:calc(var(--Window-Margin) - 5px)!important;
  77. right:calc(var(--Window-Margin) - 5px)!important;
  78. position:fixed!important;
  79.  
  80. transform:scale(0.7,0.7);
  81. -webkit-transform:scale(0.7,0.7);
  82. -moz-transform:scale(0.7,0.7);
  83. -o-transform:scale(0.7,0.7);
  84. -ms-transform:scale(0.7,0.7);
  85.  
  86. transform-origin:100% 0;
  87. -webkit-transform-origin:100% 0;
  88. -moz-transform-origin:100% 0;
  89. -o-transform-origin:100% 0;
  90. -ms-transform-origin:100% 0;
  91. z-index:999999!important;
  92. }
  93.  
  94. /*--------------------TEXT HIGHLIGHT--------------------*/
  95. ::selection {
  96. color:var(--Text-Highlight);
  97. }
  98.  
  99. ::-moz-selection {
  100. color:var(--Text-Highlight);
  101. }
  102.  
  103. /*--------------------BASICS--------------------*/
  104. body {
  105. line-height:1.6em;
  106. font-size:12px;
  107. text-align:left;
  108. }
  109.  
  110. a, .bache span {
  111. text-decoration:none;
  112. -webkit-transition: all 0.4s ease-in-out;
  113. -moz-transition: all 0.4s ease-in-out;
  114. -o-transition: all 0.4s ease-in-out;
  115. }
  116.  
  117. pre, code {white-space:pre-wrap;}
  118.  
  119. img {vertical-align:middle;}
  120. a[title] > * { pointer-events:none;}
  121.  
  122. /*----------- CUSTOMIZATION OPTIONS -----------*/
  123. /*--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน--*/
  124.  
  125. body { /* BACKGROUND ASSETS */
  126. background:#000 url('//static.tumblr.com/gtjt4bo/FGVs2jdkn/roses_background.jpeg');
  127. background-attachment:fixed;
  128. background-repeat:no-repeat;
  129. background-size:cover;
  130. background-position:center;
  131. }
  132.  
  133. /* COLORS, SIZES, GAPS, ETC */
  134. /*--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน--*/
  135.  
  136. :root {
  137. /*------ CONTAINER/BOX ------*/
  138. --Container-Width:520px;
  139. --Container-Background:#121212;
  140. --Container-Border-Size:2px;
  141. --Container-Border:#413e4a;
  142. --Container-Shadow-Color:0,0,0; /* RGB value */
  143. --Container-Shadow-Size:69px;
  144. --Container-Shadow-Opacity:0.69;
  145.  
  146. --Container-Frame-Padding:25px; /* outer padding */
  147. --Container-Inner-Padding:10px;
  148.  
  149. /*------ TOP LEFT TEXT ------*/
  150. --Intro-Text-Label-Font-Size:11px;
  151. --Intro-Text-Label:#b74760;
  152. --Intro-Text-Detail-Font-Size:12px;
  153. --Intro-Text-Detail:#8a8892;
  154. --Intro-Text-Bottom-Border-Size:1px;
  155. --Intro-Text-Bottom-Border:#413e4a;
  156.  
  157. /*------ CORNER ICON / AVATAR ------*/
  158. --Icon-Size:42px;
  159. --Icon-Padding:9px;
  160.  
  161. /*------ POSTMARK WAVES ------*/
  162. --Squiggles-Size:48px;
  163. --Squiggles-Thickness:1px;
  164. --Squiggles:#413e4a;
  165. --Squiggles-Spacing:12px;
  166. --Squiggles-Right-Margin:11px;
  167.  
  168. /*------ MAIN ABOUT TEXT ------*/
  169. --Main-Text:#878c91;
  170. --Main-Text-Font-Size:12px;
  171. --Main-Text-Links:#a4a3aa;
  172. --Main-Text-Links-Bottom-Border:#35323c;
  173. --Main-Text-Heading:#a33b5a;
  174. --Main-Text-Bullet-Hearts:#b64264;
  175. --Main-Text-Padding:25px;
  176. --Scrollbar:#413e4a;
  177.  
  178. /*------ BOTTOM LEFT TEXT ------*/
  179. --Corner-Text-Font-Size:10px;
  180. --Corner-Text:#8b869a;
  181.  
  182. /*------ BOTTOM RIGHT TRIANGLE ------*/
  183. --Corner-Triangle-Size:17px;
  184. --Corner-Triangle:#413e4a;
  185.  
  186. /*------ CUSTOM LINKS [BOTTOM] ------*/
  187. --Custom-Links-Top-Gap:30px;
  188. --Custom-Links-Font-Size:10px;
  189. --Custom-Links-Text:#8a8892;
  190. --Custom-Links-Background:#100f12;
  191. --Custom-Links-Padding:9px;
  192. --Custom-Links-Bottom-Border:#413e4a;
  193.  
  194. --Custom-Links-Right-Text:#8a8892;
  195. --Custom-Links-Right-Text-Font-Size:12px;
  196.  
  197. --Custom-Links-Spacing:11px;
  198.  
  199. /*------ MUSIC PLAYER ------*/
  200. --Circle-Size:36px;
  201. --Progress-Border-Size:2px;
  202. --Progress-Empty:#090909;
  203. --Progress-Fill:#a33b5a;
  204. --Player-Background:#121212;
  205. --Play-Pause-Buttons-Size:12px;
  206. --Play-Pause-Buttons-Color:#a33b5a;
  207. --Player-Text-Margin:12px;
  208.  
  209. --Song-Name-Font-Size:9px;
  210. --Song-Name-Color:#d7597e;
  211.  
  212. --Artist-Name-Font-Size:10px;
  213. --Artist-Name-Color:#8a8892;
  214.  
  215. /*------ 'BACK TO BLOG' [TOP LEFT] ------*/
  216. --Back-Arrow-Size:17px;
  217. --Back-Arrow:#64626b;
  218. --Back-Text-Font-Size:10px;
  219. --Back-Text:#8a8892;
  220.  
  221. /*------ MISC/GENERAL/OTHER ------*/
  222. --Window-Margin:22px;
  223. --Text-Highlight:#a43f56;
  224. --Credit-Color:#706e79;
  225. }
  226.  
  227. /*------ CONTAINER ------*/
  228. #cont-h-a {
  229. position:fixed;
  230. top:0;left:0;right:0;
  231. text-align:center;
  232. z-index:-1;
  233. }
  234.  
  235. #cont-h-b {
  236. display:inline-block;
  237. }
  238.  
  239. #cont-v-a {
  240. height:100vh;
  241. display:table;
  242. }
  243.  
  244. #cont-v-b {
  245. display:table-cell;
  246. vertical-align:middle;
  247. }
  248.  
  249. .container {
  250. margin-top:calc(var(--Custom-Links-Top-Gap));
  251. transform:rotate(1.69deg);
  252. width:var(--Container-Width);
  253. background:var(--Container-Background);
  254. border-radius:3px;
  255. box-shadow:0px 0px var(--Container-Shadow-Size) 0px rgba(var(--Container-Shadow-Color),var(--Container-Shadow-Opacity));
  256. }
  257.  
  258. @-webkit-keyframes burrito {
  259. 0% {
  260. margin-top:69px;
  261. transform:rotate(3.69deg);
  262. }
  263.  
  264. 100% {
  265. margin-top:calc(var(--Custom-Links-Top-Gap));
  266. transform:rotate(1.69deg);
  267. }
  268. }
  269.  
  270. .animate-on-load {
  271. animation:burrito ease-in 1;
  272. animation-fill-mode:forwards;
  273. animation-duration:1s;
  274. }
  275.  
  276. .frame {
  277. width:calc(100% - (var(--Container-Frame-Padding) * 2));
  278. height:calc(100% - (var(--Container-Frame-Padding) * 2));
  279. padding:var(--Container-Frame-Padding);
  280. }
  281.  
  282. .border {
  283. position:relative;
  284. width:calc(100% - (var(--Container-Border-Size) * 2));
  285. height:calc(100% - (var(--Container-Border-Size) * 2));
  286. border:var(--Container-Border-Size) solid var(--Container-Border);
  287. border-radius:2px;
  288. }
  289.  
  290. /*------ TOP LEFT TEXT ------*/
  291. .intro-text {
  292. position:absolute;
  293. margin-top:var(--Container-Inner-Padding);
  294. margin-left:var(--Container-Inner-Padding);
  295. text-align:left;
  296. }
  297.  
  298. .text-row {
  299. margin-bottom:7px;
  300. padding-bottom:3px;
  301. padding-right:7px;
  302. padding-left:2px;
  303. border-bottom:var(--Intro-Text-Bottom-Border-Size) solid var(--Intro-Text-Bottom-Border);
  304. line-height:1em;
  305. }
  306.  
  307. .text-row label {
  308. margin-right:1px;
  309. font-family:handlee;
  310. font-size:var(--Intro-Text-Label-Font-Size);
  311. letter-spacing:.5px;
  312. color:var(--Intro-Text-Label);
  313. }
  314.  
  315. .text-row detail {
  316. font-family:barlow;
  317. font-size:var(--Intro-Text-Detail-Font-Size);
  318. color:var(--Intro-Text-Detail);
  319. }
  320.  
  321. /*------ CORNER IMAGE [ICON] ------*/
  322. .corner {
  323. position:absolute;
  324. margin-top:calc(var(--Container-Border-Size) * -1);
  325. right:0;margin-right:calc(var(--Container-Border-Size) * -1);
  326. border-left:calc(var(--Container-Border-Size) * 2) solid var(--Container-Background);
  327. border-bottom:calc(var(--Container-Border-Size) * 2) solid var(--Container-Background);
  328. }
  329.  
  330. .corner-icon {
  331. width:var(--Icon-Size);
  332. height:var(--Icon-Size);
  333. padding:var(--Icon-Padding);
  334. border:var(--Container-Border-Size) solid var(--Container-Border);
  335. }
  336.  
  337. /*------ SQUIGGLES ------*/
  338. .squid {
  339. position:absolute;
  340. top:0;
  341. right:0;
  342. margin-right:calc(var(--Icon-Padding) + (var(--Icon-Size) / 2) + var(--Squiggles-Right-Margin));
  343. height:calc(var(--Icon-Size) + (var(--Icon-Padding) * 2));
  344. display:table;
  345. }
  346.  
  347. .sqm {
  348. display:table-cell;
  349. vertical-align:middle;
  350. }
  351.  
  352. .squid-row {
  353. display:flex;
  354. align-items:center;
  355. height:0;
  356. margin-bottom:var(--Squiggles-Spacing);
  357. }
  358.  
  359. .squid-u {
  360. margin-top:calc(var(--Squiggles-Size) / -2);
  361. width:var(--Squiggles-Size);
  362. height:var(--Squiggles-Size);
  363. border:var(--Squiggles-Thickness) solid var(--Squiggles);
  364. border-color:transparent transparent var(--Squiggles) transparent;
  365. border-radius:0 0 calc(var(--Squiggles-Size) / 2) 50%/calc(var(--Squiggles-Size) / 2);
  366. }
  367.  
  368. .squid-n {
  369. margin-top:var(--Squiggles-Size);
  370. margin-left:calc((var(--Squiggles-Size) / 3) * -1);
  371. width:var(--Squiggles-Size);
  372. height:var(--Squiggles-Size);
  373. border:var(--Squiggles-Thickness) solid var(--Squiggles);
  374. border-color:var(--Squiggles) transparent transparent transparent;
  375. border-radius:50%/calc(var(--Squiggles-Size) / 2) calc(var(--Squiggles-Size) / 2) 0 0;
  376. }
  377.  
  378. /*------ MAIN ABOUT TEXT ------*/
  379. .main-text {
  380. margin-top:calc(var(--Icon-Size) + (var(--Icon-Padding) * 2) + (var(--Container-Border-Size) * 3));
  381. margin-bottom:calc((var(--Container-Inner-Padding) * 2) + var(--Corner-Triangle-Size));
  382. padding:var(--Main-Text-Padding);
  383. width:calc(100% - (var(--Main-Text-Padding) * 2));
  384. font-family:dm sans;
  385. font-size:var(--Main-Text-Font-Size);
  386. color:var(--Main-Text);
  387. text-align:left;
  388. line-height:1.85em;
  389. }
  390.  
  391. .scb {
  392. position:relative;
  393.  
  394. /*--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน--*/
  395. /* uncomment the following lines if your text is long */
  396. /* you can change 180px to whatever you wish */
  397.  
  398. /*
  399. padding-right:10px;
  400. max-height:180px;
  401. overflow:auto;
  402. */
  403. }
  404.  
  405. .scb::-webkit-scrollbar {
  406. width:17px;
  407. height:17px;
  408. background-color:var(--Container-Background);
  409. }
  410.  
  411. .scb::-webkit-scrollbar-thumb {
  412. border:8px solid var(--Container-Background);
  413. background-color:var(--Scrollbar);
  414. }
  415.  
  416. .main-text h1 {
  417. margin:0.5em auto;
  418. font-size:calc(var(--Main-Text-Font-Size) + 1px);
  419. text-transform:uppercase;
  420. letter-spacing:1px;
  421. color:var(--Main-Text-Heading);
  422. }
  423.  
  424. .main-text a {
  425. color:var(--Main-Text-Links);
  426. padding-bottom:1px;
  427. border-bottom:1px solid var(--Main-Text-Links-Bottom-Border);
  428. }
  429.  
  430. .main-text p:last-child {margin-bottom:0;}
  431.  
  432. .main-text right {
  433. display:block;
  434. text-align:right;
  435. }
  436.  
  437. .main-text ul:only-of-type, .main-text ol:only-of-type {
  438. margin-left:calc((var(--Main-Text-Font-Size) + 2px) * -1);
  439. margin-top:0;
  440. margin-bottom:0;
  441. }
  442.  
  443. .main-text ul {
  444. list-style:none;
  445. }
  446.  
  447. .main-text ul li:before {
  448. content:"โ™ก";
  449. position:absolute;
  450. margin-left:calc((var(--Main-Text-Font-Size) + 2px) * -1.5);
  451. font-family:"Dela Gothic One";
  452. font-size:calc(var(--Main-Text-Font-Size) + 2px);
  453. color:var(--Main-Text-Bullet-Hearts);
  454. }
  455.  
  456. /*------ CORNER TRIANGLE ------*/
  457. .tri-hol {
  458. position:absolute;
  459. bottom:0;margin-bottom:calc(var(--Container-Inner-Padding) - var(--Container-Border-Size));
  460. right:0;margin-right:calc(var(--Container-Inner-Padding) - var(--Container-Border-Size));
  461. width:var(--Corner-Triangle-Size);
  462. height:var(--Corner-Triangle-Size);
  463. }
  464.  
  465. .cheesecake {
  466. width:0;height:0;
  467. border-left:var(--Corner-Triangle-Size) solid transparent;
  468. border-bottom:var(--Corner-Triangle-Size) solid var(--Corner-Triangle);
  469. }
  470.  
  471. .cs {
  472. position:absolute;
  473. margin-top:calc(var(--Container-Border-Size) * 2);
  474. margin-right:calc(var(--Container-Border-Size) - .5px);
  475. right:0;
  476. width:0;height:0;
  477. border-left:calc(var(--Corner-Triangle-Size) - (var(--Container-Border-Size) * 3)) solid transparent;
  478. border-bottom:calc(var(--Corner-Triangle-Size) - (var(--Container-Border-Size) * 3)) solid var(--Container-Background);
  479. }
  480.  
  481. .td {
  482. position:absolute;
  483. bottom:0;
  484. right:0;
  485. width:0;height:0;
  486. border-left:calc(var(--Corner-Triangle-Size) * 0.65) solid transparent;
  487. border-bottom:calc(var(--Corner-Triangle-Size) * 0.65) solid var(--Corner-Triangle);
  488. }
  489.  
  490. .fc {
  491. position:absolute;
  492. bottom:0;margin-bottom:var(--Container-Border-Size);
  493. right:0;margin-right:calc(var(--Container-Border-Size) - .5px);
  494. width:0;height:0;
  495. border-left:calc((var(--Corner-Triangle-Size) * 0.65) - (var(--Container-Border-Size) * 3)) solid transparent;
  496. border-bottom:calc((var(--Corner-Triangle-Size) * 0.65) - (var(--Container-Border-Size) * 3)) solid var(--Container-Background);
  497. }
  498.  
  499. /*------ CORNER TEXT ------*/
  500. .corner-text {
  501. position:absolute;
  502. bottom:0;margin-bottom:var(--Container-Inner-Padding);
  503. left:0;margin-left:var(--Container-Inner-Padding);
  504. font-family:handlee;
  505. font-size:var(--Corner-Text-Font-Size);
  506. text-transform:uppercase;
  507. letter-spacing:1px;
  508. color:var(--Corner-Text);
  509. line-height:1em;
  510. }
  511.  
  512. /*------ CUSTOM LINKS ------*/
  513. .botnav {
  514. margin-top:var(--Custom-Links-Top-Gap);
  515. display:flex;
  516. align-items:center;
  517. justify-content:center;
  518. }
  519.  
  520. .botnav a {
  521. display:block;
  522. margin:0 var(--Custom-Links-Spacing);
  523. background:var(--Custom-Links-Background);
  524. padding:var(--Custom-Links-Padding);
  525. border-radius:3px;
  526. border-bottom:2px solid var(--Custom-Links-Bottom-Border);
  527. font-family:work sans;
  528. font-size:var(--Custom-Links-Font-Size);
  529. text-transform:uppercase;
  530. letter-spacing:1px;
  531. color:var(--Custom-Links-Text);
  532. line-height:1em;
  533. }
  534.  
  535. /*------ 'BACK TO BLOG' BUTTON ------*/
  536. .bache {
  537. position:fixed;
  538. top:0;margin-top:var(--Window-Margin);
  539. left:0;margin-left:var(--Window-Margin);
  540. display:flex;
  541. align-items:center;
  542. }
  543.  
  544. .bache svg {
  545. width:var(--Back-Arrow-Size);
  546. height:var(--Back-Arrow-Size);
  547. color:var(--Back-Arrow);
  548. }
  549.  
  550. .bache span {
  551. margin-left:7px;
  552. font-family:work sans;
  553. font-size:var(--Back-Text-Font-Size);
  554. text-transform:uppercase;
  555. letter-spacing:1px;
  556. color:var(--Back-Text);
  557. opacity:0;
  558. }
  559.  
  560. .bache:hover span {
  561. opacity:1;
  562. }
  563.  
  564. .glenjamin {
  565. position:fixed;
  566. bottom:0;padding-bottom:var(--Window-Margin);
  567. right:0;padding-right:var(--Window-Margin);
  568. }
  569.  
  570. .glenjamin svg {
  571. width:12px;
  572. height:12px;
  573. color:var(--Credit-Color);
  574. }
  575.  
  576. /*-------MUSIC PLAYER-------*/
  577. #glenplayer07 {
  578. position:fixed;
  579. bottom:0;margin-bottom:var(--Window-Margin);
  580. left:0;margin-left:var(--Window-Margin);
  581. z-index:99;
  582. }
  583.  
  584. .flamingo {
  585. display:flex;
  586. align-items:center;
  587. }
  588.  
  589. .circleofdeath {
  590. width:var(--Circle-Size);
  591. height:var(--Circle-Size);
  592. border-radius:100%;
  593. overflow:hidden;
  594. }
  595.  
  596. .tinfoil {
  597. width:var(--Circle-Size);
  598. height:var(--Circle-Size);
  599. background:var(--Progress-Empty);
  600. border-radius:100%;
  601. }
  602.  
  603. .oven {
  604. background:var(--Progress-Fill);
  605. }
  606.  
  607. .oliveoil {
  608. width:100%;
  609. height:100%;
  610. }
  611.  
  612. .crust {
  613. position:absolute;
  614. top:0;
  615. display:flex;
  616. align-items:center;
  617. justify-content:center;
  618. width:var(--Circle-Size);
  619. height:var(--Circle-Size);
  620. }
  621.  
  622. .cherry {
  623. display:flex;
  624. align-items:center;
  625. justify-content:center;
  626. width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  627. height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  628. background:var(--Player-Background);
  629. border-radius:100%;
  630. cursor:pointer;
  631. z-index:1;
  632. }
  633.  
  634. .music-controls {display:flex;align-items:center}
  635.  
  636. .music-controls .material-icons {
  637. font-size:var(--Play-Pause-Buttons-Size);
  638. color:var(--Play-Pause-Buttons-Color);
  639. }
  640.  
  641. .pausee {display:none;}
  642.  
  643. .beff {display:none;}
  644. .aff {display:block;}
  645.  
  646. .music-info {
  647. margin-left:var(--Player-Text-Margin);
  648. line-height:1em;
  649. }
  650.  
  651. .song-name {
  652. font-family:work sans;
  653. font-size:var(--Song-Name-Font-Size);
  654. text-transform:uppercase;
  655. letter-spacing:1.5px;
  656. color:var(--Song-Name-Color);
  657. }
  658.  
  659. .artist-name {
  660. margin-top:4px;
  661. font-family:dm sans;
  662. font-size:var(--Artist-Name-Font-Size);
  663. letter-spacing:0.3px;
  664. color:var(--Artist-Name-Color);
  665. }
  666.  
  667. </style>
  668.  
  669. </head>
  670.  
  671. <body>
  672.  
  673. <a class="bache" href="/">
  674. <i data-feather="arrow-left"></i>
  675. <span>return home</span>
  676. </a>
  677.  
  678. <div id="cont-h-a">
  679. <div id="cont-h-b">
  680. <div id="cont-v-a">
  681. <div id="cont-v-b">
  682.  
  683. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  684. <!-- remove animate-on-load if you don't want the animation -->
  685. <div class="container animate-on-load">
  686.  
  687. <div class="frame">
  688. <div class="border">
  689. <div class="intro-text">
  690.  
  691.  
  692. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  693. <!------ TOP LEFT TEXT ------>
  694.  
  695. <!--start one row-->
  696. <div class="text-row">
  697. <label>To:</label>
  698. <detail>a very special someone</detail>
  699. </div>
  700. <!--end one row-->
  701.  
  702. <!--start one row-->
  703. <div class="text-row">
  704. <label>From:</label>
  705. <detail>a handsome entity</detail>
  706. </div>
  707. <!--end one row-->
  708.  
  709.  
  710. </div><!--do not delete this line-->
  711.  
  712.  
  713.  
  714.  
  715. <div class="corner">
  716.  
  717. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  718. <!------ CORNER ICON / AVATAR IMAGE ------>
  719. <!-- put image url between quote marks of src="" -->
  720. <img class="corner-icon" src="//static.tumblr.com/gtjt4bo/yB9s2jdls/239874982.png">
  721. </div><!--do not delete this line-->
  722.  
  723.  
  724.  
  725.  
  726. <div class="squid">
  727. <div class="sqm">
  728. <div class="squid-row">
  729. <div class="squid-u"></div>
  730. <div class="squid-n"></div>
  731. </div>
  732.  
  733. <div class="squid-row">
  734. <div class="squid-u"></div>
  735. <div class="squid-n"></div>
  736. </div>
  737.  
  738. <div class="squid-row">
  739. <div class="squid-u"></div>
  740. <div class="squid-n"></div>
  741. </div>
  742. </div><!--sqm-->
  743. </div><!--squid-->
  744.  
  745.  
  746.  
  747.  
  748.  
  749. <div class="main-text">
  750. <div class="scb">
  751. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  752. <!------ MAIN ABOUT TEXT ------>
  753. <!-- if you need a scrollbar, go to .scb -->
  754.  
  755.  
  756. <h1>this is a heading:</h1>
  757.  
  758. <!--this is an non-numbered list (heart bullets)-->
  759. <ul>
  760. <li>bullet one
  761. <li>bullet two
  762. <li>bullet three
  763. </ul>
  764.  
  765. <p>
  766. this is a new paragraph!
  767.  
  768.  
  769. </div><!--scb-->
  770. </div><!--end main text | do not delete this line-->
  771.  
  772.  
  773.  
  774.  
  775.  
  776. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  777. <!------ BOTTOM LEFT CORNER TEXT ------>
  778. <div class="corner-text">here's your corner text</div>
  779.  
  780.  
  781.  
  782.  
  783.  
  784. <div class="tri-hol">
  785. <div class="cheesecake">
  786. <div class="cs"></div>
  787. <div class="td"></div>
  788. <div class="fc"></div>
  789. </div>
  790. </div><!--tri-hol-->
  791. </div><!--border-->
  792. </div><!--frame-->
  793. </div><!--container-->
  794.  
  795.  
  796.  
  797.  
  798. <div class="botnav">
  799.  
  800.  
  801. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  802. <!------ CUSTOM LINKS (BOTTOM) ------>
  803. <!--edit, add, or delete as you like-->
  804.  
  805. <a href="/ask">message</a>
  806. <a href="/archive">archive</a>
  807. <a href="//tumblr.com/dashboard">dashboard</a>
  808.  
  809.  
  810. </div><!--botnav | do not delete below this line-->
  811. </div><!--cont-v-b-->
  812. </div><!--cont-v-a-->
  813. </div><!--cont-h-b-->
  814. </div><!--cont-h-a-->
  815.  
  816. <!-------MUSIC PLAYER------->
  817. <div id="glenplayer07">
  818. <div class="flamingo">
  819. <div class="circleofdeath">
  820. <div class="tinfoil">
  821. <div class="oliveoil"></div>
  822. </div>
  823. <div class="crust">
  824. <div class="cherry">
  825. <div class="music-controls">
  826. <i class="material-icons playy">play_arrow</i>
  827. <i class="material-icons pausee">pause</i>
  828. </div>
  829. </div><!--cherry-->
  830. </div><!--crust-->
  831. </div><!--circleofdeath-->
  832.  
  833. <div class="music-info">
  834.  
  835.  
  836.  
  837. <!------ MUSIC TITLE & ARTIST NAME ------->
  838. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  839.  
  840. <div class="song-name">Tomorrow Never Came</div>
  841. <div class="artist-name">Laura Brehm, Luke Black</div>
  842.  
  843.  
  844.  
  845. </div><!--music-info-->
  846. </div><!--flamingo-->
  847. </div><!--glenplayer07-->
  848.  
  849. <!------- MUSIC URL ------->
  850. <!--
  851. to obtain a working audio, link:
  852. linktr.ee/direct_file_links
  853.  
  854. put the audio url between the quote marks of src=""
  855. -->
  856. <!--๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน๐ŸŒน-->
  857.  
  858. <audio id="audio" src="https://rhizo.gitlab.io/m/Laura_Brehm_and_Luke_Black_-_Tomorrow_Never_Came__Cover_.mp3" type="audio"></audio>
  859.  
  860. <!----end music player---->
  861.  
  862. <a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
  863.  
  864. <script>feather.replace()</script>
  865. </body>
  866.  
  867. </html>
Advertisement
Add Comment
Please, Sign In to add comment