API tools faq
paste
Advertisement
Kawaii-Lau

Painted Breeze

Kawaii-Lau
Feb 22nd, 2020
545
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.29 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.    
  3. /*  Hello!
  4. Thank you for using my code!
  5.  
  6. Rules to Follow:
  7.  
  8. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  9. ✶ Do not redistribute this code, no matter how much you edited it!
  10. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  11. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  12.  
  13. If you like a custom code, check out my blog to see if commissions are open!
  14.  
  15.  
  16. xoxo, Kawaii-lau   */
  17.  
  18.  
  19.   :root {--background:#92A9D7   ;
  20.     --background-box:url(https://wallpapercan.com/download/1440x2880/82928c69/white-blue-red-clouds-artwork.jpg);
  21.     --primary: #ABE1ECEE;
  22.     --accent-1: #2D0779;
  23.     --accent-2: #087E38 ; /* TEXT SPAN COLOR */
  24.     --box-fade: rgba(27, 6, 44, 0.1);
  25.     --border1:rgba(135, 193, 236, 0.7);
  26.     --border2:#2EAF37;
  27.    
  28.     --text-color:#09072C;
  29.     --text-color-2:#333;
  30.     --text-font:Noto Sans;
  31.    
  32.     --selection: #F2EFCF; }
  33.  
  34.     ::selection {
  35.         background:var(--selection);
  36.     }
  37.  
  38. /* THE WHOLE BOX CODE */
  39.     .lesson-body {
  40.         background-color: var(--background);
  41.     }
  42.    
  43.    
  44.     .lesson-body h1,
  45.     .lesson-body h2,
  46.     .lesson-body h3,
  47.     .lesson-body h4,
  48.     .lesson-body p {
  49.         margin: 0px;
  50.         margin-bottom: 5px
  51.     }
  52.  
  53.     .lesson-body h1 {
  54.         font-size: 50px
  55.     }
  56.  
  57.    .lesson-body p {
  58.         font-size: 14px;
  59.         letter-spacing: -0.2px
  60.     }
  61.  
  62.     .lesson-body span {
  63.         color: var(--accent-2)
  64.     }
  65.  
  66.     .lesson-body u,
  67.     .lesson-body a {
  68.         color: var(--accent-2)
  69.     }
  70.  
  71. /* MAIN BOX */
  72.     .main-box {
  73.         max-width: 620px;
  74.         margin-left: auto;
  75.         margin-right: auto;
  76.  
  77.     }
  78.  
  79. /* MAIN BOX BACKGROUND */
  80.     .background {
  81.         background:var(--primary)  var(--background-box) center;
  82.         background-size: 100% 100%;
  83.         border: 8px solid var(--border1)
  84.     }
  85.  
  86. /* INNER BOXES */
  87.     .box-fill {
  88.         background-color: var(--box-fade);
  89.     }
  90.  
  91.     .box-fill>div {
  92.         color: var(--text-color);
  93.         font-family: var(--text-font);
  94.         padding: 1px;
  95.         text-align: center
  96.     }
  97.  
  98. /* HEADER */
  99.     .header {
  100.         width: 100%;
  101.         background: var(--primary);
  102.         border-top: 6px double var(--border2);
  103.         border-bottom: 6px double var(--border2);
  104.         background-clip: padding-box
  105.     }
  106.  
  107. /* WHAT YOU WILL LEARN */
  108.     .metaInfo {
  109.         background: var(--primary);
  110.         width: 100%;
  111.         margin-top: 20px;
  112.     }
  113.  
  114. /* FLEXBOX */
  115.     .whole {
  116.         display: flex;
  117.         flex-direction: row;
  118.     }
  119.  
  120. /* LESSON CONTENT */
  121.     .content {
  122.         background: var(--primary);
  123.         width: 400px; min-height:250px;
  124.         margin-left: 2px;
  125.     }
  126.  
  127. /* CONTENT PADDING */
  128.     .contPad {
  129.         padding: 10px
  130.     }
  131.  
  132.     .contPad>img {
  133.         display: block;
  134.         margin: 10px auto 10px auto;
  135.         width: 90%
  136.     }
  137.  
  138.     .align>p {
  139.         text-align: justify
  140.     }
  141.  
  142. /* REQUIREMENTS BOX */
  143.     .side-cont {
  144.         width: 165px;
  145.         background: var(--primary);
  146.         margin-left: 15px;
  147.         margin-top: 150px;
  148.         margin-bottom: 50px;
  149.         min-height: 250px;
  150.         border: 5px double var(--border2)
  151.     }
  152.  
  153. /* CREDITS CSS */
  154.     .credits {
  155.         font-size: 11px;
  156.         padding: 5px 0px 5px 20px;
  157.         color: gray;
  158.         font-family: courier
  159.     }
  160.  
  161.     .credits a {color:var(--accent-2)}
  162.  
  163. </style>
  164. <!---- Custom Fonts --->
  165. <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
  166.  
  167. <!-- START OF HTML -->
  168. <body>
  169. <div class="lesson-body">
  170.     <div class="main-box">
  171.         <div class="background">
  172.             <div class="box-fill">
  173.  
  174.             <!-- HEADER -->
  175.                 <div class="header">
  176.                     <div class="contPad">
  177.                         <img src="https://fontmeme.com/permalink/200222/b0f1fe47e06dbd5a964b79591df00936.png" style="width:70%"/>
  178.                         <p style="color:var(--accent-1)">Year #, Week #</p>
  179.                     </div>
  180.                 </div>
  181.            
  182.             <!-- META INFO  -->
  183.                 <div class="metaInfo">
  184.                     <div class="contPad" style=" color:var(--text-color-2)">
  185.                         <h4>What you will learn</h4>
  186.                         <p>• Some new examples of coding<br>
  187.                             • How awesome responsiveness is<br> • Appreciation to minimalist codes</p>
  188.                     </div>
  189.                 </div>
  190.            
  191.            
  192.             <!-- LESSON CONTENT -->
  193.                 <div class="whole" style="margin-top:50px">
  194.                     <div class="content">
  195.                         <div class="contPad align">
  196.                             <h2>Title of your Lesson</h2>
  197.                             <img src="https://i.pinimg.com/originals/10/6e/65/106e6554e445f91c2847ef7daffb0b17.jpg" />
  198.                         <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<br><br>
  199.                         <span>"An example of dialogue here in between span tags"</span>, says the coder.<br><br>
  200.                         Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br><br>
  201.                         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo co<br><br>
  202.                         Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo co<br><br>
  203.                         Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <br><br>
  204.                         dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo co<br><br>
  205.                         Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br><br>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo co<br>
  206.  
  207.  
  208. </p>
  209.                         </div>
  210.                     </div>
  211.                
  212.                 <!-- REQUIREMENTS  -->
  213.                     <div class="side-cont">
  214.                         <div class="contPad" style="text-align:left">
  215.                             <h3>Requirements</h3>
  216.                             <p>• You must answer all questions in the correct format and complete the requirements to get a <u>Outstanding</u> grade.<br>
  217.                                 • Please mention <u>all of your sources</u> that you used during this lesson. Your imagination can be included!
  218.                                <br>
  219.                                 • If you are going to use a real user, <u>be sure to ask their permission first</u>, then put their permission in your sources.<br>
  220.                                 • Copying and/or plagiarizing would give you a Unworthy grade and a very horrible message from the Teacher!<br>
  221.                                 • Creativity and originality would be rewarded and be much appreciated!</p>
  222.                             <br>
  223.                             <p style="text-align:center;font-size:16px">If you have any questions, then don't hesitate to send me, <a target="_blank" style="color:#6caf37;text-decoration:none">[Name of Teacher]</a>, a Mail!</p>
  224.                         </div>
  225.                     </div>
  226.  
  227.                 </div>
  228.            
  229.             <!-- ASSIGNMENT -->
  230.                 <div class="whole" style="margin-top:10px;">
  231.                     <div class="content">
  232.                         <div class="contPad align">
  233.                        
  234.                        
  235.                             <h2>Assignment</h2>
  236.                         <p><b>Place instructions here.</b> <i>Note from coder: I love this simple and quick code for lessons. It's kinda responsive and the css colors are easy to edit. Feel free to use the requirements template I set up that fits for any site!</i> <br><br>
  237.                             <span>Write this homework in RPG format</span>.</p>
  238.                         <!-- QUESTIONS -->
  239.                             <p>
  240.                             ✶ Question 1<br>
  241.                                 ✶ Quesion 2<br>
  242.  
  243.                                 ✶ Quesion 3<br>
  244.  
  245.                                 ✶ Question 4<br>
  246.  
  247.                                 ✶ Question 5<br><br>
  248.  
  249.                                
  250.                             </p><br>
  251. <!-- RESEARCH NOTES AND MISC. -->
  252.                             <p><b>Research Notes</b></p>
  253.                             <p>✶ <b>Research material -</b> <a href="https://EXAMPLE-LINK.com" target="_blank">Name of site</a><br>
  254.                             ✶ <b>Research material -</b> <a href="https://EXAMPLE-LINK.com" target="_blank">Name of site</a><br>
  255.                             ✶ <b>Research material -</b> <a href="https://EXAMPLE-LINK.com" target="_blank">Name of site</a><br></p>
  256.                   <br>          
  257.                         <p><i>Note: Thank you for your support!</i></p>
  258.                            
  259.                        
  260.  
  261.                            
  262.  
  263.                             <img src="https://fontmeme.com/permalink/200222/3e8c2e56349b5521183388fd1c7be11d.png" alt="SIGNATURE"/> <img src="https://66.media.tumblr.com/7586a2f41bd6cab36e3b4fc83b4e6b9c/tumblr_pljsv2s35A1y1woqgo8_250.png" style="width:130px;height:130px;box-shadow:3px 3px var(--border2);border-radius:10%"/>
  264.                         </div>
  265.                     </div>
  266.                 </div>
  267.  
  268.                 <br>
  269.             </div>
  270.         </div>
  271.    
  272. <!-- CREDITS: DO NO REMOVE EVER! -->
  273.     <footer class="credits">
  274.             2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" target="_blank" style="text-decoration:none">Kawaii-Lau</a>
  275.         </footer>
  276.    
  277.    
  278.     </div>
  279. </div>
  280. </body>
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!