API tools faq
paste
kay_kodes

because i'm a lady || lesson

kay_kodes
Jun 6th, 2022
235
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.36 KB | None | 0 0
raw download clone embed print report
  1. ♡ it's 7.31 am and too early for me to be doing this but okay let's do this. hello everyone! i am back with another code. a lesson one this time. as i said on the previous code, i am going to make a matching lesson to the course overview. and tadaaa! disney's marie was set in france/paris therefore, i kept a more modern aesthetic to it. hope y'all will like it. enjoy and keep the credits. and yes it's too early for me to make cheesy threats :3 ♡
  2.  
  3. best dreams,
  4. kay <3
  5.  
  6.  
  7. --CODE STARTS BELOW THIS TEXT--
  8. <html>
  9. <center>
  10. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. <style>
  13. /*Scrollbar*/
  14. ::-webkit-scrollbar {width: 3px;}
  15. ::-webkit-scrollbar-thumb {background: #eee;}
  16. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  17. .box{
  18. position: relative;
  19. text-align: center;
  20.  
  21. }
  22. .page{
  23. text-decoration: none;
  24. color:black;
  25. padding: 10px
  26.  
  27. }
  28.  
  29. .columnone{
  30. float: left;
  31. width:220px;
  32. height:880px;
  33. background-color: rgba(255, 255, 255, 0.5);
  34. border: 2px #000 ;
  35. margin-left:10px;
  36. margin-right: 10px;
  37. margin-top:20px;
  38. margin-bottom: -25px;
  39. overflow:hidden;
  40. border-radius:10px
  41.  
  42.  
  43. }
  44. .columntwo{
  45. float:right;
  46. width:540px;
  47. height:880px;
  48. margin-right:10px;
  49. margin-bottom: 10px;
  50. overflow: auto;
  51. background-color: rgba(255, 255, 255, 0.5);
  52. margin-top:20px;
  53. border-radius:10px
  54.  
  55.  
  56.  
  57. }
  58. .assignment-box{
  59. float: center;
  60. text-align: center;
  61. font-size: 15px;
  62. max-width: 600px;
  63. max-height:700px;
  64. border: 0px #fff double;
  65. overflow: auto;
  66. background-color: rgba(255, 255, 255, 0.5);
  67. border-radius:10px
  68.  
  69.  
  70.  
  71. }
  72. .requirements-box{
  73. float: center;
  74. text-align: center;
  75. font-size: 15px;
  76. max-width: 600px;
  77. max-height:700px;
  78. border: 0px #fff double;
  79. overflow: auto;
  80. background-color: rgba(255, 255, 255, 0.5);
  81. margin-top:10px;
  82. border-radius:10px
  83.  
  84. }
  85. .notes-box{
  86. float: center;
  87. text-align: center;
  88. font-size: 15px;
  89. max-width: 600px;
  90. max-height:700px;
  91. border: 0px #fff double;
  92. overflow: auto;
  93. background-color: rgba(255, 255, 255, 0.5);
  94. margin-top:10px;
  95. border-radius:10px
  96. }
  97.  
  98. .zoom:hover {
  99. background-color: #fff;
  100. box-shadow: 0px 15px 20px #fff;
  101. color: #fff;
  102. transform: translateY(-7px);
  103.  
  104. }
  105.  
  106. .zoom:active {
  107. transform: translateY(-1px);
  108.  
  109. }
  110. .zoom{
  111. transition: all 0.3s ease 0s;
  112.  
  113. </style>
  114. <div class="zoom">
  115. <div style="background: rgba(60,60,60, 0.1);padding:45px;border:#000 0px solid;width:800px;height:40px;overflow:hidden;margin-top:30px;border-radius:10px;box-shadow: -4px -2px 16px 0px #000, 4px 2px 16px 0px #000">
  116. <center>
  117. <img src="https://fontmeme.com/permalink/220606/ed1ccbdfba72b5d1d5168d687038ff89.png" alt="style-script-font" border="0" style="width:600px;margin-top:-10px;margin-left:10px;margin-right:10px">
  118. </center>
  119. </div>
  120. </div>
  121.  
  122. <!--MAIN PAGE-->
  123. <div style="background:url(https://i.pinimg.com/474x/83/68/5d/83685dadc806700a8896c7a824799832.jpg);background-size:cover;border:0px solid #fff;width:800px;height:915px;border-radius:10px;overflow:auto;box-shadow: -4px -2px 16px 0px #000, 4px 2px 16px 0px #000;margin-top:30px">
  124.  
  125. <!--IMAGES-->
  126. <div class="columnone">
  127. <br>
  128. <img src="https://i.pinimg.com/474x/2a/2f/33/2a2f33a65e8af1404f7ff68d18efcee7.jpg" style="width:150px;height:150px;border: 3px solid #fff;object-fit:cover;border-radius:100%;margin-top:85px">
  129. <br>
  130. <img src="https://i.pinimg.com/474x/ed/7f/29/ed7f295c55cdfacba8df78907a3211b9.jpg" style="width:150px;height:150px;border: 3px solid #fff;object-fit:cover;border-radius:100%;margin-top:25px">
  131. <br>
  132. <img src="https://i.pinimg.com/474x/43/0a/1d/430a1d307c5aba7438648165ed8fb574.jpg" style="width:150px;height:150px;border: 3px solid #fff;object-fit:cover;border-radius:100%;margin-top:25px">
  133. <br>
  134. <img src="https://i.pinimg.com/474x/46/66/09/466609569046bb08c5c5b816d5af22a9.jpg" style="width:150px;height:150px;border: 3px solid #fff;object-fit:cover;border-radius:100%;margin-top:25px">
  135. </div>
  136.  
  137. <!--LESSON-->
  138. <div class="columntwo">
  139. <div style="text-align:justify;width:495px;height:655px;overflow-auto">
  140. <center><h2><img src="https://fontmeme.com/permalink/220606/5bdbd678744ebe581f9250479a5d7cdd.png" border="0" style="margin-top:10px;width:250px"></h2>
  141. </center>
  142.  
  143. 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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  144.  
  145. <p>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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  146.  
  147. <p>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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  148.  
  149. <p>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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  150.  
  151. <p>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. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendu.
  152. </div>
  153. </div>
  154.  
  155. <!--DROPDOWN BOXES-->
  156. <div style="background: rgba(255, 255, 255, 0.0);padding:5%;border:#000 0px solid;width:690px;height:300px;margin-left:10px;overflow:auto;margin-bottom:10px">
  157.  
  158. <!--assignment-->
  159. <div class="assignment-box">
  160. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  161. <summary style="font-size:px;font-weight:bold">
  162. <div class="body">
  163.  
  164. <center><img src="https://fontmeme.com/permalink/220606/cb9ad1ff8c67459c1e005532c410578f.png" style="width:200px;margin-left:;margin-top:1px;margin-bottom:5px">
  165. </div></summary>
  166. <div style="margin-right:10px;margin-left:10px">
  167. <p>
  168. <i>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.</i><br><br>
  169. 🕮 Add Assignment Here<br>
  170. 🕮 Add Assignment Here<br>
  171. 🕮 Add Assignment Here
  172. </p></div></details>
  173. </div>
  174. <br>
  175.  
  176. <!--requirement-->
  177. <div class="requirements-box">
  178. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  179. <summary style="font-size:px;font-weight:bold">
  180. <div class="body">
  181.  
  182. <center><img src="https://fontmeme.com/permalink/220606/8a2466d1a6737d2dc698ed4d3494406e.png" style="width:200px;margin-left:;margin-top:1px;margin-bottom:5px">
  183. </div></summary>
  184. <div style="margin-right:10px;margin-left:10px">
  185. <p>
  186. <i>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.</i><br><br>
  187. ✎ Add Requirement Here<br>
  188. ✎ Add Requirement Here<br>
  189. ✎ Add Requirement Here
  190. </p></div></details>
  191. </div>
  192. <br>
  193.  
  194. <!--notes-->
  195. <div class="notes-box">
  196. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  197. <summary style="font-size:px;font-weight:bold">
  198. <div class="body">
  199.  
  200. <center><img src="https://fontmeme.com/permalink/220606/1f9378d525ac3a0d27db41342ec5795b.png" style="width:100px;margin-left:;margin-top:1px;margin-bottom:5px">
  201. </div></summary>
  202. <div style="margin-right:10px;margin-left:10px">
  203. <p>
  204. <i>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.</i><br><br>
  205. ☆ Add Notes Here<br>
  206. ☆ Add Notes Here<br>
  207. ☆ Add Notes Here
  208. </p></div></details>
  209. </div>
  210. </div>
  211.  
  212.  
  213. <div>
  214. <div>
  215.  
  216.  
  217. </div></div></div></div> </div> </div>
  218.  
  219. <div class="zoom">
  220. <div style="background: rgba(60,60,60, 0.1);padding:45px;border:#000 0px solid;width:800px;height:40px;overflow:hidden;margin-top:30px;border-radius:10px;box-shadow: -4px -2px 16px 0px #000, 4px 2px 16px 0px #000">
  221. <center>
  222. <img src="https://fontmeme.com/permalink/220606/75ef87ecf25d11f09bfb3487ccfd21f5.png" alt="style-script-font" border="0" style="width:350px;margin-top:-10px;margin-left:10px;margin-right:10px">
  223. <img src="https://c.tenor.com/WTqJ_jfoyGEAAAAC/flirty-marie.gif" style="width:100px;height:100px;border: 3px solid #fff;object-fit:cover;border-radius:100%;margin-top:-30px">
  224. </center>
  225. </div>
  226.  
  227. <p>
  228. <!--credits: DO NOT REMOVE-->
  229. <div><center><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  230.  
  231. <link rel="preconnect" href="https://fonts.googleapis.com">
  232. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  233. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  234.  
  235. <script>
  236. function openCity(evt, cityName) {
  237. var i, tabcontent, tablinks;
  238. tabcontent = document.getElementsByClassName("tabcontent");
  239. for (i = 0; i < tabcontent.length; i++) {
  240. tabcontent[i].style.display = "none";
  241. }
  242. tablinks = document.getElementsByClassName("tablinks");
  243. for (i = 0; i < tablinks.length; i++) {
  244. tablinks[i].className = tablinks[i].className.replace(" active", "");
  245. }
  246. document.getElementsByClassName("tablinks");
  247. for (i = 0; i < tablinks.length; i++) {
  248. tablinks[i].className = tablinks[i].className.replace(" active", "");
  249. }
  250. document.getElementById(cityName).style.display = "block";
  251. evt.currentTarget.className += " active";
  252. }
  253.  
  254. // Get the element with id="defaultOpen" and click on it
  255. document.getElementById("defaultOpen").click();
  256. </script>
  257.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!