API tools faq
paste
Advertisement
Kawaii-Lau

BlackSerenity

Kawaii-Lau
Dec 20th, 2019
902
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.06 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 like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  11.  
  12. If you like a custom code, check out my blog to see if comissions are open!
  13.  
  14.  
  15. xoxo, Kawaii-lau
  16.  
  17. */
  18.  
  19.     /* ---- MAIN CONTENT CSS ---- */
  20.     .background {
  21.         background:url(https://i.pinimg.com/564x/c0/65/b3/c065b32477eeef0a6a2bafaea76635c7.jpg);background-size:100% 100%;
  22.         padding: 15px
  23.     }
  24.  
  25.     .main-box {
  26.         background: rgba(217, 224, 236, 0.9);
  27.         box-shadow: 1px 1px 25px rgba(99, 121, 160, 0.1), 1px -1px 25px rgba(99, 121, 160, 0.1), -1px -1px 25px rgba(99, 121, 160, 0.1), -1px 1px 25px rgba(99, 121, 160, 0.1);
  28.         color: rgb(80, 80, 80);
  29.         font-family: 'Source Sans Pro';
  30.         font-size: 18px
  31.     }
  32.  
  33.     .credits {
  34.  
  35.         text-align: center;
  36.         font-family: courier;
  37.         font-size: 14px;
  38.         color: rgb(100, 100, 100);
  39.         font-weight: bold;
  40.  
  41.     }
  42.  
  43.     .credits a {
  44.         text-decoration: none;
  45.         color: white;
  46.         transition: 0.5s
  47.     }
  48.  
  49.     .credits a:hover {
  50.         color: #FF9391
  51.     }
  52.  
  53.     /* --- HEADER --- */
  54.     .header {
  55.  
  56.         background: url(https://cdnb.artstation.com/p/assets/images/images/013/002/493/original/abe-abdulghaffar-koi-fish-animation-20160831-large2.gif?1537568485);
  57.     }
  58.  
  59. .header-fade {
  60.         background: linear-gradient(to bottom, rgb(255, 255, 255, 0.2), rgb(217, 224, 236));
  61.         height: 100%
  62.     }
  63.  
  64.     .header-css {
  65.         padding: 1px;
  66.         text-align: center;
  67.         color: rgb(80, 80, 80)
  68.     }
  69.  
  70.     .subject {
  71.         font-family: 'Merienda One';
  72.         font-size: 45px;
  73.         letter-spacing: 5px;
  74.         margin: 10px 0px 0px 0px
  75.     }
  76.  
  77.     .title {
  78.         margin: 0px 0px 0px 0px
  79.     }
  80.  
  81.     .yearweek {
  82.         color: rgb(80, 80, 80);
  83.         font-size: 14px;
  84.         letter-spacing: 5px;
  85.         font-weight: bold
  86.     }
  87.  
  88.     /* --- LESSON CONTENT CSS --- */
  89.  
  90.     .content {
  91.  
  92.         border: 2px solid rgb(80, 80, 80);
  93.     }
  94.  
  95.     .content-light {
  96.         background: rgb(80, 80, 80)
  97.     }
  98.  
  99.  
  100.     ::selection {
  101.         background: rgba(149, 193, 220, 0.7)
  102.     }
  103.  
  104.     /* ----------- DO NOT TOUCH THIS CSS BEYOND THIS LINE (or else it will break) -------------- */
  105.  
  106.     .background {
  107.         background: inherit center fixed
  108.     }
  109.  
  110.     .main-box {
  111.         max-width: 600px;
  112.         padding: 0px 0px 20px;
  113.         margin-left: auto;
  114.         margin-right: auto;
  115.     }
  116.  
  117.     .credits {
  118.         max-width: 600px;
  119.         margin-left: auto;
  120.         margin-right: auto;
  121.         margin-bottom: 5px
  122.     }
  123.  
  124.     .header {
  125.         width: 100%;
  126.         height: 200px;
  127.         background-size: 100%
  128.     }
  129.  
  130.  
  131.  
  132.     .content {
  133.         width: 85%;
  134.         margin: 20px auto 0px auto;
  135.         padding: 30px 25px
  136.     }
  137.  
  138.     img {
  139.         display: block;
  140.         margin-left: auto;
  141.         margin-right: auto
  142.     }
  143.  
  144.     h1,
  145.     h2,
  146.     h3 {
  147.         text-align: center;
  148.         margin: 0px
  149.     }
  150.  
  151.     /* MOBILE CSS */
  152.     @media screen and (max-width: 580px) {
  153.  
  154.         .content {
  155.             width: 70%
  156.         }
  157.  
  158.         .header {
  159.             height: 50%
  160.         }
  161.  
  162.     }
  163. </style>
  164. <link href='https://fonts.googleapis.com/css?family=Source Sans Pro|Merienda One' rel='stylesheet'>
  165.  
  166. <body>
  167.     <div class="background">
  168.         <div class="credits">&copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a></div>
  169.         <div class="main-box">
  170.             <div class="header">
  171.                 <div class="header-fade">
  172.                     <div class="header-css">
  173.                         <h1 class="subject">Subject Title</h1>
  174.                         <h2 class="title">Title of the lesson </h2>
  175.                         <br><br>
  176.                         <p class="yearweek">Year No., Week No.</p>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.             <div class="content" style="text-indent:15px;text-align:justify;">
  181.  
  182.                 <img src="https://i.pinimg.com/564x/6f/36/5a/6f365af397399a9cd409804de6ca19c1.jpg" alt="lesson-image" style="width:70%;" />
  183.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.
  184.  
  185.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.
  186.  
  187.  
  188.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim.
  189.  
  190.                     Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.</p>
  191.  
  192.             </div>
  193.             <div class="content">
  194.                 <h1>◈ Homework ◈</h1>
  195.                 <p>Place the <b>instructions</b> here:</p>
  196.                 <ul>
  197.                     <li>Question 1</li>
  198.                     <li>Question 2</li>
  199.                     <li>Question 3</li>
  200.                     <li>Question 4</li>
  201.                 </ul>
  202.  
  203.                 <div class="content content-light" style="color:white">
  204.                     <h1>◈ Requirements ◈</h1>
  205.                     <ul>
  206.                         <li>Requirement 1</li>
  207.                         <li>Requirement 2</li>
  208.                         <li>Requirement 3</li>
  209.                         <li>Requirement 4</li>
  210.                     </ul>
  211.  
  212.                     <h3>Additional Note from the <span style="color:#9CE065">Instructor / Professor / Teacher</span> place here...</h3>
  213.                 </div>
  214.                 <br>
  215.                 <img src="https://i.imgur.com/j6ZjGL8.png" alt="signature" />
  216.             </div>
  217.         </div>
  218.     </div>
  219. </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!