API tools faq
paste
Advertisement
kay_kodes

aluminium cans || lesson

kay_kodes
Aug 1st, 2023 (edited)
665
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.69 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/rhinatta-script" rel="stylesheet">
  3.  
  4.  
  5. <center>
  6. <style>
  7. /*Scrollbar*/
  8. ::-webkit-scrollbar {width: 0px}
  9. ::-webkit-scrollbar-track {background: #dcdcdc}
  10. ::-webkit-scrollbar-thumb {background: #5f9ea0}
  11. ::-webkit-scrollbar-thumb:hover {background: #5f9ea0}
  12.  
  13. /*BOX EFFECTS*/
  14. .zoom{
  15. transition: all 1.5s
  16.  
  17. }
  18. .zoom:hover {
  19. transform: translateY(-7px);
  20. transform: scale(1.02);
  21.  
  22.  
  23. }
  24.  
  25. .zoom:active {
  26. transform: translateY(-1px);
  27. }
  28.  
  29. /*IMAGE EFFECTS*/
  30. .img:hover {
  31. outline: none;
  32. filter:brightness(120%);
  33. transition: all 0.5s ease 0s;
  34.  
  35. }
  36.  
  37. .img:active {
  38. transform: translateY(-1px);
  39. transition: all 0.7s ease 0s;
  40.  
  41. }
  42.  
  43. /*IMAGE 1 EFFECTS*/
  44. .img1:hover {
  45. outline: none;
  46. filter:brightness(120%);
  47. transition: all 0.5s ease 0s;
  48. transform: translateY(-2px);
  49. transform:rotate(4deg);
  50.  
  51. }
  52.  
  53. .img1:active {
  54. transform: translateY(-2px);
  55. transition: all 0.7s ease 0s;
  56.  
  57. }
  58.  
  59. /*IMAGE 2 EFFECTS*/
  60. .img2:hover {
  61. outline: none;
  62. filter:brightness(120%);
  63. transition: all 0.5s ease 0s;
  64. transform: translateY(-2px);
  65. transform:rotate(-3deg);
  66.  
  67. }
  68.  
  69. .img2:active {
  70. transform: translateY(-2px);
  71. transition: all 0.7s ease 0s;
  72.  
  73.  
  74.  
  75. </style>
  76.  
  77. <br>
  78.  
  79. <a href="https://kaykodes.tumblr.com/" style="color:#808080;font-size:15px;margin-left:-570"><b><u>by kay kodes</u></b></a>
  80.  
  81. <!--PAGE DETAILS-->
  82. <div class="zoom" style="background:#fff;background-size:cover;width:650px;height:900px;outline:4px #679267 solid;outline-offset:-12px;margin-top:10px;box-shadow:0 0 15px #000;overflow:hidden">
  83.  
  84. <br>
  85.  
  86. <center>
  87. <br>
  88.  
  89.  
  90. <!--FULL NAME-->
  91. <h style="font-size:40px;color:#679267 ;font-family:'rhinatta script';text-shadow: 0 0 1px #dcdcdc, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #000, 0 0 1px #000">- Lesson Name Here -</h>
  92.  
  93. <br>
  94.  
  95. <!--QUOTE-->
  96. <i style="font-size:15px;letter-spacing:2px">YEAR # WEEK # // <b style="color:#6caf37">Your Name Here</b></i>
  97.  
  98. <hr style="width:80%">
  99.  
  100. <!--
  101. outbox = place setting for the text
  102. innerbox = to control and edit the overflow scrollbar
  103. textbox = text
  104.  
  105. safe changes = height, font and text details
  106.  
  107. i would refrain messing with the margins and overflow as well as the width because i already measured it specially for this template. you are free to do with it but this is just a forewarning <3 if you need help, i'm avail to contact.
  108.  
  109. -->
  110.  
  111. <!--OUTER BOX-->
  112. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:80%;text-align:justify;margin-right:10px;margin-left:10px;height:450px;overflow:auto;margin-top:10px;border:6px double #679267;overflow-x:hidden">
  113.  
  114. <center>
  115.  
  116. <!--INNER BOX-->
  117. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:500px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;overflow:auto;margin-bottom:10px;overflow-x:hidden">
  118.  
  119. <!--TEXT BOX-->
  120. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:480px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  121.  
  122. <br>
  123.  
  124. <div class="img1">
  125. <img src="https://i.pinimg.com/564x/c5/47/3c/c5473c8d8b11cc14321554323f11d699.jpg" style="width:150px;height:120px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  126. Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  127.  
  128.  
  129. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  130.  
  131. <p>
  132.  
  133. <div class="img2">
  134. <img src="https://i.pinimg.com/564x/48/ab/1d/48ab1d5f2db8525dd31d688badb5c84b.jpg" style="width:150px;height:180px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  135. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  136.  
  137.  
  138. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  139.  
  140. <br><br>
  141.  
  142. </div>
  143. </div></div>
  144.  
  145. <!--OUTER BOX-->
  146. <div style="text-align:justify;border:6px double #679267;color:#fff;font-family:'Times New Roman';font-size:15px;width:80%;text-align:justify;margin-right:10px;margin-left:10px;height:250px;margin-top:10px;overflow:auto">
  147. <center>
  148.  
  149. <!--INNER BOX-->
  150. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:500px;text-align:justify;margin-right:10px;margin-left:10px;height:230px;overflow:auto">
  151.  
  152. <!--TEXT BOX-->
  153. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:450px;text-align:justify;margin-right:10px;margin-left:10px;height:230px;margin-bottom:10px;margin-top:10px">
  154.  
  155. <h style="font-family:'rhinatta script';font-size:35px;color:#679267">Assignment</h>
  156. <br><i>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. </i>
  157. <p>
  158. ✧ Assignment Here<br>
  159. ✧ Assignment Here<br>
  160. ✧ Assignment Here
  161.  
  162. <br><br>
  163. <hr>
  164. <br>
  165.  
  166. <h style="font-family:'rhinatta script';font-size:35px;color:#679267">Requirement</h>
  167. <br><i>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. </i>
  168. <p>
  169. ✧ Requirement Here<br>
  170. ✧ Requirement Here<br>
  171. ✧ Requirement Here
  172.  
  173. </center>
  174. </div>
  175. </div></div>
  176. <br>
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!