API tools faq
paste
Advertisement
kay_kodes

louvre || backstory

kay_kodes
Aug 4th, 2023 (edited)
993
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.53 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/cllarin-2" rel="stylesheet">
  3. <link href="https://fonts.cdnfonts.com/css/rustery-mirages" rel="stylesheet">
  4.  
  5.  
  6. <center>
  7. <style>
  8. /*Scrollbar*/
  9. ::-webkit-scrollbar {width: 0px;}
  10. ::-webkit-scrollbar-thumb {background: #fff;}
  11. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  12.  
  13. button {
  14. width:100px;
  15. height:30px;
  16. overflow: hidden;
  17. border:1px rgba(255,255,255,0.0) solid;
  18. background-color:#fff;
  19. font-size:15px;
  20. font-family:'Rustery Mirages', sans-serif;
  21. color:#000;
  22. font-style:italic;
  23. filter:brightness(120%)
  24. }
  25.  
  26. button:hover {
  27. transform: translateY(-2px);
  28. transition: all 0.9s ease 0s;
  29. transform:rotate(360deg);
  30. font-size:20px
  31.  
  32.  
  33. }
  34.  
  35. /*BOX EFFECTS*/
  36. .zoom{
  37. transition: all 0.3s ease 0s;
  38.  
  39. }
  40. .zoom:hover {
  41. transform: translateY(-2px);
  42. font-size:14px;
  43.  
  44.  
  45. }
  46.  
  47. .zoom:active {
  48. transform: translateY(-1px);
  49. }
  50.  
  51. /*IMAGE 1 EFFECTS*/
  52. .img{
  53. transition: all 0.3s ease 0s;
  54.  
  55. }
  56. .img:hover {
  57. outline: none;
  58. filter:brightness(75%);
  59. transition: all 0.5s ease 0s;
  60. transform: translateY(-7px);
  61. transform:rotate(2deg);
  62.  
  63. }
  64.  
  65. .img:active {
  66. transform: translateY(-1px);
  67. transition: all 0.7s ease 0s;
  68. }
  69.  
  70. /*IMAGE 2 EFFECTS*/
  71. .img2{
  72. transition: all 0.3s ease 0s;
  73.  
  74. }
  75. .img2:hover {
  76. outline: none;
  77. filter:brightness(75%);
  78. transition: all 0.5s ease 0s;
  79. transform: translateY(-7px);
  80. transform:rotate(-2deg);
  81.  
  82. }
  83.  
  84. .img2:active {
  85. transform: translateY(-1px);
  86. transition: all 0.7s ease 0s;
  87.  
  88. }
  89.  
  90. /*IMAGE 3 EFFECTS*/
  91. .img3{
  92. transition: all 0.3s ease 0s;
  93.  
  94. }
  95. .img3:hover {
  96. outline: none;
  97. filter:brightness(75%);
  98. transition: all 0.5s ease 0s;
  99.  
  100. }
  101.  
  102. .img3:active {
  103. transform: translateY(-1px);
  104. transition: all 0.7s ease 0s;
  105.  
  106. }
  107.  
  108. /*IMAGE 3 EFFECTS*/
  109. .zoom2{
  110. transition: all 0.3s ease 0s;
  111.  
  112. }
  113. .zoom2:hover {
  114. transform: translateY(-7px);
  115. filter:brightness(75%)
  116. }
  117.  
  118. .zoom2:active {
  119. transform: translateY(-1px);
  120. }
  121. </style>
  122.  
  123. <!-- IMAGE BACKGROUND -->
  124. <div style="background:url('https://i.pinimg.com/564x/1c/53/73/1c5373a18b87954bdc900c20ecfef622.jpg');background-size:cover;width:600px;height:650px;box-shadow: 1px 1px 6px 3px #696969;margin-bottom:8px">
  125.  
  126. <br>
  127.  
  128. <!--OUTERBOX-->
  129. <div class="zoom" style="background:#423b37;background-size:cover;width:520px;height:600px;outline:1px #fff solid;outline-offset:-12px;margin-top:10px;box-shadow: 2px 2px 7px 4px #000">
  130.  
  131. <br>
  132.  
  133. <div style="background-color:rgba(255,255,255,0.0);background-size:cover;width:450px;height:90px;outline:0px #fff solid;outline-offset:-10px;margin-top:-10px">
  134.  
  135. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-left:150px;margin-top:-25px;position:absolute">home</button>
  136.  
  137. <!-- BUTTONS -->
  138. <center>
  139. <br><br>
  140.  
  141.  
  142. <b style="font-family:'rustery mirages';font-size:40px;color:#000;letter-spacing:3px">FIRST LAST NAME</b>
  143. <img src="https://fontmeme.com/permalink/230707/dd0c54b27da0fdb34c5ffdcacbd4dd4a.png" border="0" style="margin-top:-40px; width:300px;margin-bottom:-80px">
  144. <br><br>
  145.  
  146. </center>
  147. </div>
  148.  
  149.  
  150.  
  151. <!-- HOME PAGE -->
  152. <div id="one" class="tabcontent">
  153.  
  154. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px;overflow:hidden">
  155. <br>
  156.  
  157.  
  158.  
  159. <!-- QUOTE -->
  160. <center><i style="font-family:'cllarin';font-size:30px">"a quote here for your character"</i>
  161.  
  162. <br><br>
  163. <!-- IMAGE -->
  164. <div class="img3">
  165. <img src="https://i.pinimg.com/564x/d0/13/24/d013241207617ff73cf813824aad956e.jpg" style="width:220px;height:350px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left" />
  166. </div>
  167.  
  168.  
  169. <br>
  170. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-left:-10px;margin-left:15px"><b>I</b></button>
  171.  
  172. <br><br>
  173.  
  174. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px;margin-left:-10px;margin-left:15px"><b>II</b></button>
  175.  
  176. <br><br>
  177.  
  178. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px;margin-left:-10px;margin-left:15px"><b>III</b></button>
  179.  
  180. <br><br>
  181.  
  182. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px;margin-left:-10px;margin-left:15px"><b>IV</b></button>
  183.  
  184. <br><br>
  185.  
  186. <button class="tablinks" onclick="openCity(event, 'six')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px;margin-left:-10px;margin-left:15px"><b>V</b></button>
  187.  
  188. <br><br>
  189.  
  190. <button class="tablinks" onclick="openCity(event, 'seven')" id="defaultOpen" style="background:url('https://cdn.discordapp.com/attachments/871345898469355533/1126492786573705309/WoX_Sigs_1.png');width:150px;height:42px;background-size:cover;margin-top:0px;margin-left:-10px;margin-left:15px"><b>VI</b></button>
  191.  
  192. </center></div></div>
  193.  
  194.  
  195. <!------------------------------------>
  196.  
  197.  
  198. <!-- PAGE ONE -->
  199. <div id="two" class="tabcontent">
  200.  
  201. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  202.  
  203. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  204. <br><br>
  205.  
  206. <!-- BACK IMAGE -->
  207. <div class="img2">
  208. <img src="https://i.pinimg.com/564x/b5/fd/80/b5fd8020bde67e39a33a580cf9988236.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:right;transform:rotate(4deg);margin-right:-5px" />
  209. </div>
  210.  
  211. <!-- FRONT IMAGE -->
  212. <div class="img">
  213. <img src="https://i.pinimg.com/736x/ba/e6/06/bae606068b69bf8e35163689b65f96f3.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:-100px;float:right;transform:rotate(-2deg);margin-top:60px;margin-left:15px;margin-bottom:10px" /></div>
  214.  
  215. <!-- SUBTITLE -->
  216. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">PARENTS</i>
  217.  
  218. <hr style="border:8px #eee solid;margin-top:-15px">
  219.  
  220. <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.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?
  221.  
  222. <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.
  223.  
  224.  
  225. <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.
  226.  
  227. </div></div></div>
  228.  
  229.  
  230. <!------------------------------------>
  231.  
  232.  
  233. <!-- PAGE TWO -->
  234. <div id="three" class="tabcontent">
  235.  
  236. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  237.  
  238. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  239. <br><br>
  240.  
  241. <!-- BACK IMAGE -->
  242. <div class="img">
  243. <img src="https://i.pinimg.com/564x/8a/d5/5f/8ad55f49e8ab0b028f5d1409cb52c4fd.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left;transform:rotate(-2deg);" />
  244. </div>
  245.  
  246. <!-- FRONT IMAGE -->
  247. <div class="img2">
  248. <img src="https://i.pinimg.com/564x/8e/70/0b/8e700bd9edaf9d751505a07bb9b8d323.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:-100px;float:left;transform:rotate(6deg);margin-top:60px;margin-right:15px;margin-bottom:10px" /></div>
  249.  
  250.  
  251. <!-- SUBTITLE -->
  252. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">SIBLINGS</i>
  253.  
  254. <hr style="border:8px #eee solid;margin-top:-15px">
  255.  
  256. <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.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?
  257.  
  258. <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.
  259.  
  260.  
  261. <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.
  262. </div></div></div>
  263.  
  264.  
  265. <!------------------------------------>
  266.  
  267.  
  268. <!-- PAGE THREE -->
  269. <div id="four" class="tabcontent">
  270.  
  271. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  272.  
  273. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  274. <br><br>
  275.  
  276. <!-- BACK IMAGE -->
  277. <div class="img2">
  278. <img src="https://i.pinimg.com/564x/60/02/6b/60026b72c39b7940f647efe8ea3a0e16.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:right;transform:rotate(4deg);margin-right:-5px" />
  279. </div>
  280.  
  281. <!-- FRONT IMAGE -->
  282. <div class="img">
  283. <img src="https://i.pinimg.com/564x/c2/b9/f2/c2b9f2b6d859b5e57960f26b341ca88e.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:-100px;float:right;transform:rotate(-2deg);margin-top:60px;margin-left:15px;margin-bottom:10px" /></div>
  284.  
  285. <!-- SUBTITLE -->
  286. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">CHILDHOOD</i>
  287.  
  288. <hr style="border:8px #eee solid;margin-top:-15px">
  289.  
  290. <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.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?
  291.  
  292. <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.
  293.  
  294.  
  295. <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.
  296.  
  297. <br>
  298. </div></div></div>
  299.  
  300.  
  301. <!------------------------------------>
  302.  
  303.  
  304. <!-- PAGE FOUR -->
  305. <div id="five" class="tabcontent">
  306.  
  307. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  308.  
  309. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  310. <br><br>
  311.  
  312. <!-- BACK IMAGE -->
  313. <div class="img">
  314. <img src="https://i.pinimg.com/564x/83/8e/86/838e8603085ab33c758e80e103fb9afb.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left;transform:rotate(-2deg);" />
  315. </div>
  316.  
  317. <!-- FRONT IMAGE -->
  318. <div class="img2">
  319. <img src="https://i.pinimg.com/564x/59/a9/7b/59a97b3d383d8e8ee615555fae69a922.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:-100px;float:left;transform:rotate(6deg);margin-top:60px;margin-right:15px;margin-bottom:10px" /></div>
  320.  
  321. <!-- SUBTITLE -->
  322. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">SCHOOL LIFE</i>
  323.  
  324. <hr style="border:8px #eee solid;margin-top:-15px">
  325.  
  326. <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.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?
  327.  
  328. <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.
  329.  
  330.  
  331. <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.
  332. </div></div></div>
  333.  
  334.  
  335. <!------------------------------------>
  336.  
  337.  
  338.  
  339. <!-- PAGE FIVE -->
  340. <div id="six" class="tabcontent">
  341.  
  342. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  343.  
  344. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  345. <br><br>
  346.  
  347. <!-- BACK IMAGE -->
  348. <div class="img2">
  349. <img src="https://i.pinimg.com/564x/0e/90/37/0e9037ab54be35428ec5795e32c3ff25.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:right;transform:rotate(4deg);margin-right:-5px" />
  350. </div>
  351.  
  352. <!-- FRONT IMAGE -->
  353. <div class="img">
  354. <img src="https://i.pinimg.com/564x/81/18/ef/8118efe481294e29b703a8a26d12eb7e.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:-100px;float:right;transform:rotate(-2deg);margin-top:60px;margin-left:15px;margin-bottom:10px" /></div>
  355.  
  356. <!-- SUBTITLE -->
  357. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">ADULTHOOD</i>
  358.  
  359. <hr style="border:8px #eee solid;margin-top:-15px">
  360.  
  361. <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.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?
  362.  
  363. <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.
  364.  
  365.  
  366. <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.
  367. </div></div></div>
  368.  
  369.  
  370. <!------------------------------------>
  371.  
  372.  
  373. <!-- PAGE SIX -->
  374. <div id="seven" class="tabcontent">
  375.  
  376. <div style="background-color:rgba(255,255,255,0.1);background-size:cover;width:460px;height:460px;margin-top:-5px;float:left;margin-left:30px;overflow:auto">
  377.  
  378. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:12px;width:400px;text-align:justify;margin-right:10px;margin-left:10px">
  379. <br><br>
  380.  
  381. <!-- BACK IMAGE -->
  382. <div class="img">
  383. <img src="https://i.pinimg.com/564x/2c/a9/ec/2ca9ec85c77450a1278ceea0f9741492.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-right:10px;float:left;transform:rotate(-2deg);" />
  384. </div>
  385.  
  386. <!-- FRONT IMAGE -->
  387. <div class="img2">
  388. <img src="https://i.pinimg.com/564x/bb/4d/06/bb4d06c868596aae7d0b71ec5c027c61.jpg" style="width:150px;height:200px;outline: 1px solid #fff;outline-offset:-6px;border:2px solid #fff;object-fit:cover;margin-left:-100px;float:left;transform:rotate(6deg);margin-top:60px;margin-right:15px;margin-bottom:10px" /></div>
  389.  
  390. <!-- SUBTITLE -->
  391. <i style="margin-left:10px;font-size:25px;color:#000;font-family:'rustery mirages';font-weight:bold">PRESENT</i>
  392.  
  393. <hr style="border:8px #eee solid;margin-top:-15px">
  394.  
  395. <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.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?
  396.  
  397. <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.
  398.  
  399.  
  400. <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.
  401. </div></div></div>
  402.  
  403.  
  404. <!------------------------------------>
  405.  
  406.  
  407.  
  408. </div></div></div>
  409. <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:12px"><b><u>kay kodes</u></b></a></center>
  410.  
  411. <link rel="preconnect" href="https://fonts.googleapis.com">
  412. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  413. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  414.  
  415. <script>
  416. function openCity(evt, cityName) {
  417. var i, tabcontent, tablinks;
  418. tabcontent = document.getElementsByClassName("tabcontent");
  419. for (i = 0; i < tabcontent.length; i++) {
  420. tabcontent[i].style.display = "none";
  421. }
  422. tablinks = document.getElementsByClassName("tablinks");
  423. for (i = 0; i < tablinks.length; i++) {
  424. tablinks[i].className = tablinks[i].className.replace(" active", "");
  425. }
  426. document.getElementsByClassName("tablinks");
  427. for (i = 0; i < tablinks.length; i++) {
  428. tablinks[i].className = tablinks[i].className.replace(" active", "");
  429. }
  430. document.getElementById(cityName).style.display = "block";
  431. evt.currentTarget.className += " active";
  432. }
  433.  
  434. // Get the element with id="defaultOpen" and click on it
  435. document.getElementById("defaultOpen").click();
  436. </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!