Kawaii-Lau

Daffodils [Club Code]

Aug 1st, 2021 (edited)
1,278
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2. ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  3.   Thank you for using my code!
  4. ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  5. Rules to Follow:
  6.  
  7. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  8. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  9. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
  10. ✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!
  11.  
  12. If you like a custom code, check out my blog to see if requests are open!
  13. XOXO, Lauren.
  14. ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  15.   2021 © Coding by Kawaii-Lau
  16. ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝ -->
  17.  
  18. <style>
  19.  
  20.   /* CUSTOM SCROLLBAR */  
  21.   ::-webkit-scrollbar {
  22.     width:4px; height:5px;
  23.     background-color:white;
  24.   }
  25.  
  26.   ::-webkit-scrollbar-thumb {
  27.     background-color:#b89b3e;
  28.   }
  29.  
  30.   :root {
  31.     --box-height:900px;
  32.     --border-color:#b89b3e;
  33.     --decoration-color:#dec05d;
  34.     --infobox-bg-color:#fcf7f2;
  35.    
  36.     --inner-box-bg: url(https://i.pinimg.com/originals/37/04/32/370432b344c72dd87c1d0f3a713cf595.png);
  37.     --border-image: url(https://i.imgur.com/EbUTyIZ.png); /* MUST BE TRANSPARENT PNG */
  38.     --side-decoration-img: url(https://i.imgur.com/0MjKAlz.png); /* MUST BE TRANSPARENT PNG */
  39.   }
  40.  
  41.   .boxSize {
  42.     height:1000px;
  43.   }
  44.  
  45.   .centering-box {
  46.     margin:0px auto;
  47.     width:580px;
  48.     padding:40px 0px;
  49.   }
  50.  
  51.   .border-box {
  52.     width:580px;
  53.     margin:0px auto;
  54.   }
  55.  
  56.   .box-bg {
  57.     width:540px;
  58.     height:var(--box-height);
  59.     position:relative;
  60.     z-index:4;
  61.     background:#eeeeee var(--inner-box-bg);
  62.     background-size:100% 100%;
  63.     margin-left:auto; margin-right:auto;
  64.     box-sizing:border-box;
  65.   }
  66.  
  67.   .inner-box {
  68.     display:flex; flex-direction:row;
  69.     justify-content:center;
  70.     position:relative; z-index:14;
  71.     width:570px;
  72.     margin-top:calc( var(--box-height) - var(--box-height) - var(--box-height) + 40px);
  73.   }
  74.  
  75.   .info-box {
  76.     width:300px;
  77.     height:calc(var(--box-height) - 190px);
  78.     box-shadow:-4px 4px 5px #44444433;
  79.     position:relative; z-index:15;
  80.     left:0px; top:50px;
  81.     box-sizing:border-box;
  82.     padding:10px 5px;
  83.     background:var(--infobox-bg-color);
  84.   }
  85.  
  86.   .ii { /* INSIDE OF INFO BOX */
  87.     height:calc( var(--box-height) - 300px );
  88.     overflow:auto;
  89.     position:relative; z-index:20;
  90.     top:0px;
  91.     box-sizing:border-box;
  92.     padding:0px 5px;
  93.   }
  94.  
  95.   .daffodil-box {
  96.     width:60px; opacity:0.9
  97.   }
  98.  
  99.   .mask {-webkit-mask-size:100% 100%;}
  100.   .pngBorder {
  101.     width:100%;
  102.     height:calc( var(--box-height)  + 40px );
  103.     top:-20px; left:-20px;
  104.     position:relative; z-index:8;
  105.     -webkit-mask-image: var(--border-image);
  106.   }
  107.   .daffodil-deco {
  108.     width:260px; height:calc( var(--box-height) - 250px);
  109.     position:relative; z-index:18;
  110.     left:-110px; top:70px;
  111.     transform:rotate(15deg);  
  112.     -webkit-mask-image:var(--side-decoration-img);
  113.   }
  114.  
  115. </style>
  116.  
  117. <body class="boxSize">
  118. <div class="centering-box">
  119.   <div class="box-bg">
  120.     <div class="border-box">
  121.       <div class="mask pngBorder" style="background-color: var(--border-color);"></div> <!--BORDER IMAGE-->
  122.     </div>
  123.   </div>
  124.   <div class="inner-box">
  125.     <div class="info-box"> <!-- White box -->
  126.      
  127.       <center><img src="https://64.media.tumblr.com/471b3927c4cc12c616021732c052f90c/b630d56dc0a1cd21-f0/s500x750/46a293116331bc4cc3d93403952a1146e1c1e5e6.png" style="width:80%;" alt="text divider"/></center> <!-- TEXT DIVIDER -->
  128.      
  129.       <div class="ii"><!-- TEXTBOX OVERFLOW-->
  130.        
  131.         <center><img src="https://i.pinimg.com/originals/55/4d/5e/554d5e1de641cb1bd1ed3b08a7818f4e.gif" style="width:80%" alt="header image"/></center><!-- HEADER IMAGE -->
  132.        
  133.         <p style="font-family:'Times New Roman', serif; font-size:13px; text-align:justify; ">She stared towards the sky and soaked the sunshine through her skin. Small shells scraped each other inside her sack - shiny ones, scaly ones, and serrated ones. She wondered if someone will seek for a souvenir, but under the scorching sun, not a soul is in sight. Still, she stood on the sea shore, hoping to sell her sea shells. <br><br>
  134.  
  135. Then appeared a spirit of shimmering light on the silver sea, smiling with strange sincerity. She strolled slowly towards her and sighed with sadness. A warmth sparked around the spirit and the seller, like sunlight snuggling her heart. But the spirit begin to shrink into deep stormy waters, swaying her to follow her. The seller seize her hand, and be swept of the shivering sea. <br><br>
  136.  
  137. Submerging into the eerie sea, she searched for the spirit, seeing her sea shells sink around her. The spirit sought her and swam towards her. She weaved her hands with hers, and stare at the sparkling eyes of splendid sapphire. She savored her prescence with a kiss, and continued sinking into the soundless abyss.<br><br>
  138.  
  139.           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam in mattis massa. Nunc eget ornare orci. Nulla mattis purus a posuere sodales. Nullam sit amet leo felis. Duis sit amet consequat arcu, sed sollicitudin nunc. Phasellus id accumsan dui. Mauris tristique metus vitae urna malesuada pellentesque. Aliquam pretium nec dolor vel hendrerit.</p>
  140.        
  141. <p style="text-align:center; font-size:16px;line-height:20px"><b>Contact me if you need coding help or coding requests! Or just want to share some ice cream with me~ ♡</b></p>        
  142.     <!-- YOUR SIGNATURE -->    
  143.         <center><img src="https://fontmeme.com/permalink/210801/4408e618a972bf92a29dc70b8eb68a05.png" alt="Kawaii-Lau#4770" style="width:100%"/></center>
  144.      
  145.       </div><!--END OF TEXT OVERFLOW-->
  146.        
  147.       <center><img src="https://64.media.tumblr.com/471b3927c4cc12c616021732c052f90c/b630d56dc0a1cd21-f0/s500x750/46a293116331bc4cc3d93403952a1146e1c1e5e6.png" style="width:80%; transform:rotate(180deg)" alt="text divider"/></center> <!-- TEXT DIVIDER -->
  148.     </div><!--END OF INFO BOX -->
  149.    
  150.      <!-- SIDE DECORATION -->
  151.       <div class="daffodil-box"><div class="mask daffodil-deco" style="background-color:var(--decoration-color);"></div></div>
  152.    
  153.     </div><!-- inner box end-->
  154.  
  155. <!-- ♡♡♡ DO NOT REMOVE CREDITS OR ELSE I WILL SLICE AND DICE YOU ♡♡♡ -->  
  156.   <div style="text-align:center; position:relative; top:135px; z-index:20"><p style="color:#969338;"><b> &copy; <a href="https://kawaii-lau.tumblr.com/" taret="_blank" style="text-decoration:none; color:#969338;">Kawaii-Lau</a> </b></p></div>
  157. </div>
  158. </body>
RAW Paste Data