API tools faq
paste
Advertisement
kay_kodes

seaweed brain | backstory v.2

kay_kodes
Jul 27th, 2023 (edited)
680
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.09 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/rhinatta-script" rel="stylesheet">
  3.  
  4. <center>
  5. <style>
  6. /*Scrollbar*/
  7. ::-webkit-scrollbar {width: 3px}
  8. ::-webkit-scrollbar-track {background: #dcdcdc}
  9. ::-webkit-scrollbar-thumb {background: #5f9ea0}
  10. ::-webkit-scrollbar-thumb:hover {background: #5f9ea0}
  11.  
  12. /*BOX EFFECTS*/
  13. .zoom{
  14. transition: all 1.5s
  15.  
  16. }
  17. .zoom:hover {
  18. transform: translateY(-7px);
  19. transform: scale(1.02);
  20.  
  21.  
  22. }
  23.  
  24. .zoom:active {
  25. transform: translateY(-1px);
  26. }
  27.  
  28. button {
  29. width:150px;
  30. height:200px;
  31. background-size:cover
  32.  
  33. }
  34.  
  35. /*BUTTON EFFECTS*/
  36. button:hover {
  37. outline: none;
  38. filter:brightness(120%);
  39. transition: all 0.5s ease 0s;
  40.  
  41. }
  42.  
  43. button:active {
  44. transform: translateY(-1px);
  45. transition: all 0.7s ease 0s;
  46.  
  47. }
  48.  
  49. /*IMAGE 1 EFFECTS*/
  50. .img1:hover {
  51. outline: none;
  52. filter:brightness(120%);
  53. transition: all 0.5s ease 0s;
  54. transform: translateY(-2px);
  55. transform:rotate(4deg);
  56.  
  57. }
  58.  
  59. .img1:active {
  60. transform: translateY(-2px);
  61. transition: all 0.7s ease 0s;
  62.  
  63. }
  64.  
  65. /*IMAGE 2 EFFECTS*/
  66. .img2:hover {
  67. outline: none;
  68. filter:brightness(120%);
  69. transition: all 0.5s ease 0s;
  70. transform: translateY(-2px);
  71. transform:rotate(-3deg);
  72.  
  73. }
  74.  
  75. .img2:active {
  76. transform: translateY(-2px);
  77. transition: all 0.7s ease 0s;
  78.  
  79.  
  80.  
  81. </style>
  82.  
  83. <br>
  84.  
  85. <a href="https://kaykodes.tumblr.com/" style="color:#808080;font-size:15px;margin-left:-570"><b><u>by kay kodes</u></b></a>
  86.  
  87. <!--PAGE DETAILS-->
  88. <div class="zoom" style="background:#fff;background-size:cover;width:650px;height:900px;outline:4px #5f9ea0 solid;outline-offset:-12px;margin-top:10px;box-shadow:0 0 15px #000;overflow:hidden">
  89.  
  90. <br>
  91.  
  92. <center>
  93. <br><br>
  94. <!--LEFT IMAGE-->
  95. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="width:150px;height:200px;background: url(https://i.pinimg.com/564x/1c/f3/60/1cf360894ac54c48952d58dd0b5bae36.jpg)center;background-size:cover;box-shadow:0 0 15px #000;border:#fff 0px solid;margin-left:60px;float:left;transform:rotate(2deg)"></button>
  96.  
  97.  
  98. <!--MIDDLE LEFT IMAGE-->
  99. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="width:150px;height:200px;background: url(https://i.pinimg.com/564x/d4/29/08/d42908729e2e5cefcde5492015d011fe.jpg)center;background-size:cover;box-shadow:0 0 15px #000;border:#fff 0px solid;margin-left:-50px;margin-top:40px;float:left;transform:rotate(6deg)"></button>
  100.  
  101.  
  102. <!--MIDDLE RIGHT IMAGE-->
  103. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="width:150px;height:200px;background: url(https://i.pinimg.com/564x/86/9b/70/869b70483be87c0ffe6cff8b2263f583.jpg)center;background-size:cover;box-shadow:0 0 15px #000;border:#fff 0px solid;;margin-left:-20px;float:left;transform:rotate(-6deg)"></button>
  104.  
  105.  
  106. <!--RIGHT IMAGE-->
  107. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="width:150px;height:200px;background: url(https://i.pinimg.com/564x/c4/18/e1/c418e1c91307d7b6ef75e02ba75d24cf.jpg)center;background-size:cover;box-shadow:0 0 15px #000;border:#fff 0px solid;margin-left:0px;float:left;transform:rotate(4deg);margin-top:30px"></button>
  108.  
  109.  
  110.  
  111.  
  112. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  113.  
  114. <!--FULL NAME-->
  115. <h style="font-size:40px;color:#5f9ea0 ;font-family:'rhinatta script';text-shadow: 0 0 1px #dcdcdc, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #000, 0 0 1px #000">- Your Full Name Here -</h>
  116.  
  117. <br>
  118.  
  119. <!--QUOTE-->
  120. <i style="font-family:'sethyn';font-size:15px;letter-spacing:2px">“life is only precious because it ends, kid.”</i>
  121.  
  122. <hr style="width:80%">
  123.  
  124. <!--
  125. outbox = place setting for the text
  126. innerbox = to control and edit the overflow scrollbar
  127. textbox = text
  128.  
  129. safe changes = height, font and text details
  130.  
  131. i would refrain messing with the margins and overflow as well as the width because i already measured it specially for this template. you are free to do with it but this is just a forewarning <3 if you need help, i'm avail to contact.
  132.  
  133. -->
  134.  
  135. <!--OUTER BOX-->
  136. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:90%;text-align:justify;margin-right:10px;margin-left:10px;height:520px;overflow:auto;margin-top:10px">
  137.  
  138. <center>
  139.  
  140. <!--INNER BOX-->
  141. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:500px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;overflow:auto;margin-bottom:10px">
  142.  
  143.  
  144.  
  145.  
  146. <!--PAGE ONE-->
  147. <div id="one" class="tabcontent">
  148. <!--TEXT BOX-->
  149. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:460px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  150.  
  151. <center><i><b style="font-size:20px;letter-spacing:2px">
  152. - CHAPTER ONE -</b></i>
  153. </center>
  154.  
  155. <br>
  156.  
  157. <div class="img1">
  158. <img src="https://i.pinimg.com/564x/bd/40/f7/bd40f790d6695bde84be58b5a7beacdd.jpg" style="width:150px;height:120px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  159. 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>"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.
  160.  
  161.  
  162. <p>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>"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.
  163.  
  164. <p>
  165.  
  166. <div class="img2">
  167. <img src="https://i.pinimg.com/564x/0c/7b/26/0c7b26f9501a890c524f2502597fe773.jpg" style="width:150px;height:180px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  168. <p>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>"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.
  169.  
  170.  
  171. <p>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>"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.
  172.  
  173. <br><br>
  174. </div></div>
  175.  
  176.  
  177.  
  178. <!--PAGE TWO-->
  179. <div id="two" class="tabcontent">
  180. <!--TEXT BOX-->
  181. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:460px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  182.  
  183. <center><i><b style="font-size:20px;letter-spacing:2px">
  184. - CHAPTER TWO -</b></i>
  185. </center>
  186.  
  187. <br>
  188.  
  189. <div class="img2">
  190. <img src="https://i.pinimg.com/564x/51/62/fc/5162fcdd104398741191ad9dfd123c12.jpg" style="width:180px;height:150px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  191. 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>"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.
  192.  
  193. <p>
  194.  
  195. 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>"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.
  196.  
  197. <p>
  198.  
  199. <div class="img1">
  200. <img src="https://i.pinimg.com/564x/82/ce/6f/82ce6f78face8e055ba77db5f216b881.jpg" style="width:150px;height:150px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  201. <p>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>"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.
  202.  
  203.  
  204. <p>
  205. 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>"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.
  206.  
  207. <br><br>
  208. </div></div>
  209.  
  210.  
  211.  
  212. <!--PAGE THREE-->
  213. <div id="three" class="tabcontent">
  214. <!--TEXT BOX-->
  215. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:460px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  216. <center><i><b style="font-size:20px;letter-spacing:2px">
  217. - CHAPTER THREE -</b></i>
  218. </center>
  219.  
  220. <br>
  221.  
  222. <div class="img1">
  223. <img src="https://i.pinimg.com/564x/42/08/5f/42085fc9f330fb27c54ebad35f81c579.jpg" style="width:150px;height:180px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  224. 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>"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.
  225.  
  226.  
  227. <p>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>"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.
  228.  
  229. <p>
  230.  
  231. <div class="img2">
  232. <img src="https://i.pinimg.com/564x/23/1c/7d/231c7dfb1f7cfd3f04b1453ad81828bb.jpg" style="width:120px;height:150px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  233. <p>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>"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.
  234.  
  235.  
  236. <p>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>"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.
  237.  
  238. <br><br>
  239. </div></div>
  240.  
  241.  
  242.  
  243. <!--PAGE FOUR-->
  244. <div id="four" class="tabcontent">
  245. <!--TEXT BOX-->
  246. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:460px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  247.  
  248. <center><i><b style="font-size:20px;letter-spacing:2px">
  249. - CHAPTER FOUR -</b></i>
  250. </center>
  251.  
  252. <br>
  253.  
  254. <div class="img2">
  255. <img src="https://i.pinimg.com/564x/8e/c5/0d/8ec50d07783210218d9447cc59878f38.jpg" style="width:150px;height:170px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  256. 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>"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.
  257.  
  258. <p>
  259.  
  260. 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>"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.
  261.  
  262. <p>
  263.  
  264. <div class="img1">
  265. <img src="https://i.pinimg.com/564x/a8/9e/7a/a89e7ab0810f53371cea154188657f6f.jpg" style="width:150px;height:140px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  266. <p>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>"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.
  267.  
  268.  
  269. <p>
  270. 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>"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.
  271.  
  272. <br><br>
  273. </div></div>
  274.  
  275.  
  276.  
  277. </div></div></div>
  278. <br>
  279.  
  280. <link rel="preconnect" href="https://fonts.googleapis.com">
  281. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  282. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  283.  
  284. <script>
  285. function openCity(evt, cityName) {
  286. var i, tabcontent, tablinks;
  287. tabcontent = document.getElementsByClassName("tabcontent");
  288. for (i = 0; i < tabcontent.length; i++) {
  289. tabcontent[i].style.display = "none";
  290. }
  291. tablinks = document.getElementsByClassName("tablinks");
  292. for (i = 0; i < tablinks.length; i++) {
  293. tablinks[i].className = tablinks[i].className.replace(" active", "");
  294. }
  295. document.getElementsByClassName("tablinks");
  296. for (i = 0; i < tablinks.length; i++) {
  297. tablinks[i].className = tablinks[i].className.replace(" active", "");
  298. }
  299. document.getElementById(cityName).style.display = "block";
  300. evt.currentTarget.className += " active";
  301. }
  302.  
  303. // Get the element with id="defaultOpen" and click on it
  304. document.getElementById("defaultOpen").click();
  305. </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!