API tools faq
paste
Advertisement
kay_kodes

moony || lesson

kay_kodes
Jul 5th, 2023 (edited)
403
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.21 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/solami" rel="stylesheet">
  3. <link href="https://fonts.cdnfonts.com/css/htquickie" rel="stylesheet">
  4. <link href="https://fonts.cdnfonts.com/css/rustic-farmer" rel="stylesheet">
  5.  
  6.  
  7. <center>
  8. <style>
  9. /*Scrollbar*/
  10. ::-webkit-scrollbar {width: 0px;}
  11. ::-webkit-scrollbar-thumb {background: #fff;}
  12. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  13.  
  14. button {
  15. width:20px;
  16. height:20px;
  17. overflow: hidden;
  18. border:2px #3d2b1f solid;
  19. border-radius:100%;
  20. background-color:#3d2b1f;
  21. }
  22.  
  23. button:hover {
  24.  
  25. transform: translateY(-7px);
  26. transition: all 0.3s ease 0s;
  27. }
  28.  
  29. button:active {
  30. transform: translateY(-1px);
  31. </style>
  32.  
  33. <div style="background:url('https://i.pinimg.com/564x/4d/a1/28/4da12893439a6f80debbc123ace54427.jpg');background-size:cover;width:600px;height:650px;box-shadow: 1px 1px 6px 2px #696969;margin-bottom:5px">
  34.  
  35. <!--BUTTONS-->
  36. <div style="width:100px;height:485px;margin-top:130px;float:right;margin-right:-60px;border:px #fff solid">
  37.  
  38.  
  39. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen" style="margin-top:380px;margin-left:-60px"></button>
  40. <br>
  41. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen" style="margin-top:10px;margin-left:-60px"></button>
  42. <br>
  43. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen" style="margin-top:10px;margin-left:-60px"></button>
  44. </div>
  45.  
  46. <br>
  47. <div style="background:#3d2b1f;background-size:cover;width:520px;height:600px;outline:1px #fff solid;outline-offset:-12px;margin-top:10px">
  48. <br>
  49.  
  50.  
  51. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:450px;height:100px;outline:1px #fff solid;outline-offset:-10px;margin-top:10px">
  52.  
  53. <!-- TEXT BOX -->
  54. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'htquickie';font-size:30px;width:450px;text-align:justify;margin-right:10px;margin-left:10px">
  55. <center>
  56. <br>
  57. <b>Lesson Name Here</b>
  58. </center>
  59.  
  60. </div></div>
  61.  
  62.  
  63.  
  64. <div style="background-color:rgba(255,255,255,0.3);background-size:cover;width:450px;height:430px;outline:1px #fff solid;outline-offset:-10px;margin-top:10px;float:left;margin-left:35px;overflow:auto">
  65.  
  66. <!-- TEXT BOX -->
  67. <div id="one" class="tabcontent">
  68.  
  69. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Rustic Farmer';font-size:20px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  70. <br>
  71. <img src="https://i.pinimg.com/236x/07/96/5d/07965d68ab7b132d06f5a3cc0bed3d45.jpg" style="width:150px;height:200px;border:4px double #fff ;object-fit:cover;margin-right:10px;float:left" />
  72.  
  73. 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 style="color:#efdecd">"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.
  74. <p>
  75.  
  76. 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? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  77. <p>
  78.  
  79. 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? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet. 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 style="color:#efdecd">"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>
  80.  
  81. <p>
  82. 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? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  83. <p>
  84.  
  85. 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? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet. 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 style="color:#efdecd">"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>
  86.  
  87. </div></div>
  88.  
  89. <!-- REQUIREMENT & ASSIGNMENTS -->
  90. <div id="two" class="tabcontent">
  91.  
  92. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Rustic Farmer';font-size:20px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  93. <br>
  94. <center>
  95. <b style="font-family:solami;font-size:20px">Assignment</b>
  96. <br><br>
  97. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  98.  
  99. <br><br>
  100. ✧ Assignment Here<br>
  101. ✧ Assignment Here<br>
  102. ✧ Assignment Here
  103.  
  104. <br><br>
  105.  
  106.  
  107. <img src="https://i.pinimg.com/736x/7d/22/f5/7d22f50a4f802878d05cf28fc58ef3a0.jpg" style="width:300px;height:150px;border:4px double #fff ;object-fit:cover" />
  108.  
  109.  
  110. <br><br>
  111. <b style="font-family:solami;font-size:20px">Requirement</b>
  112. <br><br>
  113. Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
  114.  
  115. <br><br>
  116. ✧ Requirement Here<br>
  117. ✧ Requirement Here<br>
  118. ✧ Requirement Here
  119.  
  120. </center>
  121. <br>
  122. </div></div>
  123.  
  124.  
  125. <!-- TEXT BOX -->
  126. <div id="three" class="tabcontent">
  127.  
  128. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Rustic Farmer';font-size:20px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  129. <br>
  130. <center>
  131. <b style="font-family:solami;font-size:20px">Class Assistant Teachers</b>
  132. <br><br>
  133.  
  134. <!--FACECLAIM-->
  135. <img src="https://i.pinimg.com/originals/96/da/d8/96dad87ad34d4746087f5c61cdb9c506.gif" style="width:100px;height:100px;border:4px double #fff ;object-fit:cover" />
  136.  
  137. <!--FACECLAIM-->
  138. <img src="https://i.pinimg.com/originals/bd/1b/e1/bd1be16adae36f84e66758e68a5d2a5e.gif" style="width:100px;height:100px;border:4px double #fff ;object-fit:cover;margin-left:10px" />
  139.  
  140. <br><br>
  141.  
  142.  
  143. <b style="font-family:solami;font-size:20px">Professor</b>
  144. <br><br>
  145.  
  146. <!--FACECLAIM-->
  147. <img src="https://i.pinimg.com/originals/bd/e7/61/bde76181dc29cdd8e78fb5330ebefb89.gif" style="width:100px;height:100px;border:4px double #fff ;object-fit:cover" />
  148.  
  149. <br>
  150. <!-- SIGNATURE -->
  151. <img src="https://fontmeme.com/permalink/230705/4ed60d126df095c7092afe263be19614.png"style="width:220px;margin-top:10px">
  152.  
  153. </center>
  154.  
  155. </div></div>
  156.  
  157.  
  158.  
  159.  
  160.  
  161. </div></div></div>
  162. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  163.  
  164. <link rel="preconnect" href="https://fonts.googleapis.com">
  165. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  166. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  167.  
  168. <script>
  169. function openCity(evt, cityName) {
  170. var i, tabcontent, tablinks;
  171. tabcontent = document.getElementsByClassName("tabcontent");
  172. for (i = 0; i < tabcontent.length; i++) {
  173. tabcontent[i].style.display = "none";
  174. }
  175. tablinks = document.getElementsByClassName("tablinks");
  176. for (i = 0; i < tablinks.length; i++) {
  177. tablinks[i].className = tablinks[i].className.replace(" active", "");
  178. }
  179. document.getElementsByClassName("tablinks");
  180. for (i = 0; i < tablinks.length; i++) {
  181. tablinks[i].className = tablinks[i].className.replace(" active", "");
  182. }
  183. document.getElementById(cityName).style.display = "block";
  184. evt.currentTarget.className += " active";
  185. }
  186.  
  187. // Get the element with id="defaultOpen" and click on it
  188. document.getElementById("defaultOpen").click();
  189. </script>
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!