API tools faq
paste
Advertisement
kay_kodes

kissing in the rain || backstory

kay_kodes
Aug 11th, 2022 (edited)
385
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.56 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <center>
  3. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  4.  
  5. <link href="https://fonts.cdnfonts.com/css/briana-brush-pen" rel="stylesheet">
  6.  
  7. <link href="https://fonts.cdnfonts.com/css/adritany" rel="stylesheet">
  8.  
  9.  
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <style>
  12. /*Scrollbar*/
  13. ::-webkit-scrollbar {width: 0px;}
  14. ::-webkit-scrollbar-thumb {background: #eee;}
  15. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  16.  
  17.  
  18. htitle1{
  19. font-family: 'Briana Brush Pen', sans-serif;
  20. font-size:40px;
  21. color:#000;
  22. text-shadow: 0 0 40px #fff, 0 0 50px #bbb, 0 0 60px #fff, 0 0 70px #bbb, 0 0 80px #fff, 0 0 90px #bbb, 0 0 100px #fff;
  23.  
  24. }
  25. htitle2{
  26. font-family: 'Adritany', sans-serif;
  27. font-size:45px;
  28. margin-left:10px;
  29. margin-right:10px;
  30. }
  31.  
  32. .box{
  33. position: relative;
  34. text-align: center;
  35.  
  36. }
  37. .page{
  38. text-decoration: none;
  39. color:black;
  40. padding: 10px
  41.  
  42. }
  43.  
  44. .columnone{
  45. float: center;
  46. width:530px;
  47. height:640px; background:url(https://i.pinimg.com/474x/7f/9a/20/7f9a2026a43ca1c5406803f6b46e71e8.jpg);
  48. border: 2px #000 ;
  49. margin-left:10px;
  50. margin-right: 10px;
  51. margin-top:0px;
  52. margin-bottom: 0px;
  53. overflow:hidden;
  54. color:#000;
  55. font-size:12px;
  56. background-size:cover;
  57.  
  58. }
  59.  
  60. .columntwo{
  61. float:left;
  62. width:400px;
  63. height:510px;
  64. margin-right:10px;
  65. margin-bottom: 2px;
  66. overflow: auto;
  67. background-color: #eee;
  68. margin-top:20px;
  69. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  70. color: #000;
  71. font-size: 12px
  72.  
  73. }
  74.  
  75. button {
  76. width:150px;
  77. height:150px;
  78. margin-top:0px;
  79. overflow: hidden;
  80. border: 0px solid #fff;
  81. font-weight: bold;
  82. font-size: 15px;
  83. text-shadow: 0 0 40px #fff, 0 0 50px #bbb, 0 0 60px #fff, 0 0 70px #bbb, 0 0 80px #fff, 0 0 90px #bbb, 0 0 100px #fff;
  84. border-radius:100%;
  85. transition: all 0.3s ease 0s;
  86. outline: 1px solid #fff;
  87. outline-offset: -3px;
  88. }
  89.  
  90. button:hover {
  91. box-shadow: 0px 15px 20px;
  92. color: ;
  93. transform: translateY(-7px);
  94. outline: none;
  95. box-shadow: 1px 1px 6px 2px #fff
  96. }
  97.  
  98. button:active {
  99. transform: translateY(-1px);}
  100.  
  101.  
  102.  
  103. </style>
  104.  
  105. <div class="columnone">
  106. <div id="one" class="tabcontent">
  107. <div style="text-align:justify;width:500px;height:615px;overflow:hidden;margin-top:10px;background-color: rgba(255, 255, 255, 0.4);margin-bottom:10px;border:#fff 1px solid">
  108. <!--FULL NAME HERE-->
  109. <center>
  110. <p style="margin-top:30px">
  111. <htitle1>Your Name Here</htitle1>
  112. <img src="https://i.pinimg.com/474x/15/df/06/15df06d077ad3d94734777797504f711.jpg" style="width:150px;height:150px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:10px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  113. <p>
  114. <htitle2>"dear love, i wish i loved you longer"</htitle2>
  115.  
  116. </center>
  117.  
  118. <div style="text-align:center;margin-left:10px;font-size:12px;margin-right:10px;margin-top:30px">
  119. <b style="font-size:20px">OOC INFO</b>
  120. <p><b>Name - Your Name
  121. <br> Timezone - Your Timezone
  122. <br> Contact Method - Your Contact Method
  123. </b>
  124.  
  125.  
  126. <!--BUTTONS-->
  127. <!--IGNORE AND DON'T CHANGE BUTTON ONE-->
  128. <div class="button">
  129. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-205px;width:40px;height:40px; background-color: rgba(0, 0, 0, 0.0);background-size:cover;"></button>
  130.  
  131. <!--BUTTONS START HERE-->
  132. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-left:160px;width:70px;height:70px;background: url(https://i.pinimg.com/474x/ce/bb/9c/cebb9c37e1f6934378035f82d6692537.jpg)center;background-size:cover"></button>
  133.  
  134. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:70px;height:70px;background: url(https://i.pinimg.com/474x/08/69/9d/08699d146c18bb45740951f4fb1cbe8e.jpg)center;background-size:cover;"></button>
  135.  
  136. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:70px;height:70px;background: url(https://i.pinimg.com/474x/46/71/4e/46714e9565505b62ad635bc7c31d0714.jpg)center;background-size:cover"></button>
  137.  
  138. <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:70px;height:70px;background: url(https://i.pinimg.com/474x/c9/93/d3/c993d38ddce7e59cffc34470a02f9cb6.jpg)center;background-size:cover"></button>
  139.  
  140. <p><center style="margin-top:50px"><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:10px"><b><u>kay kodes</u></b></a></center>
  141. </div></div></div></div>
  142.  
  143. <!----------------->
  144.  
  145. <!--PAGE 1-->
  146. <div id="two" class="tabcontent">
  147. <div style="margin-top:0px;overflow:hidden">
  148. <div style="margin-top:0px;overflow:hidden;background:url(https://i.pinimg.com/474x/38/5d/ad/385dad545aa080e1f6384ba693791bed.jpg);height:650px;background-size:cover;color:#000">
  149.  
  150. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  151. <center>
  152. <p>
  153. <htitle2 style="margin-left:10px;margin-right:10px">"whereas i don't need him"</htitle2></center>
  154.  
  155. <div style="margin-left:10px;margin-right:10px">
  156. <p>
  157. <img src="https://i.pinimg.com/564x/e8/93/4a/e8934af43cfa90dbd7a7b65c039281b5.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:left;margin-right:10px;margin-bottom:5px;margin-top:5px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  158.  
  159. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  160.  
  161. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  162.  
  163. <img src="https://i.pinimg.com/474x/9b/43/f0/9b43f02ba7866c1bb900a0d0b201f312.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  164.  
  165. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  166.  
  167. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  168. <center><button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;margin-right:10px;outline:none;box-shadow: 0px 0px 0px 0px #fff"></button>
  169.  
  170. </center>
  171. <div>
  172. </div></div>
  173. <br></div></div></div></div>
  174.  
  175. <!----------------->
  176.  
  177. <!--PAGE 2-->
  178. <div id="three" class="tabcontent">
  179.  
  180. <div style="margin-top:0px;overflow:hidden;background:url(https://i.pinimg.com/474x/ac/d4/3c/acd43caf9da5ea0c474ce432a394a05f.jpg);height:650px;background-size:cover;color:#000">
  181.  
  182. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  183.  
  184.  
  185. <div style="margin-left:10px; margin-right:10px">
  186. <center>
  187. <p>
  188. <htitle2 style="margin-left:10px;margin-right:10px">"i'm glad i fell"</htitle2></center>
  189.  
  190. <div style="margin-left:10px;margin-right:10px">
  191. <p>
  192. <img src="https://i.pinimg.com/474x/a6/47/46/a64746bab616820eca0161fb78055384.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:left;margin-right:10px;margin-bottom:5px;margin-top:5px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  193.  
  194. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  195.  
  196. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  197.  
  198. <img src="https://i.pinimg.com/474x/01/0d/4d/010d4d5d2109bbcaf4348970ab374137.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  199.  
  200. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  201.  
  202. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  203. <center>
  204.  
  205.  
  206. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;outline:none;box-shadow: 0px 0px 0px 0px #fff"></button>
  207.  
  208. </center>
  209. <div>
  210. </div>
  211. <br></div></div></div></div></div>
  212.  
  213.  
  214. <!----------------->
  215.  
  216. <!--PAGE 3-->
  217. <div id="four" class="tabcontent">
  218.  
  219. <div style="margin-top:0px;overflow:hidden;background:url(https://i.pinimg.com/564x/7a/88/2b/7a882be133c2f5e7ce91335870d7a0a3.jpg);height:650px;background-size:cover;color:#000">
  220.  
  221. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  222.  
  223.  
  224. <div style="margin-left:10px; margin-right:10px">
  225. <center>
  226. <p>
  227. <htitle2 style="margin-left:10px;margin-right:10px">"my forever crush"</htitle2></center>
  228.  
  229. <div style="margin-left:10px;margin-right:10px">
  230. <p>
  231. <img src="https://i.pinimg.com/474x/d9/25/b3/d925b3ff18f006cb44ec0d78a07e32bc.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:left;margin-right:10px;margin-bottom:5px;margin-top:5px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  232.  
  233. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  234.  
  235. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  236.  
  237. <img src="https://i.pinimg.com/474x/36/12/98/3612988b60d7b0c1a9c9fa17f1d59759.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  238.  
  239. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  240.  
  241. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  242. <center>
  243.  
  244.  
  245. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;outline:none;box-shadow: 0px 0px 0px 0px #fff"></button>
  246.  
  247. </center>
  248. <div>
  249. </div>
  250. <br></div></div></div></div></div>
  251.  
  252. <!--PAGE 4-->
  253. <div id="five" class="tabcontent">
  254.  
  255. <div style="margin-top:0px;overflow:hidden;background:url(https://i.pinimg.com/474x/5a/7f/b9/5a7fb98a80561971ccac4198de2b7e9f.jpg);height:650px;background-size:cover;color:#000">
  256.  
  257. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  258.  
  259.  
  260. <div style="margin-left:10px; margin-right:10px">
  261. <center>
  262. <p>
  263. <htitle2 style="margin-left:10px;margin-right:10px">"till death do us apart"</htitle2></center>
  264.  
  265. <div style="margin-left:10px;margin-right:10px">
  266. <p>
  267. <img src="https://i.pinimg.com/474x/76/64/84/766484e3e17f52497fd1ba11a5cf5381.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:left;margin-right:10px;margin-bottom:5px;margin-top:5px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  268.  
  269. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  270.  
  271. <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  272.  
  273. <img src="https://i.pinimg.com/564x/bb/4c/1e/bb4c1e289677262609ff9c4dff03c9da.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;outline: 1px solid #fff;outline-offset: -6px">
  274.  
  275. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
  276.  
  277. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
  278. <center>
  279.  
  280.  
  281. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;outline:none;box-shadow: 0px 0px 0px 0px #fff"></button>
  282.  
  283. </center>
  284. <div>
  285. </div>
  286. <br></div></div></div></div>
  287.  
  288. <div>
  289. <div>
  290.  
  291. </div></div></div></div></div> </div>
  292.  
  293. <link rel="preconnect" href="https://fonts.googleapis.com">
  294. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  295. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  296.  
  297. <script>
  298. function openCity(evt, cityName) {
  299. var i, tabcontent, tablinks;
  300. tabcontent = document.getElementsByClassName("tabcontent");
  301. for (i = 0; i < tabcontent.length; i++) {
  302. tabcontent[i].style.display = "none";
  303. }
  304. tablinks = document.getElementsByClassName("tablinks");
  305. for (i = 0; i < tablinks.length; i++) {
  306. tablinks[i].className = tablinks[i].className.replace(" active", "");
  307. }
  308. document.getElementsByClassName("tablinks");
  309. for (i = 0; i < tablinks.length; i++) {
  310. tablinks[i].className = tablinks[i].className.replace(" active", "");
  311. }
  312. document.getElementById(cityName).style.display = "block";
  313. evt.currentTarget.className += " active";
  314. }
  315.  
  316. // Get the element with id="defaultOpen" and click on it
  317. document.getElementById("defaultOpen").click();
  318. </script>
  319.  
  320.  
  321. <div style="display:none">
  322. <iframe src="https://www.youtube.com/embed/DlexmDDSDZ0?autoplay=1&amp;loop=1&amp;playlist=DlexmDDSDZ0" frameborder="0" allow="autoplay; clipboard-write; "></iframe>
  323. </div>
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!