solielios

A title turning into a scrollbox! ♡

Sep 19th, 2021 (edited)
1,526
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.62 KB | None | 1 0
  1. <!-- CR Solielios for this menu. DO NOT REPUBLISH ANYWHERE ELSE PERIOD !!! This is actually the menu I am personally the proudest of because of how flexible it turned out. It will readjust itself just anywhere you put it :) -->
  2.  
  3. <style>
  4. @font-face {
  5. font-family: lovesong;
  6. src: url(https://dl.dropbox.com/s/gxv6scjl5kdbhlj/MfLoveSong.ttf);
  7. }
  8.  
  9. @font-face {
  10. font-family: 'Magica';
  11. src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  12. }
  13. </style>
  14. <body>
  15. <div id="rabbits">
  16. <div class="perfume"> SECTION 1 </div>
  17. <div class="lotion">
  18. <p> You can just put your text here! If it's long enough it will turn into a scrollbox. Like this! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed risus at odio pretium dapibus a eu odio. Vestibulum vitae augue imperdiet, consequat quam ut, dapibus mauris. Duis sapien sapien, aliquet nec diam vel, sagittis elementum nisi. Sed ac leo eu lectus consectetur pharetra et et metus. Pellentesque in interdum enim. Sed commodo sem a lorem elementum, ut consequat turpis volutpat. Donec scelerisque velit at aliquet imperdiet. Ut interdum neque sed quam rhoncus efficitur. Donec porta luctus elit bibendum auctor. Suspendisse ut elit a velit sodales molestie dictum et turpis. </p>
  19. </div>
  20. </div>
  21.  
  22. <p>
  23. <div id="rabbits">
  24. <div class="perfume"> SECTION 2 </div>
  25. <div class="lotion">
  26. <p> You can just put your text here! If it's long enough it will turn into a scrollbox. Like this! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed risus at odio pretium dapibus a eu odio. Vestibulum vitae augue imperdiet, consequat quam ut, dapibus mauris. Duis sapien sapien, aliquet nec diam vel, sagittis elementum nisi. Sed ac leo eu lectus consectetur pharetra et et metus. Pellentesque in interdum enim. Sed commodo sem a lorem elementum, ut consequat turpis volutpat. Donec scelerisque velit at aliquet imperdiet. Ut interdum neque sed quam rhoncus efficitur. Donec porta luctus elit bibendum auctor. Suspendisse ut elit a velit sodales molestie dictum et turpis. </p>
  27. </div>
  28. </div>
  29.  
  30. <p>
  31. <div id="rabbits">
  32. <div class="perfume"> SECTION 3 </div>
  33. <div class="lotion">
  34. <p> You can just put your text here! If it's long enough it will turn into a scrollbox. Like this! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed risus at odio pretium dapibus a eu odio. Vestibulum vitae augue imperdiet, consequat quam ut, dapibus mauris. Duis sapien sapien, aliquet nec diam vel, sagittis elementum nisi. Sed ac leo eu lectus consectetur pharetra et et metus. Pellentesque in interdum enim. Sed commodo sem a lorem elementum, ut consequat turpis volutpat. Donec scelerisque velit at aliquet imperdiet. Ut interdum neque sed quam rhoncus efficitur. Donec porta luctus elit bibendum auctor. Suspendisse ut elit a velit sodales molestie dictum et turpis. </p>
  35. </div>
  36. </div>
  37.  
  38. <p>
  39. <div id="rabbits">
  40. <div class="perfume"> SECTION 4 </div>
  41. <div class="lotion">
  42. <p> You can just put your text here! If it's long enough it will turn into a scrollbox. Like this! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed risus at odio pretium dapibus a eu odio. Vestibulum vitae augue imperdiet, consequat quam ut, dapibus mauris. Duis sapien sapien, aliquet nec diam vel, sagittis elementum nisi. Sed ac leo eu lectus consectetur pharetra et et metus. Pellentesque in interdum enim. Sed commodo sem a lorem elementum, ut consequat turpis volutpat. Donec scelerisque velit at aliquet imperdiet. Ut interdum neque sed quam rhoncus efficitur. Donec porta luctus elit bibendum auctor. Suspendisse ut elit a velit sodales molestie dictum et turpis.</p>
  43. </div>
  44. </div>
  45.  
  46. <a href="https://limonysal.crd.co/"><img class=lim src="https://64.media.tumblr.com/531946e16c254d0f3f0982efadd14884/tumblr_inline_mkhtbi7qce1qz4rgp.png"></a>
  47.  
  48. </body>
  49.  
  50. <style>
  51. #rabbits {
  52. display: inline-block;
  53. text-align: center;
  54. width: 97%;
  55. padding: 5px;
  56. height: 50px;
  57. overflow-x: hidden;
  58. overflow-y: hidden;
  59. border: 2px dashed #Eaaac3;
  60. background: url("https://wonderhoi.crd.co/assets/images/gallery02/225b7d99.jpg?v=cd77424d");
  61. transition: all 1s ease-out;
  62. -o-transition-transition: all 1s ease-out;
  63. -webkit-transition: all 1s ease-out;
  64. -moz-transition: all 1s ease-out;
  65. }
  66.  
  67. .perfume {
  68. font-family: "lovesong";
  69. font-size: 35px;
  70. color: #fff;
  71. text-shadow: -1px 0 #Db94b0, 0 1px #Db94b0, 1px 0 #Db94b0, 0 -1px #Db94b0, 0 0;
  72. opacity: 1;
  73. transition: all 0.5s ease-out;
  74. -o-transition-transition: all 0.5s ease-out;
  75. -webkit-transition: all 0.5s ease-out;
  76. -moz-transition: all 0.5s ease-out;
  77. }
  78.  
  79. #rabbits:hover .perfume {
  80. margin-top: -50px;
  81. opacity: 0;
  82. filter: blur(1px);
  83. }
  84.  
  85. .lotion {
  86. overflow-x: scroll;
  87. margin-top: 10px;
  88. margin-bottom: 20px;
  89. font-family: magica;
  90. font-weight: bold;
  91. color: #A85676;
  92. opacity: 0;
  93. transition: all 0.5s ease-out;
  94. -o-transition-transition: all 0.5s ease-out;
  95. -webkit-transition: all 0.5s ease-out;
  96. -moz-transition: all 0.5s ease-out;
  97. padding: 10px;
  98. overflow-x: hidden;
  99. height: 50px;
  100. border: double 3px #Db94b0;
  101. border-radius: 12px;
  102. background: url("https://wonderhoi.crd.co/assets/images/gallery02/4fa5e909.jpg?v=cd77424d");
  103. }
  104.  
  105. #rabbits:hover .lotion {
  106. opacity: 1;
  107. overflow-x: hidden;
  108. height: 50px;
  109. }
  110.  
  111. .lim {
  112. position: fixed;
  113. bottom: 10px;
  114. left: 10px;
  115. margin-bottom: 10px;
  116. margin-left: 10px;
  117. width: 10px;
  118. height: auto;
  119. }
  120.  
  121. </style>
  122.  
Add Comment
Please, Sign In to add comment