Advertisement
solielios

Petals menu! ♡

Sep 19th, 2021 (edited)
1,003
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.96 KB | None | 0 0
  1. <!-- CR Solielios for this menu. DO NOT REPUBLISH ANYWHERE ELSE PERIOD !!! -->
  2.  
  3. <!DOCTYPE HTML>
  4. <body>
  5. <div class="wrapper">
  6.  
  7. <div id="t1">
  8. <!-- THIS IS WHERE YOU CAN CHANGE THE PIXEL -->
  9. <b><div style="font-size: 32px;"><img src="http://media.tumblr.com/tumblr_mdpf5gSlym1qdlkyg.gif"></a></div></b><br><p>
  10. <!-- THIS IS THE HEAING PART -->
  11. <div style="background: #ffffff; border: 2px dotted #fc8b9e; padding: 8px;font-size: 23px;"><b>slot 1</b></div><p><br>
  12. <!-- HERE GOES YOUR CONTENT -->
  13. Info goes here...
  14. </p>
  15. </div>
  16.  
  17. <div class="wrapper">
  18.  
  19. <div id="t2">
  20.  
  21. <b><div style="font-size: 32px;"><img src="https://31.media.tumblr.com/tumblr_m7kw09lok21qid2nw.gif"></a></div></b><br><p>
  22.  
  23. <div style="background: #ffffff; border: 2px dotted #fc8b9e; padding: 8px;font-size: 23px;"><b>slot 2</b></div><p><br>
  24.  
  25. Info goes here...
  26. </p>
  27. </div>
  28.  
  29. </div>
  30.  
  31. <div class="wrapper">
  32.  
  33. <div id="t3">
  34.  
  35. <b><div style="font-size: 32px;"><img src="http://media.tumblr.com/tumblr_mdpf6druIu1qdlkyg.gif"></a></div></b><br><p>
  36.  
  37. <div style="background: #ffffff; border: 2px dotted #fc8b9e; padding: 8px;font-size: 23px;"><b>slot 3</b></div><p><br>
  38.  
  39. Info goes here...
  40. </p>
  41. </div>
  42.  
  43. </div>
  44.  
  45. <div class="wrapper">
  46.  
  47. <div id="t4">
  48.  
  49. <b><div style="font-size: 32px;"><img src="http://media.tumblr.com/tumblr_mdns7nrbqe1qdlkyg.gif"></a></div></b><br><p>
  50.  
  51. <div style="background: #ffffff; border: 2px dotted #fc8b9e; padding: 8px;font-size: 23px;"><b>slot 4</b></div><p><br>
  52.  
  53. Info goes here...
  54. </p>
  55. </div>
  56.  
  57. </div>
  58.  
  59. <a href="https://limonysal.crd.co/"><img class=lim src="https://64.media.tumblr.com/531946e16c254d0f3f0982efadd14884/tumblr_inline_mkhtbi7qce1qz4rgp.png"></a>
  60.  
  61. </body>
  62.  
  63. <style>
  64. #t1{
  65. border-top-right-radius: 15px;/*THE BIGGER THE NUMBER, THE ROUNDER*/
  66. border-top-left-radius: 0px;
  67. border-bottom-right-radius: 0px;
  68. border-bottom-left-radius: 15px;
  69. font-size:14px; color: #7777777;
  70. background: #ffffff;
  71. position:absolute;
  72. left:30px; top:30px; /*THIS IS THE DISTANCE AWAY FROM EACH OTHER*/
  73. text-align: center;
  74. padding: 7px;
  75. bottom: 0px;
  76. height:20px; width: 20px; /*CHANGE SIZE HERE*/
  77. overflow:hidden;
  78. border: 2px solid #fc8b9e;/*CHANGE BORDER HERE*/
  79. -webkit-transition: opacity 0.7s linear;
  80. -webkit-transition: all 0.7s ease-in-out;
  81. -moz-transition: all 0.7s ease-in-out;
  82. -o-transition: all 0.7s ease-in-out;
  83. z-index:25;
  84. }
  85.  
  86. #t1:hover{
  87. text-align: center;
  88. border-top-right-radius: 15px;
  89. border-top-left-radius: 0px;
  90. border-bottom-right-radius: 15px;
  91. border-bottom-left-radius: 15px;
  92. border: 2px solid #fc8b9e; /*CHANGE BORDER ON HOVER HERE*/
  93. -webkit-transition: opacity 0.7s linear;
  94. -webkit-transition: all 0.7s ease-in-out;
  95. -moz-transition: all 0.7s ease-in-out;
  96. -o-transition: all 0.7s ease-in-out;
  97. padding:5px;
  98. height:220px; width:170px; /*CHANGE BORDER DIMENSIONS HERE*/
  99. z-index:25;
  100. opacity: 2.0;
  101. background:white;
  102. }
  103.  
  104. .ttitle {
  105. background: #E3E4FA;
  106. padding: 5px;
  107. font-size: 12px;
  108. }
  109.  
  110. #t2{
  111. border-top-right-radius: 0px;
  112. border-top-left-radius: 15px;
  113. border-bottom-right-radius: 15px;
  114. border-bottom-left-radius: 0px;
  115. font-size:14px; color: #7777777;
  116. background: #ffffff;
  117. position:absolute;
  118. left:70px; top:30px;
  119. text-align: center;
  120. padding: 7px;
  121. bottom: 0px;
  122. height:20px; width: 20px;
  123. overflow:hidden;
  124. border: 2px solid #fc8b9e;
  125. -webkit-transition: opacity 0.7s linear;
  126. -webkit-transition: all 0.7s ease-in-out;
  127. -moz-transition: all 0.7s ease-in-out;
  128. -o-transition: all 0.7s ease-in-out;
  129. z-index:24;
  130. }
  131.  
  132. #t2:hover{
  133. text-align: center;
  134. border-top-right-radius: 15px;
  135. border-top-left-radius: 0px;
  136. border-bottom-right-radius: 15px;
  137. border-bottom-left-radius: 15px;
  138. border: 2px solid #fc8b9e;
  139. -webkit-transition: opacity 0.7s linear;
  140. -webkit-transition: all 0.7s ease-in-out;
  141. -moz-transition: all 0.7s ease-in-out;
  142. -o-transition: all 0.7s ease-in-out;
  143. padding:5px;
  144. height:220px;
  145. width:170px;
  146. z-index:24;
  147. opacity: 2.0;
  148. background:white;
  149. }
  150.  
  151. #t3{
  152. border-top-right-radius: 0px;
  153. border-top-left-radius: 15px;
  154. border-bottom-right-radius: 15px;
  155. border-bottom-left-radius: 0px;
  156. font-size:14px; color: #777777;
  157. background: #ffffff;
  158. position:absolute;
  159. left:30px; top:70px;
  160. text-align: center;
  161. padding: 7px;
  162. bottom: 0px;
  163. height:20px; width: 20px;
  164. overflow:hidden;
  165. border: 2px solid #fc8b9e;
  166. -webkit-transition: opacity 0.7s linear;
  167. -webkit-transition: all 0.7s ease-in-out;
  168. -moz-transition: all 0.7s ease-in-out;
  169. -o-transition: all 0.7s ease-in-out;
  170. z-index:23;
  171. }
  172.  
  173. #t3:hover{
  174. text-align: center;
  175. border-top-right-radius: 15px;
  176. border-top-left-radius: 0px;
  177. border-bottom-right-radius: 15px;
  178. border-bottom-left-radius: 15px;
  179. border: 2px solid #fc8b9e;
  180. -webkit-transition: opacity 0.7s linear;
  181. -webkit-transition: all 0.7s ease-in-out;
  182. -moz-transition: all 0.7s ease-in-out;
  183. -o-transition: all 0.7s ease-in-out;
  184. padding:5px;
  185. height:220px;
  186. width:170px;
  187. z-index:23;
  188. opacity: 2.0;
  189. background:white;
  190. }
  191.  
  192. #t4{
  193. border-top-right-radius: 15px;
  194. border-top-left-radius: 0px;
  195. border-bottom-right-radius: 0px;
  196. border-bottom-left-radius: 15px;
  197. font-size:14px; color: #777777;
  198. background: #ffffff;
  199. position:absolute;
  200. left:70px; top:70px;
  201. text-align: center;
  202. padding: 7px;
  203. bottom: 0px;
  204. height:20px; width: 20px;
  205. overflow:hidden;
  206. border: 2px solid #fc8b9e;
  207. -webkit-transition: opacity 0.7s linear;
  208. -webkit-transition: all 0.7s ease-in-out;
  209. -moz-transition: all 0.7s ease-in-out;
  210. -o-transition: all 0.7s ease-in-out;
  211. z-index:22;
  212. }
  213.  
  214. #t4:hover{
  215. text-align: center;
  216. border-top-right-radius: 15px;
  217. border-top-left-radius: 0px;
  218. border-bottom-right-radius: 15px;
  219. border-bottom-left-radius: 15px;
  220. border: 2px solid #fc8b9e;
  221. -webkit-transition: opacity 0.7s linear;
  222. -webkit-transition: all 0.7s ease-in-out;
  223. -moz-transition: all 0.7s ease-in-out;
  224. -o-transition: all 0.7s ease-in-out;
  225. padding:5px;
  226. height:220px;
  227. width:170px;
  228. z-index:22;
  229. opacity: 2.0;
  230. background:white;
  231. }
  232.  
  233. .lim {
  234. position: fixed;
  235. bottom: 10px;
  236. left: 10px;
  237. margin-bottom: 10px;
  238. margin-left: 10px;
  239. width: 10px;
  240. height: auto;
  241. }
  242.  
  243. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement