API tools faq
paste
Advertisement
kay_kodes

faith, trust, and pixie dust || lesson

kay_kodes
Jun 13th, 2023 (edited)
290
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.70 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <!-- title font-->
  3. <link href="https://fonts.cdnfonts.com/css/ayah" rel="stylesheet">
  4.  
  5.  
  6.  
  7.  
  8. <style>
  9. /*Scrollbar*/
  10. ::-webkit-scrollbar {width: 0px;}
  11. ::-webkit-scrollbar-thumb {background: #fff;}
  12. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  13.  
  14. }
  15.  
  16. /*BOX EFFECTS*/
  17. .zoom{
  18. transition: all 0.3s ease 0s;
  19.  
  20. }
  21. .zoom:hover {
  22. transform: translateY(-7px);
  23. transition: all 0.3s ease 0s;
  24. }
  25.  
  26. .zoom:active {
  27. transform: translateY(-1px);
  28.  
  29. }
  30. /*AESTHETIC IMAGES EFFECTS*/
  31. .aesimg:hover {
  32. outline: none;
  33. filter:grayscale(100%);
  34. transition: all 0.5s ease 0s;
  35.  
  36. }
  37.  
  38. /*OTHER IMAGES EFFECTS*/
  39. .otrimg:hover {
  40. outline: none;
  41. filter:grayscale(100%);
  42. transition: all 0.3s ease 0s;
  43. transform: translateY(-7px);
  44.  
  45. }
  46.  
  47. .otrimg:active {
  48. transform: translateY(-1px);
  49. transition: all 0.3s ease 0s;
  50.  
  51. }
  52.  
  53. </style>
  54.  
  55.  
  56. <div style="background:url('https://i.pinimg.com/564x/97/e4/50/97e450748b1682ca8bdea8d21de08d14.jpg');padding:30px;border:4px #000 solid;width:800px;height:900px;margin:auto;text-align:justify;overflow:hidden;border-radius:20px;background-size:cover">
  57.  
  58. <!-- QUOTE BOX -->
  59. <div class="zoom">
  60. <div style="background:#8f9779;text-align:justify;border-radius:20px;color:#fff;font-family:'ayah';font-size:55px;width:800px;height:80px;border-radius:20px;margin-top:-10px; box-shadow: 1px 1px 6px 2px #000">
  61. <!--quotehere-->
  62. <center>
  63. Lesson Name Here
  64. </center>
  65. </div></div>
  66.  
  67. <br>
  68. <br>
  69.  
  70. <!-- RPG LESSON -->
  71. <div class="zoom">
  72. <div style="background:#8f9779;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:14px;width:500px;height:800px;border-radius:20px;text-align:justify;float:left; box-shadow: 1px 1px 6px 2px #000;overflow:auto">
  73. <br>
  74.  
  75. <!-- TEXT BOX -->
  76. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:17px;width:480px;text-align:justify;margin-right:10px;margin-left:10px">
  77.  
  78. <img src="https://i.pinimg.com/236x/52/93/3d/52933d22eae03eb45c04a1e2d07139e0.jpg" style="width:200px;height:250px;border:5px double #fff ;object-fit:cover;margin-right:10px;float:left" />
  79.  
  80. 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:#5a6149">"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.
  81. <p>
  82.  
  83. 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.
  84. <p>
  85.  
  86. 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:#5a6149">"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>
  87.  
  88. <p>
  89. 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.
  90. <p>
  91.  
  92. 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:#5a6149">"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>
  93.  
  94.  
  95. </div></div></div>
  96.  
  97.  
  98.  
  99.  
  100. <!-- HOMEWORK -->
  101. <div class="zoom">
  102. <div style="background:#8f9779;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:270px;height:400px;border-radius:20px;text-align:justify;float:right;margin-top:0px;overflow:auto;margin-left:15px; box-shadow: 1px 1px 6px 2px #000 ">
  103.  
  104. <br>
  105.  
  106. <!-- TEXT BOX -->
  107. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:17px;width:250px;text-align:justify;margin-right:10px;margin-left:10px">
  108. <center><p><b>HOMEWORK</b>
  109. <p>
  110. ❧ Assignment Here<br>
  111. ❧ Assignment Here<br>
  112. ❧ Assignment Here
  113. </center>
  114.  
  115. <br>
  116.  
  117. <center><b>REQUIREMENTS</b>
  118. <p>
  119. ❧ Requirement Here<br>
  120. ❧ Requirement Here<br>
  121. ❧ Requirement Here
  122. </center>
  123.  
  124. <br>
  125.  
  126. <center><b>NOTES</b>
  127. <p>
  128. "Note Here"
  129.  
  130. </center>
  131. </div></div></div>
  132.  
  133.  
  134. <!-- ASSISTANT INSTRUCTORS -->
  135. <div class="zoom">
  136. <div style="background:#8f9779;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:270px;height:150px;border-radius:20px;text-align:justify;float:right;margin-top:20px;overflow:hidden;margin-left:15px; box-shadow: 1px 1px 6px 2px #000 ">
  137.  
  138. <br>
  139.  
  140. <!-- TEXT BOX -->
  141. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:17px;width:250px;text-align:justify;margin-right:10px;margin-left:10px">
  142. <center><b>MY MAGICAL ATs</b></center>
  143. <p>
  144. <center>
  145.  
  146. <!-- the reason why i put a style color on the link is because there is a small line that appears under the images because it's a link. feel free to change it to whatever background color you decide to use to make that line invisible. -->
  147.  
  148.  
  149. <a href="SOURCE TO PROFILE" style="color:#8f9779">
  150. <img src="https://media.tenor.com/tvBNen90mv8AAAAC/fawn-tinkerbell-fawn-fairy.gif" style="width:80px;height:80px;border:6px double #fff ;object-fit:cover;margin-right:10px;border-radius:100px" />
  151. </a>
  152.  
  153.  
  154. <a href="SOURCE TO PROFILE" style="color:#8f9779">
  155. <img src="https://media.tenor.com/gLiJxaUyi10AAAAd/iridessa-disney-fairies.gif" style="width:80px;height:80px;border:6px double #fff ;object-fit:cover;margin-right:10px;border-radius:100px" />
  156. </a>
  157.  
  158. </center>
  159. </div></div></div>
  160.  
  161.  
  162. <!-- SIGNATURE -->
  163. <div class="zoom">
  164. <div style="background:#8f9779;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:270px;height:210px;border-radius:20px;text-align:justify;float:right;margin-top:20px;overflow:hidden;margin-left:15px; box-shadow: 1px 1px 6px 2px #000 ">
  165.  
  166. <br>
  167.  
  168. <!-- SIG & PFP -->
  169. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:250px;text-align:justify;margin-right:10px;margin-left:10px">
  170. <p>
  171. <center>
  172.  
  173. <!-- FACECLAIM -->
  174. <a href="SOURCE TO PROFILE" style="color:#8f9779">
  175. <img src="https://i.pinimg.com/originals/e3/ce/4c/e3ce4c0ae379593e51ae34445b9b1808.gif" style="width:100px;height:100px;border:6px double #fff ;object-fit:cover;border-radius:100px" />
  176.  
  177. </a>
  178. <br>
  179.  
  180. <!-- SIGNATURE -->
  181. <img src="https://fontmeme.com/permalink/230613/d9aeb44330fc26685370fcc3dd37e82c.png"style="width:220px;margin-top:5px">
  182.  
  183.  
  184.  
  185.  
  186. </center>
  187.  
  188. </div></div></div>
  189.  
  190. <div>
  191. <div>
  192.  
  193. </div></div></div></div></div> </div>
  194.  
  195. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:15px"><b><u>kay kodes</u></b></a>
  196. </center>
  197.  
  198.  
  199. <link rel="preconnect" href="https://fonts.googleapis.com">
  200. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  201. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  202.  
  203. <script>
  204. function openCity(evt, cityName) {
  205. var i, tabcontent, tablinks;
  206. tabcontent = document.getElementsByClassName("tabcontent");
  207. for (i = 0; i < tabcontent.length; i++) {
  208. tabcontent[i].style.display = "none";
  209. }
  210. tablinks = document.getElementsByClassName("tablinks");
  211. for (i = 0; i < tablinks.length; i++) {
  212. tablinks[i].className = tablinks[i].className.replace(" active", "");
  213. }
  214. document.getElementsByClassName("tablinks");
  215. for (i = 0; i < tablinks.length; i++) {
  216. tablinks[i].className = tablinks[i].className.replace(" active", "");
  217. }
  218. document.getElementById(cityName).style.display = "block";
  219. evt.currentTarget.className += " active";
  220. }
  221.  
  222. // Get the element with id="defaultOpen" and click on it
  223. document.getElementById("defaultOpen").click();
  224. </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!