API tools faq
paste
Advertisement
kay_kodes

dear diary || book

kay_kodes
Jun 11th, 2023 (edited)
365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.67 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3.  
  4. <!--title font-->
  5. <link href="https://fonts.cdnfonts.com/css/bettaway" rel="stylesheet">
  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. button {
  15. width:150px;
  16. height:90px;
  17. margin-top:0px;
  18. overflow: hidden;
  19. border: 0px solid #fff;
  20. font-weight: bold;
  21. font-size: 20px;
  22. color:#fff;
  23. background:rgba(255, 255, 255, 0.0)
  24. </style>
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32. <!-- BOOK-->
  33. <center>
  34.  
  35. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:500px;height:773px;text-align:justify;border:1px solid #000">
  36.  
  37. <!--TITLE PAGE-->
  38. <div id="one" class="tabcontent">
  39. <div style="background:url('https://i.pinimg.com/564x/c6/ab/67/c6ab6728ed8691199b4c2285d226033d.jpg');text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:497px;height:770px;text-align:justify;overflow:hidden;border:2px solid #000;background-size:fit">
  40. <!--BUTTON-->
  41.  
  42. <!-- DO NOT CHANGE -->
  43. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-100px;float:left;width:50px;height:20px;background-color:#800000">→</button>
  44. <!-- - -->
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'bettaway';font-size:60px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;position:relative">
  52. <center>
  53.  
  54. <!--TITLE-->
  55. <br><br><br>Your Book Title
  56. </center>
  57. </div>
  58.  
  59. <center>
  60.  
  61. <br><br>
  62.  
  63. <!--AUTHOR PFP & DETAILS-->
  64. <img src="https://i.pinimg.com/originals/fb/b3/af/fbb3af7320bb3ed671f951528fe82cfb.gif" style="width:100px;height:100px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px">
  65. <p>
  66. <b>Written by:</b> Your Name Here
  67. <br>
  68.  
  69. <br><b>Publishing Date:</b> Date Here
  70. <br><b>Last Updated:</b> Date Here
  71.  
  72. <br>
  73. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-right:10px;width:50px;height:20px">→</button>
  74.  
  75. <br><br><br><br>
  76. <center><a href="https://kaykodes.tumblr.com/" style="color:#fff;font-size:12px"><b><u>kay kodes</u></b></a>
  77. </center>
  78.  
  79. </center>
  80.  
  81. <div>
  82. </div>
  83. </div>
  84. </div>
  85.  
  86.  
  87. <!--PAGE 2-->
  88. <div id="two" class="tabcontent">
  89. <div style="background:url('https://i.pinimg.com/564x/8d/19/49/8d194993f55a9f85f6fa2d602e1719f3.jpg');text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:497px;height:770px;text-align:justify;border:2px solid #000;background-size:fit;overflow:auto">
  90.  
  91.  
  92.  
  93.  
  94. <br><div style="text-align:justify;border-radius:0px;color:#000;font-family:'bettaway';font-size:60px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;position:relative">
  95.  
  96. <!--TITLE-->
  97. <center>
  98. A Title Here
  99. </center>
  100. </div>
  101.  
  102. <div style="text-align:justify;border-radius:0px;color:#000;font-size:15px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;overflow:auto">
  103. <br>
  104. 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.
  105.  
  106. <img src="https://i.pinimg.com/564x/77/7e/6d/777e6dd1e2c4b6754460dc209321ce4d.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left">
  107.  
  108. <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.
  109.  
  110. <img src="https://i.pinimg.com/236x/b3/1a/bc/b31abcb9fbee61ae8d30db599f9760b7.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:right">
  111.  
  112. <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.
  113.  
  114.  
  115. <center>
  116. <!--BUTTON-->
  117. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:20px;margin-right:10px;width:50px;height:20px;color:#000">←</button>
  118. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-right:10px;width:50px;height:20px;color:#000">→</button>
  119.  
  120. </center>
  121.  
  122. <div>
  123. </div>
  124. </div>
  125. </div></div>
  126.  
  127.  
  128. <!--PAGE 3-->
  129. <div id="three" class="tabcontent">
  130. <div style="background:url('https://i.pinimg.com/564x/8d/19/49/8d194993f55a9f85f6fa2d602e1719f3.jpg');text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:497px;height:770px;text-align:justify;border:2px solid #000;background-size:fit;overflow:auto">
  131.  
  132.  
  133.  
  134.  
  135. <br><div style="text-align:justify;border-radius:0px;color:#000;font-family:'bettaway';font-size:60px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;position:relative">
  136.  
  137. <!--TITLE-->
  138. <center>
  139. A Title Here
  140. </center>
  141. </div>
  142.  
  143. <div style="text-align:justify;border-radius:0px;color:#000;font-size:15px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;overflow:auto">
  144. <br>
  145. 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. <img src="https://i.pinimg.com/564x/35/eb/74/35eb74c9927379c73a0e62841e7fa04b.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left">
  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. <img src="https://i.pinimg.com/236x/d3/f1/ab/d3f1ab969395dd97a339614c20095d6b.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:right">
  152.  
  153. <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.
  154.  
  155.  
  156.  
  157. <center>
  158. <!--BUTTON-->
  159. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:20px;margin-right:10px;width:50px;height:20px;color:#000">←</button>
  160. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-right:10px;width:50px;height:20px;color:#000">→</button>
  161.  
  162. </center>
  163.  
  164. <div>
  165. </div>
  166. </div>
  167. </div></div>
  168.  
  169.  
  170. <!--PAGE 4-->
  171. <div id="four" class="tabcontent">
  172. <div style="background:url('https://i.pinimg.com/564x/8d/19/49/8d194993f55a9f85f6fa2d602e1719f3.jpg');text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:497px;height:770px;text-align:justify;border:2px solid #000;background-size:fit;overflow:auto">
  173.  
  174.  
  175.  
  176.  
  177. <br><div style="text-align:justify;border-radius:0px;color:#000;font-family:'bettaway';font-size:60px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;position:relative">
  178.  
  179. <!--TITLE-->
  180. <center>
  181. A Title Here
  182. </center>
  183. </div>
  184.  
  185. <div style="text-align:justify;border-radius:0px;color:#000;font-size:15px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px;overflow:auto">
  186. <br>
  187. 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.
  188.  
  189. <img src="https://i.pinimg.com/564x/a1/2e/fd/a12efdd42aff81acba9299f7359738c3.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:left">
  190.  
  191. <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.
  192.  
  193. <img src="https://i.pinimg.com/236x/0c/e1/a3/0ce1a3c28199e5fec96f56a983af0d85.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;border-radius:100px;float:right">
  194.  
  195. <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.
  196.  
  197.  
  198. <center>
  199. <!--BUTTON-->
  200. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:20px;margin-right:10px;width:50px;height:20px;color:#000">←</button>
  201. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-right:10px;width:50px;height:20px;color:#000">→</button>
  202.  
  203. </center>
  204.  
  205. <div>
  206. </div>
  207. </div>
  208. </div></div>
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216. <div>
  217. <div>
  218.  
  219. </div></div></div></div></div> </div>
  220.  
  221.  
  222. <link rel="preconnect" href="https://fonts.googleapis.com">
  223. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  224. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  225.  
  226. <script>
  227. function openCity(evt, cityName) {
  228. var i, tabcontent, tablinks;
  229. tabcontent = document.getElementsByClassName("tabcontent");
  230. for (i = 0; i < tabcontent.length; i++) {
  231. tabcontent[i].style.display = "none";
  232. }
  233. tablinks = document.getElementsByClassName("tablinks");
  234. for (i = 0; i < tablinks.length; i++) {
  235. tablinks[i].className = tablinks[i].className.replace(" active", "");
  236. }
  237. document.getElementsByClassName("tablinks");
  238. for (i = 0; i < tablinks.length; i++) {
  239. tablinks[i].className = tablinks[i].className.replace(" active", "");
  240. }
  241. document.getElementById(cityName).style.display = "block";
  242. evt.currentTarget.className += " active";
  243. }
  244.  
  245. // Get the element with id="defaultOpen" and click on it
  246. document.getElementById("defaultOpen").click();
  247. </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!