API tools faq
paste
Advertisement
kay_kodes

the sailor || backstory

kay_kodes
Jun 15th, 2023 (edited)
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.61 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!--quote font-->
  3. <link href="https://fonts.cdnfonts.com/css/winterraya" rel="stylesheet">
  4.  
  5. <!--subtitle font-->
  6. <link href="https://fonts.cdnfonts.com/css/gollatgher" rel="stylesheet">
  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. }
  24.  
  25. /*BOX EFFECTS*/
  26. .zoom{
  27. transition: all 0.3s ease 0s;
  28.  
  29. }
  30. .zoom:hover {
  31. transform: translateY(-7px);
  32. }
  33.  
  34. .zoom:active {
  35. transform: translateY(-1px);
  36.  
  37. }
  38. /*AESTHETIC IMAGES EFFECTS*/
  39. .aesimg:hover {
  40. outline: none;
  41. filter:grayscale(100%);
  42. transition: all 0.5s ease 0s;
  43.  
  44. }
  45.  
  46. /*OTHER IMAGES EFFECTS*/
  47. .otrimg:hover {
  48. outline: none;
  49. filter:grayscale(100%);
  50. transition: all 0.3s ease 0s;
  51. transform: translateY(-7px);
  52.  
  53. }
  54.  
  55. .otrimg:active {
  56. transform: translateY(-1px);
  57.  
  58. }
  59.  
  60. </style>
  61.  
  62.  
  63. <div style="background:#dcdcdc;padding:30px;border:4px #245680 solid;width:850px;height:710px;margin:auto;text-align:justify;overflow:hidden;border-radius:20px">
  64.  
  65. <!-- QUOTE BOX -->
  66. <div class="zoom">
  67. <div style="background:#245680;text-align:justify;border-radius:20px;color:#fff;font-family:'winterraya';font-size:55px;width:850px;height:80px;border-radius:20px;margin-top:-10px; box-shadow: 1px 1px 6px 2px #000">
  68. <!--quotehere-->
  69. <center>
  70. “salt without the sea.”
  71. </center>
  72. </div></div>
  73.  
  74. <br>
  75.  
  76. <!-- BASIC INFO -->
  77. <div class="zoom">
  78. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:250px;height:300px;border-radius:20px;text-align:justify;float:left; box-shadow: 1px 1px 6px 2px #000">
  79. <br>
  80. <center>
  81. <!--FACECLAIM-->
  82. <div class="otrimg">
  83. <img src="https://i.pinimg.com/236x/a6/ae/80/a6ae80ec2c817754ea5f65735bb5924e.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:10px;margin-bottom:10px;border-radius:100px;box-shadow: 1px 1px 6px 2px #fff">
  84. </div>
  85.  
  86. <b>- YOUR NAME HERE -</b>
  87. <br>
  88. <i>"insert short quote"</i>
  89. </center>
  90. <p style="margin-top:20px;margin-right:10px;margin-left:20px;font-size:13px">
  91. <b>nickname(s).</b> insert nickname(s) here<br>
  92. <b>orientation.</b> insert orientation here<br>
  93. <b>birthday.</b> insert birthday here<br>
  94. <b>birthplace.</b> insert birthplace here<br>
  95. <b>status.</b> insert info here
  96.  
  97. <!-- DO NOT REMOVE -->
  98. <p style="margin-top:-8px">
  99. <center><a href="https://kaykodes.tumblr.com/" style="color:#fff;font-size:12px"><b><u>kay kodes</u></b></a>
  100. </center>
  101.  
  102. </div></div>
  103.  
  104. <!-- ABOUT, PERSONALITY, FIRST IMPRESSIONS -->
  105. <div class="zoom">
  106. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:580px;height:635px;border-radius:20px;text-align:justify;float:right;overflow:auto;box-shadow: 1px 1px 6px 2px #000">
  107.  
  108. <!--PAGE ONE-->
  109. <div id="one" class="tabcontent">
  110. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  111. Parents
  112.  
  113. <!--BUTTON-->
  114.  
  115. <!-- DO NOT CHANGE -->
  116. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-100px;float:left;width:50px;height:20px;background-color:#245680">→</button>
  117. <!-- - -->
  118.  
  119. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  120.  
  121. </div>
  122. <br>
  123.  
  124. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  125.  
  126. 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.
  127.  
  128. <div class="aesimg">
  129. <img src="https://i.pinimg.com/236x/c4/9d/68/c49d68990cacb03b2d6142b7d578c11e.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  130.  
  131. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  132. <p>
  133. 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.
  134.  
  135. <div class="aesimg">
  136. <img src="https://i.pinimg.com/236x/9e/c0/39/9ec039f2fe982047a28e3fa0d8fd91bd.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  137.  
  138. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  139.  
  140. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  141. </div>
  142. </div>
  143.  
  144.  
  145.  
  146.  
  147. <!--PAGE TWO-->
  148. <div id="two" class="tabcontent">
  149. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  150. Siblings
  151.  
  152. <!--BUTTON-->
  153. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  154. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#245680">←</button>
  155.  
  156. </div>
  157. <br>
  158. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  159.  
  160. 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.
  161.  
  162. <div class="aesimg">
  163. <img src="https://i.pinimg.com/236x/15/99/82/1599823caa17fd7332affbb7193fbbf7.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  164.  
  165. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  166. <p>
  167. 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.
  168.  
  169. <div class="aesimg">
  170. <img src="https://i.pinimg.com/236x/47/03/ce/4703ce3cdafba1207ddd653def028eea.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  171.  
  172. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  173.  
  174. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  175. </div></div>
  176.  
  177.  
  178. <!--PAGE THREE-->
  179. <div id="three" class="tabcontent">
  180. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  181. Childhood
  182.  
  183. <!--BUTTON-->
  184. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  185. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#245680">←</button>
  186.  
  187.  
  188. </div>
  189. <br>
  190. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  191.  
  192. 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.
  193.  
  194. <div class="aesimg">
  195. <img src="https://i.pinimg.com/236x/bc/51/31/bc51314c182db93970805ded2cd93fbc.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  196.  
  197. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  198. <p>
  199. 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.
  200.  
  201. <div class="aesimg">
  202. <img src="https://i.pinimg.com/236x/d1/89/af/d189af5655b29cc2aaabd498349758cb.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  203.  
  204. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  205.  
  206. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  207. </div></div>
  208.  
  209.  
  210.  
  211.  
  212.  
  213. <!--PAGE FOUR-->
  214. <div id="four" class="tabcontent">
  215. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  216. School Life
  217.  
  218. <!--BUTTON-->
  219. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  220. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#245680">←</button>
  221.  
  222.  
  223. </div>
  224. <br>
  225. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  226.  
  227. 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.
  228.  
  229. <div class="aesimg">
  230. <img src="https://i.pinimg.com/236x/1d/80/54/1d805405527f26cd7d193f270ef193c1.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  231.  
  232. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  233. <p>
  234. 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.
  235.  
  236. <div class="aesimg">
  237. <img src="https://i.pinimg.com/236x/06/a6/1f/06a61f445fbf7637012737b18133f2d3.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  238.  
  239. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  240.  
  241. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  242. </div></div>
  243.  
  244.  
  245.  
  246. <!--PAGE FIVE-->
  247. <div id="five" class="tabcontent">
  248. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  249. Adulthood
  250.  
  251. <!--BUTTON-->
  252. <button class="tablinks" onclick="openCity(event, 'six')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  253. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#245680">←</button>
  254.  
  255.  
  256. </div>
  257. <br>
  258. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  259.  
  260. 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.
  261.  
  262. <div class="aesimg">
  263. <img src="https://i.pinimg.com/236x/b8/fd/b0/b8fdb0c7f89d2810104d46a67c88fb2d.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  264.  
  265. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  266. <p>
  267. 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.
  268.  
  269. <div class="aesimg">
  270. <img src="https://i.pinimg.com/236x/c9/77/2d/c9772dfaa69f130346c31a7473a2a4ef.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  271.  
  272. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  273.  
  274. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  275. </div></div>
  276.  
  277.  
  278. <!--PAGE SIX-->
  279. <div id="six" class="tabcontent">
  280. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'gollatgher';font-size:45px;border-radius:20px;margin-left:20px;margin-top:10px">
  281. Present Life
  282.  
  283. <!--BUTTON-->
  284. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px;background-color:#245680">→</button>
  285. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px;background-color:#245680">←</button>
  286.  
  287.  
  288. </div>
  289. <br>
  290. <div style="background:#245680;text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
  291.  
  292. 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.
  293.  
  294. <div class="aesimg">
  295. <img src="https://i.pinimg.com/236x/b4/47/8d/b4478dda92cd43a74bb53c931115f87c.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  296.  
  297. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  298. <p>
  299. 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.
  300.  
  301. <div class="aesimg">
  302. <img src="https://i.pinimg.com/236x/f7/4a/78/f74a78a74946afe3061c36424d811272.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;box-shadow: 1px 1px 6px 2px #ffff"></div>
  303.  
  304. <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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  305.  
  306. 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. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
  307. </div></div></div></div>
  308.  
  309.  
  310. <!-- AESTHETICS -->
  311. <div style="text-align:justify;border-radius:0px;color:#000;font-family:'Times New Roman';font-size:15px;width:250px;height:400px;border-radius:20px;text-align:justify;float:left;overflow:hidden">
  312.  
  313. <center>
  314.  
  315. <!--TOP IMAGE 1-->
  316. <div class="aesimg">
  317. <img src="https://i.pinimg.com/236x/5c/7b/5d/5c7b5d1d04d022dd675ce7d4d6b161cd.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:10px;box-shadow: 1px 1px 5px 2px #fff;">
  318. </div>
  319.  
  320. <!--TOP IMAGE 2-->
  321. <div class="aesimg">
  322. <img src="https://i.pinimg.com/236x/3d/6a/d1/3d6ad1289ea2d972f7d3b8873d14990e.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:10px;box-shadow: 1px 1px 5px 2px #fff;">
  323. </div>
  324.  
  325. <br>
  326.  
  327. <!--each right aesthetic-->
  328. <div class="aesimg">
  329. <img src="https://i.pinimg.com/236x/f9/44/8a/f9448a1891b60dd3b20e7feb23a0d789.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
  330. </div>
  331.  
  332. <!--each left aesthetic-->
  333. <div class="aesimg">
  334. <img src="https://i.pinimg.com/236x/26/f0/19/26f0198d60bcb377c63122183a28aef0.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
  335. </div>
  336.  
  337. <br>
  338.  
  339. <!--each right aesthetic-->
  340. <div class="aesimg">
  341. <img src="https://i.pinimg.com/236x/06/38/14/063814fb5698d9566380d2349f07f572.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-right:15px;border-radius:100px;float:right;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
  342. </div>
  343.  
  344. <!--each left aesthetic-->
  345. <div class="aesimg">
  346. <img src="https://i.pinimg.com/236x/4b/16/0d/4b160d7d33192fd12b0f0f83b810cf90.jpg" style="width:100px;height:100px;border:3px solid #245680;object-fit:cover;margin-left:15px;border-radius:100px;float:left;margin-top:8px;box-shadow: 1px 1px 5px 2px #fff;">
  347. </div>
  348.  
  349. </center>
  350.  
  351.  
  352. </div>
  353.  
  354.  
  355.  
  356.  
  357. <div>
  358. <div>
  359.  
  360. </div></div></div></div></div> </div>
  361.  
  362.  
  363. <link rel="preconnect" href="https://fonts.googleapis.com">
  364. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  365. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  366.  
  367. <script>
  368. function openCity(evt, cityName) {
  369. var i, tabcontent, tablinks;
  370. tabcontent = document.getElementsByClassName("tabcontent");
  371. for (i = 0; i < tabcontent.length; i++) {
  372. tabcontent[i].style.display = "none";
  373. }
  374. tablinks = document.getElementsByClassName("tablinks");
  375. for (i = 0; i < tablinks.length; i++) {
  376. tablinks[i].className = tablinks[i].className.replace(" active", "");
  377. }
  378. document.getElementsByClassName("tablinks");
  379. for (i = 0; i < tablinks.length; i++) {
  380. tablinks[i].className = tablinks[i].className.replace(" active", "");
  381. }
  382. document.getElementById(cityName).style.display = "block";
  383. evt.currentTarget.className += " active";
  384. }
  385.  
  386. // Get the element with id="defaultOpen" and click on it
  387. document.getElementById("defaultOpen").click();
  388. </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!