API tools faq
paste
Advertisement
kay_kodes

seaweed brain | backstory

kay_kodes
Jul 26th, 2023 (edited)
620
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.27 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <link href="https://fonts.cdnfonts.com/css/rhinatta-script" rel="stylesheet">
  3.  
  4. <center>
  5. <style>
  6. /*Scrollbar*/
  7. ::-webkit-scrollbar {width: 3px}
  8. ::-webkit-scrollbar-track {background: #dcdcdc}
  9. ::-webkit-scrollbar-thumb {background: #5f9ea0}
  10. ::-webkit-scrollbar-thumb:hover {background: #5f9ea0}
  11.  
  12. /*BOX EFFECTS*/
  13. .zoom{
  14. transition: all 1.5s
  15.  
  16. }
  17. .zoom:hover {
  18. transform: translateY(-7px);
  19. transform: scale(1.02);
  20.  
  21.  
  22. }
  23.  
  24. .zoom:active {
  25. transform: translateY(-1px);
  26. }
  27.  
  28. /*IMAGE EFFECTS*/
  29. .img:hover {
  30. outline: none;
  31. filter:brightness(120%);
  32. transition: all 0.5s ease 0s;
  33.  
  34. }
  35.  
  36. .img:active {
  37. transform: translateY(-1px);
  38. transition: all 0.7s ease 0s;
  39.  
  40. }
  41.  
  42. /*IMAGE 1 EFFECTS*/
  43. .img1:hover {
  44. outline: none;
  45. filter:brightness(120%);
  46. transition: all 0.5s ease 0s;
  47. transform: translateY(-2px);
  48. transform:rotate(4deg);
  49.  
  50. }
  51.  
  52. .img1:active {
  53. transform: translateY(-2px);
  54. transition: all 0.7s ease 0s;
  55.  
  56. }
  57.  
  58. /*IMAGE 2 EFFECTS*/
  59. .img2:hover {
  60. outline: none;
  61. filter:brightness(120%);
  62. transition: all 0.5s ease 0s;
  63. transform: translateY(-2px);
  64. transform:rotate(-3deg);
  65.  
  66. }
  67.  
  68. .img2:active {
  69. transform: translateY(-2px);
  70. transition: all 0.7s ease 0s;
  71.  
  72.  
  73.  
  74. </style>
  75.  
  76. <br>
  77.  
  78. <a href="https://kaykodes.tumblr.com/" style="color:#808080;font-size:15px;margin-left:-570"><b><u>by kay kodes</u></b></a>
  79.  
  80. <!--PAGE DETAILS-->
  81. <div class="zoom" style="background:#fff;background-size:cover;width:650px;height:900px;outline:4px #5f9ea0 solid;outline-offset:-12px;margin-top:10px;box-shadow:0 0 15px #000;overflow:hidden">
  82.  
  83. <br>
  84.  
  85. <center>
  86. <br><br>
  87.  
  88. <!--LEFT IMAGE-->
  89. <div class="img">
  90. <img src="https://i.pinimg.com/564x/1c/f3/60/1cf360894ac54c48952d58dd0b5bae36.jpg" style="width:150px;height:200px;box-shadow:0 0 15px #000;object-fit:cover;margin-left:60px;float:left;transform:rotate(2deg)"></div>
  91.  
  92. <!--MIDDLE LEFT IMAGE-->
  93. <div class="img">
  94. <img src="https://i.pinimg.com/564x/d4/29/08/d42908729e2e5cefcde5492015d011fe.jpg" style="width:150px;height:200px;box-shadow:0 0 15px #000 ;object-fit:cover;margin-left:-50px;margin-top:40px;float:left;transform:rotate(6deg)" /></div>
  95.  
  96. <!--MIDDLE RIGHT IMAGE-->
  97. <div class="img">
  98. <img src="https://i.pinimg.com/564x/86/9b/70/869b70483be87c0ffe6cff8b2263f583.jpg" style="width:150px;height:200px;box-shadow:0 0 15px #000 ;object-fit:cover;margin-left:-20px;float:left;transform:rotate(-6deg)"></div>
  99.  
  100. <!--RIGHT IMAGE-->
  101. <div class="img">
  102. <img src="https://i.pinimg.com/564x/c4/18/e1/c418e1c91307d7b6ef75e02ba75d24cf.jpg" style="width:150px;height:200px;box-shadow:0 0 15px #000 ;object-fit:cover;margin-left:0px;float:left;transform:rotate(4deg);margin-top:30px"></div>
  103.  
  104.  
  105. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  106.  
  107. <!--FULL NAME-->
  108. <h style="font-size:40px;color:#5f9ea0 ;font-family:'rhinatta script';text-shadow: 0 0 1px #dcdcdc, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #000, 0 0 1px #000">- Your Full Name Here -</h>
  109.  
  110. <br>
  111.  
  112. <!--QUOTE-->
  113. <i style="font-family:'sethyn';font-size:15px;letter-spacing:2px">“life is only precious because it ends, kid.”</i>
  114.  
  115. <hr style="width:80%">
  116.  
  117. <!--
  118. outbox = place setting for the text
  119. innerbox = to control and edit the overflow scrollbar
  120. textbox = text
  121.  
  122. safe changes = height, font and text details
  123.  
  124. i would refrain messing with the margins and overflow as well as the width because i already measured it specially for this template. you are free to do with it but this is just a forewarning <3 if you need help, i'm avail to contact.
  125.  
  126. -->
  127.  
  128. <!--OUTER BOX-->
  129. <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:90%;text-align:justify;margin-right:10px;margin-left:10px;height:520px;overflow:auto;margin-top:10px">
  130.  
  131. <center>
  132.  
  133. <!--INNER BOX-->
  134. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:500px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;overflow:auto;margin-bottom:10px">
  135.  
  136. <!--TEXT BOX-->
  137. <div style="text-align:justify;border-radius:0px;color:#808080;font-family:'Times New Roman';font-size:15px;width:460px;text-align:justify;margin-right:10px;margin-left:10px;height:440px;margin-bottom:10px;margin-top:10px">
  138.  
  139. <div class="img1">
  140. <img src="https://i.pinimg.com/564x/a4/c4/fd/a4c4fdabf85806dcfdf41850e4c12e8a.jpg" style="width:150px;height:120px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-right:15px;float:left;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(-4deg);margin-left:5px"></div>
  141. Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  142.  
  143.  
  144. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  145.  
  146. <p>
  147.  
  148. <div class="img2">
  149. <img src="https://i.pinimg.com/736x/f7/05/22/f70522ca235dec0cbdf1f837dda33364.jpg" style="width:150px;height:180px;box-shadow:5px 5px 10px #000 ;object-fit:cover;margin-left:15px;float:right;margin-bottom:10px;border-bottom: 25px solid #fff;border-top:#fff 9px solid;border-left:#fff 9px solid;border-right:#fff 9px solid;transform:rotate(3deg)"></div>
  150. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  151.  
  152.  
  153. <p>Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? <i>"Lorem ipsum dolor sit amet. Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam."</i> Aut voluptas sint aut ipsa dolorum ea quidem optio est rerum totam in delectus doloremque! Non quia ipsam non tenetur quod ab dolores iste est quibusdam quisquam. Et nihil itaque et voluptatum perspiciatis id alias nihil vel cumque autem? Et galisum adipisci At galisum velit et enim asperiores sed aliquam iste rem enim quaerat ea nisi eveniet.
  154.  
  155. <br><br>
  156.  
  157. </div>
  158. </div></div></div>
  159. <br>
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!