API tools faq
paste
Advertisement
ooksie

ever faithful alt. (uxie x howlingwoods)

ooksie
Jun 9th, 2022
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.08 KB | None | 0 0
raw download clone embed print report
  1. [comment]design by howlingwoods, coded by uxie!
  2.  
  3. fonts used:
  4. [font=Averia Serif Libre]wax seal[/font]
  5. [font=Square Peg]body text[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10.  
  11. /*letter background image -- note if you change this the aspect ratio may your new image~~*/
  12. --bg: url('https://2.bp.blogspot.com/-rvgRHtP09_Y/VZbqwnIuiFI/AAAAAAAAGig/QopFGpQ34GI/s1600/Stationery%2B%257E%2BQueen%2BAnnes%2Blace%252Bborder%2Bv2%2B%257E%2Blilac-n-lavender.jpg');
  13. /*change this to the most common colour in the letter background*/
  14. --bg-color: #FDEDC8;
  15.  
  16. /*letter images -- i don't advise changing these*/
  17. --l-top: url('https://i.imgur.com/f4tDvvq.png');
  18. --l-bottom: url('https://i.imgur.com/9zzA13q.png');
  19.  
  20. /*wax seal colour*/
  21. --w: #7c0400;
  22. /*body text colour*/
  23. --t-color: #000;
  24.  
  25. /*fonts used*/
  26. --wax:'Averia Serif Libre', fantasy;
  27. --body:'Square Peg', cursive;
  28.  
  29.  
  30. max-height:clamp(300px, 130vw, 710px); width:100%; max-width:507px; padding:0 0 20px 0; box-sizing:border-box; position:relative; margin:5px auto 40px auto; overflow:hidden; display:flex; flex-flow:column nowrap; justify-content:flex-end; line-height:0;]
  31. [border=transparent; height:auto; width:auto; padding:0; visibility:hidden; margin-bottom:30px;][accordion=100%]
  32.  
  33. [comment]----letter top----[/comment]
  34. {slide=[border=transparent; height:30px; width:auto; padding:0;]h1[/border] | open}[border=transparent; height:107px; width:calc(100% + 14px); padding:0; position:relative; margin:0 -7px; pointer-events:none; visibility:visible;][border=transparent; height:auto; width:100%; padding:0; position:absolute; top:-25px; left:0; font-size:12px; text-align:center; opacity:0.7;]click the wax seal![/border][border=transparent; height:50px; width:100%; padding:0; position:absolute; top:-55px; left:0; z-index:10; pointer-events:auto;][/border][border=transparent; width:100%; padding:0; position:absolute; bottom:-130%; left:0; z-index:6;][border=transparent; padding:0; padding-top:51.5%; background: var(--l-top); visibility:visible; background-size:100%; background-repeat:no-repeat; position:relative;]
  35.  
  36. [comment]----seal symbol----[/comment]
  37. [border=transparent; width:13%; padding:0; position:absolute; top:52%; left:44%;][border=transparent; padding:0; padding-top:100%; box-sizing:border-box; border-radius:50%; position:relative;]
  38. [comment]----single letter symbol (pick only one type of symbol!)----[/comment]
  39. [border=transparent;
  40.  
  41. /*adjust size of symbol here*/ --fs: 72px;
  42.  
  43. height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; color: var(--w); font-family: var(--wax); font-size:clamp(45px, -50px + 16vw, var(--fs)); line-height:100%;
  44.  
  45. /*replace here; with display:none; to hide this*/ here;
  46.  
  47. ][comment]
  48.  
  49. ----* * * single letter here----
  50.  
  51. [/comment]S[/border]
  52.  
  53. [comment]----fa icon symbol (pick only one type of symbol!)----[/comment]
  54. [border=transparent;
  55.  
  56. /*adjust size of symbol here*/ --fs: 52px;
  57.  
  58. height:100%; width:100%; padding:5px 1px 0 0; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; color: var(--w); font-family: var(--wax); font-size:clamp(35px, -50px + 16vw, var(--fs)); line-height:100%;
  59.  
  60. /*replace here; with display:none; to hide this*/ display:none;
  61.  
  62. ][comment]
  63.  
  64. ----* * * fontawesome icon here----
  65.  
  66. [/comment][fa]far fa-sun[/fa][/border]
  67.  
  68.  
  69. [/border][/border][/border][/border][/border]{/slide}
  70.  
  71. [comment]----main contents----[/comment]
  72. {slide=[border=transparent; height:60px; width:auto; padding:0; margin-bottom:20px; visibility:visible; font-size:0;]h2[/border]}[border=transparent; width:auto; padding:0; position:relative; top:20px; visibility:visible;][border=transparent; padding:0; padding-top:129.5%; box-sizing:border-box; background: var(--bg), var(--bg-color); background-size:cover; background-repeat:no-repeat; position:relative;][border=transparent; height:73%; width:72%; padding:15px clamp(12px, 130px - 17vw, 20px) 10px 20px; box-sizing:border-box; margin:9% 10% auto 13%; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  73.  
  74. [comment]----opening line----[/comment]
  75. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); line-height:100%; flex-shrink:0;
  76.  
  77. /*adjust font size here!*/ --fs: 30px;
  78.  
  79. font-size:clamp(var(--fs) - 10px, -50px + 18vw, var(--fs))][comment]
  80. ----* * * opening line here----
  81.  
  82. [/comment]Dearest Lover,[/border]
  83.  
  84. [comment]----main text----[/comment]
  85. [border=transparent; height:62%; width:100%; padding:0; overflow:hidden; margin-top:10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; line-height:115%; text-align:justify; color: var(--t-color);
  86.  
  87. /*adjust font size here!*/ --fs: 26px;
  88.  
  89. font-size:clamp(var(--fs) - 10px, -50px + 18vw, var(--fs))][comment]
  90.  
  91. ----* * * text starts here----
  92.  
  93. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin, justo ac maximus varius, libero velit sodales odio, eu elementum augue mauris in nulla. Vestibulum libero eros, ornare in mattis vel, vestibulum id massa. Sed et elit enim. Duis eget enim augue. Curabituru ultrices vestibulum ex. Curabitury egestas sapien et tellus commodo, a suscipit ipsum tristique. Suspendisse id ultricies justo, ut rutrum odio. Nulla facilisi. Suspendisse potenti. Suspendisse blandit vitae metus a finibus.
  94.  
  95. Nulla imperdiet justo sed aliquet fermentum. Sed laoreet, lectus vitae faucibus mollis, mi lacus porttitor dui, sit amet fringilla ante nulla ut ligula. Maecenas metus dolor, pellentesque quis elit quis, vulputate viverra dui. Proin aliquam tempor risus, vel commodo massa aliquet at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent auctor sapien placerat luctus ultricies. Suspendisse dapibus vehicula felis, id pellentesque eros ultricies at. Fusce sit amet orci sit amet sapien egestas suscipit sed quis odio. In congue libero nec justo tempus, eget bibendum lorem pharetra. Quisque rutrum orci quis velit fermentum volutpat. Aenean eget diam mollis, dictum ex quis, consequat turpis. Quisque quis justo ac ipsum gravida auctor nec commodo nunc. Curabitur suscipit eget diam et commodo. Mauris turpis velit, bibendum et felis sit amet, fringilla placerat arcu. Donec in leo semper, ultrices sapien consequat, sodales lacus. Sed lectus libero, commodo in consequat luctus, pellentesque tincidunt lectus.
  96. [/border][/border][/border]
  97. [comment]----main text end----[/comment]
  98.  
  99. [comment]----signature----[/comment]
  100. [border=transparent; height:auto; width:100%; padding:0; flex-shrink:0; margin-top:14px; display:flex; justify-content:flex-start; flex-flow:row-reverse nowrap;][border=transparent; height:100%; width:38%; padding:0;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); line-height:100%; text-align:center;
  101.  
  102. /*adjust font size here!*/ --fs: 30px;
  103.  
  104. font-size:clamp(var(--fs) - 10px, -50px + 18vw, var(--fs))][comment]
  105.  
  106. ----* * * signature here----
  107.  
  108. [/comment]Ever Faithful,
  109. Your Lover[/border][/border]
  110.  
  111. [/border][/border][/border]{/slide}
  112.  
  113. [/accordion][/border]
  114.  
  115. [comment]----letter-bottom----[/comment]
  116. [border=transparent; width:100%; padding:0; position:absolute; bottom:20px; left:0; z-index:5; pointer-events:none;][border=transparent; padding:0; padding-top:51.5%; background: var(--l-bottom); background-size:100%; background-repeat:no-repeat;][/border][/border]
  117.  
  118. [comment]----signature! (do not remove!)-----
  119. [/comment][bg=transparent; height:auto; width:100%; padding:0; position:absolute; bottom:15px; left:10px; z-index:7; text-align:center; box-sizing:border-box; opacity:0.65;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by howlingwoods, coded by uxie♡[/font][/bg][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!