API tools faq
paste
glenthemes

About Page [17]: Love Letter

glenthemes
May 7th, 2020 (edited)
5,378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.43 KB | None | 0 0
raw download clone embed print report
  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 page credit.
  14. 2) Do not repost/redistribute my themes.
  15. 3) Do not take parts of the code and use it as your own.
  16. 4) Do not use my works as a base code.
  17. 5) Do not mix my works together.
  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
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!