API tools faq
paste
Advertisement
kay_kodes

expiration dates are for the weak || club/backstory

kay_kodes
Apr 11th, 2022
261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.04 KB | None | 0 0
raw download clone embed print report
  1. ♡ heylo there! i see you're back for another code? you're in luck because i happen to have one right here! so basically, i'm dedicating this one to one of my bestest friends, Petra. when i got covid, she was the first to send me such an encouraging message and kept checking up on me. she makes me smile and basically makes my day. so petra...if you're reading this, thank you <3. but to the code's theme, i was looking at some bookish aesthetics and i stumbled upon one based on Ali Hazelwood's book, The Love Hypothesis. i've heard about it and read quotes from it from bookstagram and/or booktok. i absolutely love olive's and adam's chemistry (and yes pun intended) and the aesthetics as well. i don't think i'm old enough to read the book but it's definitely on my tbr (to be read). right! hope you like it. we're flying solo on this one because i've never read the book but just made the code based on the aesthetics. as usual...keep the credit and have fun! ♡
  2.  
  3. PS: i'm categorizing this code under backstory as it also can be used for that :)
  4.  
  5. best dreams,
  6. kay <3
  7.  
  8.  
  9. --CODE STARTS BELOW THIS TEXT--
  10. <html>
  11. <center>
  12. <link href='https://fonts.googleapis.com/css?family=Almendra SC' rel='stylesheet'>
  13. <style>
  14. /*Scrollbar*/
  15. ::-webkit-scrollbar {width: 0px;}
  16. ::-webkit-scrollbar-thumb {background: #fff;}
  17. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  18. .box{
  19. position: relative;
  20. text-align: center;
  21.  
  22. }
  23. /* From cssbuttons.io */
  24. button {
  25. align-items: center;
  26. justify-content: center;
  27. gap: 10px;
  28. font-family: inherit;
  29. font-size: 13px;
  30. font-weight: 500;
  31. text-transform: uppercase;
  32. letter-spacing: 0.4px;
  33. color: #e3dac9;
  34. height: 100px;
  35. width: 100px;
  36. background-color: #d1bea8;
  37.  
  38. border-style: double;
  39. border-width: 5px;
  40. border-color: #e3dac9;
  41. border-radius: 50%;
  42. padding: 16px 24px 16px 28px;
  43. transform: translate(0px, 0px) rotate(0deg);
  44. transition: 0.2s;
  45. box-shadow: -4px -2px 16px 0px #b38b6d, 4px 2px 16px 0px #b38b6d;
  46. }
  47.  
  48. button:hover {
  49. color: #516d91;
  50. background-color: #e0d0bc;
  51. box-shadow: -2px -1px 8px 0px #c3b091, 2px 1px 8px 0px #c3b091;
  52. }
  53.  
  54. button:active {
  55. box-shadow: none;
  56.  
  57. }
  58. .booktitle{
  59. font-family:'Sacramento';
  60. font-size:80px;
  61. color:#00539c;
  62. position: absolute;
  63. top: 50%;
  64. left: 50%;
  65. transform: translate(-50%, -50%);
  66. }
  67. .page{
  68. text-decoration: none;
  69. color:black;
  70. overflow: auto;
  71. padding: 10px
  72. }
  73. .columnone{
  74. border-color: #fff;
  75. border: 10px;
  76. width: 200px;
  77. height: 700px;
  78. float: left;
  79.  
  80.  
  81. }
  82. .columntwo{
  83. width: 500px;
  84. height: 900px;
  85. overflow: auto;
  86. color: #000;
  87. text-align: justify;
  88.  
  89. }
  90. .assignment-box{
  91. float: center;
  92. text-align: center;
  93. font-size: 15px;
  94. max-width: 100%;
  95. max-height:100%;
  96. border: 5px #e3dac9 double;
  97. overflow: auto;
  98. background-color: #d1bea8;
  99.  
  100.  
  101. }
  102. .requirements-box{
  103. float: center;
  104. text-align: center;
  105. font-size: 15px;
  106. max-width: 100%;
  107. max-height:100%;
  108. border: 5px #e3dac9 double;
  109. overflow: auto;
  110. background-color: #d1bea8;
  111. margin-top:10px
  112. }
  113. .notes-box{
  114. float: center;
  115. text-align: center;
  116. font-size: 15px;
  117. max-width: 100%;
  118. max-height:100%;
  119. border: 5px #e3dac9 double;
  120. overflow: auto;
  121. background-color: #d1bea8;
  122. margin-top:10px
  123. }
  124.  
  125. </style>
  126. <a name="one">
  127. <div style="background:#faf0e6;border:10px double #d1bea8;width:720px;height:810px;border-radius:0px;overflow:auto">
  128. <div class="box">
  129. <center>
  130. <img src="https://fontmeme.com/permalink/220411/c8a411b671617e5f66fab885842061b4.png" alt="style-script-font" border="0" style="margin-top:30px; width:500px;margin-bottom:10px">
  131. </center></div>
  132.  
  133. <div class="columnone">
  134. <div style="background: #faf0e6;padding:5%;border:#faf0e6 2px double;width:175px;height:700px;float:left;margin-right:10px;margin-left:4px;margin-top:25px">
  135. <center>
  136. <div class="tab">
  137. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen" style="color:#fff"></button><br><br>
  138.  
  139. <button class="tablinks" onclick="openCity(event, 'two')" style="color:#fff"></button><br><br>
  140.  
  141. <button class="tablinks" onclick="openCity(event, 'three')"></button><br><br>
  142.  
  143. <button class="tablinks" onclick="openCity(event, 'four')"></button><br><br>
  144.  
  145. <img src="https://i.pinimg.com/474x/4b/42/0d/4b420d6d0d6be8e0e2d60e9e53cc12a9.jpg" style="width:170px;height:170px;border: 5px double #e3dac9;border-radius:100%">
  146. <br><br>
  147. <img src="https://i.pinimg.com/474x/a8/f4/2a/a8f42a2daf8f4617686b2a377b8501bf.jpg" style="width:170px;height:170px;border: 5px double #e3dac9;border-radius:100%">
  148. </div>
  149. </div>
  150. </div>
  151.  
  152. <div class="columntwo">
  153. <div id="one" class="tabcontent">
  154. <div style="margin-left: 10px;margin-right:10px ">
  155. <center><h2><img src="https://fontmeme.com/permalink/220411/8740f04786c327b8a91463245f5e188c.png" alt="style-script-font" border="0" style="margin-top:10px;width:200px"></h2></center>
  156. <center><b>Title 'Club Name Here' Font: Rainbow Saturday</b>
  157. <p><b>Subtitles (in each page) Font: Winter Sunday</b>
  158. </center>
  159. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  160. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  161. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  162. <p>Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  163. </div>
  164. </div>
  165. <br>
  166.  
  167.  
  168. <div id="two" class="tabcontent">
  169. <div style="margin-left: 10px">
  170. <center><h2><img src="https://fontmeme.com/permalink/220411/e6e4335ec3506dcf81e8d4b438a5490f.png" alt="style-script-font" border="0" style="margin-top:10px;width:200px"></h2></center>
  171. <center>
  172. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  173. <img src="https://i.pinimg.com/474x/ef/72/ca/ef72caa16571df34d3f3e6df52e86479.jpg" style="width:170px;height:170px;border: 5px double #fff;border-radius:100%"><br>
  174. <img src="https://fontmeme.com/permalink/220411/96ce9ca31ec818785db6626fc51c61e6.png" style="width:100px"><br><br>
  175. <img src="https://i.pinimg.com/474x/64/4f/07/644f0774d275e450f720a9f247b62c0e.jpg" style="width:170px;height:170px;border: 5px double #fff;border-radius:100%"><br>
  176. <img src="https://fontmeme.com/permalink/220411/96ce9ca31ec818785db6626fc51c61e6.png" style="width:100px"><br><br>
  177. <img src="https://i.pinimg.com/474x/4a/22/6c/4a226c3d70f9dfb7968b9aed9e5f473f.jpg" style="width:170px;height:170px;border: 5px double #fff;border-radius:100%"><br>
  178. <img src="https://fontmeme.com/permalink/220411/96ce9ca31ec818785db6626fc51c61e6.png" style="width:100px"><br><br>
  179. </center>
  180. <div>
  181. </div>
  182. <br></div></div>
  183.  
  184.  
  185. <div id="three" class="tabcontent">
  186. <div style="margin-left: 10px">
  187. <center><h2><img src="https://fontmeme.com/permalink/220411/d1d9e0646faa02b9e758ca8a440703ad.png" alt="style-script-font" border="0" style="margin-top:10px;width:320px"></h2></center>
  188. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  189. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  190. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Donec ac odio tempor orci dapibus ultrices in. Lacus sed viverra tellus in. Vel pharetra vel turpis nunc. Eget dolor morbi non arcu. Magna fermentum iaculis eu non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada. Adipiscing bibendum est ultricies integer quis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Facilisis volutpat est velit egestas dui id ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Varius vel pharetra vel turpis nunc eget.</p>
  191.  
  192. <div>
  193. </div>
  194. <br></div></div>
  195. <div id="four" class="tabcontent">
  196. <div style="margin-left: 10px">
  197. <center><h2><img src="https://fontmeme.com/permalink/220411/7b87e6be8ff172842ce251f1695d0023.png" alt="style-script-font" border="0" style="margin-top:10px;width:250px"></h2></center>
  198. <center>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Donec ac odio tempor orci dapibus ultrices in. Lacus sed viverra tellus in. Vel pharetra vel turpis nunc. Eget dolor morbi non arcu. Magna fermentum iaculis eu non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada. Adipiscing bibendum est ultricies integer quis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Facilisis volutpat est velit egestas dui id ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Varius vel pharetra vel turpis nunc eget.</center>
  199. <br><br>
  200. <div class="assignment-box">
  201.  
  202. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  203.  
  204. <summary style="font-size:px;font-weight:bold">
  205. <div class="body">
  206. <center><img src="https://fontmeme.com/permalink/220411/31147dcb971a3ab8605e4f809aecd398.png" style="width:100px;margin-left:;margin-top:1px">
  207. </div> </summary>
  208. <div style="margin-left:10px">
  209. <p>
  210. Lorem ipsum dolor sit amet. Eum quisquam cupiditate et vitae blanditiis voluptatem asperiores sit sint corporis vel consequatur aperiam aut laudantium dolore. Aut consequatur eligendi et numquam laudantium et vero mollitia qui facere aspernatur qui praesentium mollitia ut distinctio aspernatur At neque error.
  211. </p></div></details>
  212. </div>
  213.  
  214. <div class="requirements-box">
  215.  
  216. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  217.  
  218. <summary style="font-size:px;font-weight:bold">
  219. <div class="body">
  220. <center><img src="https://fontmeme.com/permalink/220411/31147dcb971a3ab8605e4f809aecd398.png" style="width:100px;margin-left:;margin-top:1px">
  221. </div> </summary>
  222. <div style="margin-left:10px">
  223. <p>
  224. Lorem ipsum dolor sit amet. Eum quisquam cupiditate et vitae blanditiis voluptatem asperiores sit sint corporis vel consequatur aperiam aut laudantium dolore. Aut consequatur eligendi et numquam laudantium et vero mollitia qui facere aspernatur qui praesentium mollitia ut distinctio aspernatur At neque error.
  225. </p></div></details>
  226. </div>
  227.  
  228. <div class="notes-box">
  229.  
  230. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  231.  
  232. <summary style="font-size:px;font-weight:bold">
  233. <div class="body">
  234. <center><img src="https://fontmeme.com/permalink/220411/31147dcb971a3ab8605e4f809aecd398.png" style="width:100px;margin-left:;margin-top:1px">
  235. </div> </summary>
  236. <div style="margin-left:10px">
  237. <p>
  238. Lorem ipsum dolor sit amet. Eum quisquam cupiditate et vitae blanditiis voluptatem asperiores sit sint corporis vel consequatur aperiam aut laudantium dolore. Aut consequatur eligendi et numquam laudantium et vero mollitia qui facere aspernatur qui praesentium mollitia ut distinctio aspernatur At neque error.
  239. </p></div></details>
  240. </div>
  241. <div class="notes-box">
  242.  
  243. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  244.  
  245. <summary style="font-size:px;font-weight:bold">
  246. <div class="body">
  247. <center><img src="https://fontmeme.com/permalink/220411/31147dcb971a3ab8605e4f809aecd398.png" style="width:100px;margin-left:;margin-top:1px">
  248. </div> </summary>
  249. <div style="margin-left:10px">
  250. <p>
  251. Lorem ipsum dolor sit amet. Eum quisquam cupiditate et vitae blanditiis voluptatem asperiores sit sint corporis vel consequatur aperiam aut laudantium dolore. Aut consequatur eligendi et numquam laudantium et vero mollitia qui facere aspernatur qui praesentium mollitia ut distinctio aspernatur At neque error.
  252. </p></div></details>
  253. </div>
  254. <div class="notes-box">
  255.  
  256. <details style="padding:0px 0; border:0px solid #000; padding:px;">
  257.  
  258. <summary style="font-size:px;font-weight:bold">
  259. <div class="body">
  260. <center><img src="https://fontmeme.com/permalink/220411/31147dcb971a3ab8605e4f809aecd398.png" style="width:100px;margin-left:;margin-top:1px">
  261. </div> </summary>
  262. <div style="margin-left:10px">
  263. <p>
  264. Lorem ipsum dolor sit amet. Eum quisquam cupiditate et vitae blanditiis voluptatem asperiores sit sint corporis vel consequatur aperiam aut laudantium dolore. Aut consequatur eligendi et numquam laudantium et vero mollitia qui facere aspernatur qui praesentium mollitia ut distinctio aspernatur At neque error.
  265. </p></div></details>
  266. <div>
  267.  
  268. </div></div></div></div> </div> </div>
  269.  
  270. <div><center><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:12px;"><b><u>kay kodes</u></b></a></center>
  271.  
  272. <link rel="preconnect" href="https://fonts.googleapis.com">
  273. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  274. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  275.  
  276. <script>
  277. function openCity(evt, cityName) {
  278. var i, tabcontent, tablinks;
  279. tabcontent = document.getElementsByClassName("tabcontent");
  280. for (i = 0; i < tabcontent.length; i++) {
  281. tabcontent[i].style.display = "none";
  282. }
  283. tablinks = document.getElementsByClassName("tablinks");
  284. for (i = 0; i < tablinks.length; i++) {
  285. tablinks[i].className = tablinks[i].className.replace(" active", "");
  286. }
  287. document.getElementsByClassName("tablinks");
  288. for (i = 0; i < tablinks.length; i++) {
  289. tablinks[i].className = tablinks[i].className.replace(" active", "");
  290. }
  291. document.getElementById(cityName).style.display = "block";
  292. evt.currentTarget.className += " active";
  293. }
  294.  
  295. // Get the element with id="defaultOpen" and click on it
  296. document.getElementById("defaultOpen").click();
  297. </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!