API tools faq
paste
Advertisement
Kawaii-Lau

Feathers of Raven

Kawaii-Lau
May 18th, 2020
1,298
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.75 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <style>
  3.  
  4. /*  
  5.  
  6. ❁ ≖≖✿❁  
  7.                 Hello!
  8.      Thank you for using my code!
  9.                                    
  10.     Codes are now updated to be cleaner and more discernible by separating unimportant editing css from the html.
  11.                 o(〃＾▽＾〃)o
  12.                                         ✿❁ ≖≖ ❁ *
  13. Rules to Follow:
  14.  
  15. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  16. ✶ Do not redistribute this code, no matter how much you edited it!
  17. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  18. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  19.  
  20. If you like a custom code, check out my blog to see if requests are open!
  21.  
  22. XOXO, Kawaii-Lau.
  23.  
  24. ❁ ≖≖✿❁
  25.         2020 © Coding by Kawaii-Lau
  26.                                     ✿❁ ≖≖ ❁  */
  27.  
  28. /* SCROLLBAR CSS */
  29.  
  30. ::-webkit-scrollbar {width:5px; background-color:transparent;}
  31. ::-webkit-scrollbar-thumb {width:5px;background-color:#5E7C94}
  32.  
  33. .subject-box {
  34.     max-width:400px;
  35.     margin:0px auto -10px;
  36.     padding:0px;
  37.     border-radius:30px;
  38. }
  39.  
  40. .main-box {
  41.     max-width:600px;
  42.     margin:0px auto 0px;
  43.     padding:10px;
  44. }
  45.  
  46. .details {
  47.     padding:10px;
  48.     margin:-80px 0px 0px -80px;
  49. }
  50.  
  51. .icon {
  52.     background-clip:border-box;
  53.     width:105px; height:105px;
  54.     transform:rotate(45deg);
  55.     overflow:hidden;
  56. }
  57.  
  58. .icon-pic {
  59.    
  60.     width:150px;height:150px;
  61.     transform:rotate(-45deg);
  62.     margin-top:-30px;
  63.     margin-left:-20px;
  64. }
  65.  
  66. .lesson {
  67.     position:relative;
  68.     margin-top:65px;
  69.     margin-left:-35px;
  70.     padding:0px 20px 0px 50px;
  71.     z-index:6;
  72.     height:30px;
  73.     text-align:right;
  74.     display:flex;align-items:center;
  75. }
  76.  
  77. .year {
  78.     position:relative;
  79.     margin-top:5px;
  80.     margin-left:-55px;
  81.     width:180px;
  82.     padding:0px 20px 0px 50px;
  83.     z-index:6;
  84.     height:30px;
  85.     text-align:left;
  86.     display:flex;align-items:center;
  87. }
  88.  
  89. .lesson-content {
  90.     width:400px;height:700px;
  91.     overflow:auto;padding:10px;
  92. }
  93.  
  94. .pictures {
  95.     width:250px;
  96.     margin-top:-80px;
  97.     margin-right:-20px
  98. }
  99.  
  100. .mask1 {-webkit-mask-image:url(https://i.imgur.com/capLBae.png);-webkit-mask-size:100% 100%;width:100%;height:273px;}
  101.  
  102. .mask2 {-webkit-mask-image:url(https://i.imgur.com/wMs9ObK.png);-webkit-mask-size:100% 100%;width:100%;height:273px;}
  103.  
  104. .mask3 {-webkit-mask-image:url(https://i.imgur.com/Rqra7lC.png);-webkit-mask-size:100% 100%;width:100%;height:273px;}
  105.  
  106. .row {display:flex; flex-direction:row} .col {display:flex; flex-direction:column}
  107. </style>
  108. <link href="https://fonts.googleapis.com/css2?family=Neuton&family=Playfair+Display&display=swap" rel="stylesheet">
  109.  
  110. <!-- ༻❁༺༻❁༺༻❁༺༻❁༺༻❁༺༻❁༺༻❁༺༻❁༺ -->
  111. <body>
  112. <div id="background" style="background:url(https://i.pinimg.com/564x/eb/e5/0d/ebe50da26320a1a5aec08e72c21cf8ff.jpg) center; background-size:100% 100%;padding-top:60px;border:1px solid transparent">
  113.    
  114. <!-- ༻❁༺༻❁༺༻❁༺༻❁
  115.                     SUBJECT TITLE
  116.                                 ༺༻❁༺༻❁༺༻❁༺༻❁༺ -->
  117.     <div class="subject-box">
  118.         <center><img src="https://fontmeme.com/permalink/200518/415d1407198dd14c52fdc0de409b2ddd.png" style="width:400px"/></center>
  119.     </div>
  120.  
  121. <!-- ༻❁༺༻❁༺༻❁༺༻❁
  122.             LESSON NAME & YEAR AND WEEK
  123.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  124.  
  125.     <div class="main-box" style="background:#E3ECF3;border:2px solid #5E7C94;box-shadow:0px 0px 15px black">
  126.     <div class="row details" style="font-family:'Playfair Display'">
  127.         <div class="icon" style="border:7px double #5E7C94; background:#E3ECF3; position:relative;z-index:7">
  128.        
  129. <!-- ༻❁༺༻❁༺༻❁༺༻❁
  130.                     DIAMOND ICON
  131.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  132.             <div class="icon-pic" style="background:url(https://i.imgur.com/6tQBvXq.gif);background-size:100% 100%;"></div></div>
  133.     <div class="col">
  134.    
  135. <!-- ༻❁༺༻❁༺༻❁༺༻❁
  136.             LESSON NAME & YEAR AND WEEK
  137.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  138.         <div class="lesson" style="background:#5E7C94;font-size:18px;color:white;">
  139.         <b>"A heart's a heavy burden"</b>
  140.             </div>
  141.         <div class="year" style="background:#5E7C94;font-size:18px;color:white;">
  142.         <b>Year no., Week no.</b>
  143.             </div>
  144.     </div>
  145.    
  146.     </div>
  147.    
  148.    
  149. <!-- ༻❁༺༻❁༺༻❁
  150.                 LESSON CONTENT
  151.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  152.    
  153.     <div class="row" style="padding:0px 10px;font-family:'Neutron', serif">
  154.         <div class="lesson-content" style="color:#2A4E68">
  155.        
  156.             <b>"They say that the best blaze burns brightest, when circumstances are at their worst."</b><br><br>
  157.            
  158.            
  159.             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. <span>"This is for dialogues of your character speaking."</span> Mauris tristique metus vitae urna malesuada pellentesque. Aliquam pretium nec dolor vel hendrerit.<br><br>
  160.  
  161.                         Nullam elementum purus vel turpis placerat accumsan. Donec blandit ultrices ligula. Nunc sit amet ipsum nulla. Mauris egestas posuere dui non elementum. Vivamus vitae fringilla purus. Donec lacinia sapien in nisi pellentesque, eu aliquet erat congue. Morbi egestas, diam et interdum sagittis,<br><br>
  162.            
  163.             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. <span>"This is for dialogues of your character speaking."</span> Mauris tristique metus vitae urna malesuada pellentesque. Aliquam pretium nec dolor vel hendrerit.<br><br>
  164.  
  165.                         Nullam elementum purus vel turpis placerat accumsan. Donec blandit ultrices ligula. Nunc sit amet ipsum nulla. Mauris egestas posuere dui non elementum. Vivamus vitae fringilla purus. Donec lacinia sapien in nisi pellentesque, eu aliquet erat congue. Morbi egestas, diam et interdum sagittis,
  166.            
  167. </div>
  168.  
  169. <!-- ༻❁༺༻❁༺༻❁
  170.                 AESTHETIC PICTURES
  171.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  172.    
  173.         <div class="pictures">
  174.        
  175. <!-- ༻❁༺༻   PICTURE 1   ༺༻❁༺༻❁༺ -->        
  176.         <div class="mask1" style="background:url(https://i.pinimg.com/564x/2a/c1/66/2ac166ab140dbcad5aa1f2b68aec3305.jpg);background-size:100% 100% "></div>
  177.        
  178. <!-- ༻❁༺༻   PICTURE 2   ༺༻❁༺༻❁༺ -->        
  179.         <div  class="mask2" style="background:url(https://i.pinimg.com/564x/75/f4/25/75f42542f2d999097ef40f1e57854a62.jpg);background-size:100% 100%"></div>
  180.        
  181. <!-- ༻❁༺༻   PICTURE 3   ༺༻❁༺༻❁༺ -->        
  182.         <div class="mask3" style="background:url(https://i.pinimg.com/564x/67/b9/04/67b90448151aef889c2a88bee9fa541b.jpg);background-size:100% 100%"></div>
  183.        
  184.        
  185.     </div>
  186.        
  187.    
  188.     </div>
  189.         <br>
  190.    
  191. <!-- ༻❁༺༻❁༺༻❁
  192.             HOMEWORK AND REQUIREMENTS
  193.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->    
  194.    
  195.         <div style="background:#B3D2EA;padding:10px;font-family:'Neutron', serif">
  196.        
  197.             <center><img src="https://fontmeme.com/permalink/200518/9c6efd4f8bcfb590baac9c689fbeec61.png" style="width:250px" alt="homework"/></center>
  198.        
  199.         <p>
  200.         &nbsp; <b>Place Intructions here...</b><br><br>
  201.        
  202.         ✵ Question 1<br>
  203.         ✵ Question 2<br>
  204.         ✵ Question 3<br>
  205.         ✵ Question 4<br>
  206.         </p>
  207.        
  208.        
  209.         <!-- ADDITIONAL -->
  210.         <p style="font-size:18px;text-align:center">
  211.             <b>If you have any coding problems, concerns or requests for codes, don't hestitate to ask on my blog, <span style="color:#6caf37">Kawaii-Lau</span>.</b>
  212.         </p>
  213.         </div>
  214.     <br>
  215.         <div class="row" style="align-items:center;justify-content:center">
  216.        
  217. <!-- ༻❁༺༻❁༺༻❁
  218.             SIGNATURE AND PICTURE
  219.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->        
  220.             <img src="https://media1.tenor.com/images/c908d0cfaa8737d5278101aa94ff7015/tenor.gif?itemid=15811775" style="width:150px;height:150px;border:2px solid gray" alt="sophie"/>
  221.        
  222.        
  223.         <div class="col"><img src="https://fontmeme.com/permalink/200518/4882a63c1eeeb89683f37724d8f590cd.png" style="width:300px" alt="signature"/>
  224.            
  225.             <p style="text-align:center;margin:-20px;color:#5CA0D5"><b>Subject Teacher</b></p>
  226.            
  227.         </div>
  228.     </div>
  229. </div>
  230.  
  231. <!-- ༻❁༺༻❁༺༻❁
  232.             CREDITS; DO NOT REMOVE!
  233.                                 ❁༺༻❁༺༻❁༺༻❁༺ -->
  234.  
  235.     <div id="credits" style="text-align:center;max-width:600px;margin:0px auto 50px;padding:10px;font-family:serif">
  236.      2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" style="color:#ECA992;text-decoration:none">Kawaii-Lau</a>
  237.     </div>
  238.  
  239. </div>
  240. </body>
  241. </html>
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!