Advertisement
mooeena

Honeycomb Hive F2U Buzzly.art Layout

Jan 21st, 2022
1,111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.78 KB | None | 0 0
  1. <div class="container grid grid-cols-3 gap-3  mx-auto my-3 w-full sm:w-48 md:w-72 lg:w-4/5  xl:w-3/4 relative   flex">
  2.  
  3. <div class="col-span-2 sm:col-span-full md:col-span-2 bg-opacity-50 bg-yellow-400 backdrop-filter backdrop-blur-sm p-5 text-white rounded-sm ">
  4. <div class="font-mono text-3xl">Honeycomb Hive</div>
  5. <div class="font-sans-serif italic text-lg">A Responsive ⬡ Buzzly.art ⬡ Layout</div>
  6. </div>
  7. <div class="col-span-1 sm:col-span-full md:col-span-1 sm:order-first md:order-none">
  8. <img class="rounded-full object-cover mx-auto" src="https://submissions.buzzly.art/IMAGE/70a6db67-4789-43f6-ac42-fdd29afeb69c_876aaabc-6154-4aa7-a9e1-bdb28ab4acfb.png">
  9. </div>
  10. <div class="col-span-full overflow-visible bg-opacity-50 bg-yellow-400 backdrop-filter backdrop-blur-sm p-3 text-white rounded-sm"><p>Welcome to <strong>Honeycomb,</strong> a hexagonal stamp layout for Buzzly! Honeycomb stamps are designed to fit in with classic rectangular stamps, as well as in interlocking Honeycomb layouts. These stamps and profile layouts are free to use and modify for your own stamps and profile layouts as long as this page is credited. The stamp template comes with built-in effects and styles.</p>
  11. </div>
  12. <div class="col-span-1 sm:col-span-full lg:col-span-1">
  13. <a class="block bg-opacity-50 bg-yellow-400 hover:bg-yellow-300 backdrop-filter backdrop-blur-sm p-3 text-white text-center rounded-md text-lg " href="BUTTON" rel="nofollow">⬣ Link ⬣</a>
  14. </div>
  15. <div class="col-span-1 sm:col-span-full lg:col-span-1">
  16. <a class="block bg-opacity-50 bg-yellow-400 hover:bg-yellow-300 backdrop-filter backdrop-blur-sm p-3 text-white text-center rounded-md text-lg " href="BUTTON" rel="nofollow">⬣ Link ⬣</a>
  17. </div>
  18. <div class="col-span-1 sm:col-span-full lg:col-span-1">
  19. <a class="block bg-opacity-50 bg-yellow-400 hover:bg-yellow-300 backdrop-filter backdrop-blur-sm p-3 text-white text-center rounded-md text-lg " href="BUTTON" rel="nofollow">⬣ Link ⬣</a>
  20. </div>
  21. <div class="col-span-full mx-auto w-full mb-3 sm:mb-10 md:mb-3  h-48 sm:h-96 md:h-64  lg:h-48  relative overflow-visible bg-opacity-50 bg-yellow-400 backdrop-filter backdrop-blur-sm text-white rounded-sm">
  22. <div class="relative w-48 h-full mx-auto sm:mx-0 lg:mx-auto md:left-12 lg:left-0 ">
  23. <div class=" absolute mx-2 my-1 top-0 sm:top-16 md:top-8 lg:top-0">
  24.     <div class="absolute top-0 ">
  25.      <div class=" w-16 h-14 absolute top-8 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover" src="https://i.imgur.com/mpemUhU.png"></a>
  26.     </div>
  27.     <div class=" w-16 h-14 absolute left-14 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  28.     </div>
  29.     <div class=" w-16 h-14 absolute top-8 left-28 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover" src="https://i.imgur.com/mpemUhU.png"></a>
  30.     </div>
  31.    </div>
  32.    <div class="absolute top-16">
  33.      <div class=" w-16 h-14 absolute top-8 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover filter" src="https://i.imgur.com/mpemUhU.png"></a>
  34.     </div>
  35.     <div class=" w-16 h-14 absolute left-14 "><a href="https://buzzly.art/~Moolikeagoat/art/buzzly-logo-honeycomb-stamp" rel="nofollow"><img class=" object-cover " src="https://submissions.buzzly.art/IMAGE/55067e47-4192-41bc-b6d6-75ef042d882a_70bbb9ac-aeae-419d-a17f-2fedc3cc6092.png"></a>
  36.     </div>
  37.     <div class=" w-16 h-14 relative top-8 left-28"><a href="https://buzzly.art" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  38.     </div>
  39.    </div>
  40.       <div class="absolute top-32">
  41.     <div class=" w-16 h-14 absolute left-14 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  42.     </div>
  43.    </div>
  44.    </div>
  45.  
  46. <div class=" absolute -left-14 sm:left-0  md:-left-14 mx-2 my-1">
  47.  <div class="absolute top-0 -left-14 sm:left-0 sm:top-64 md:-top-8 md:left-14 lg:top-0 lg:-left-14">
  48.      <div class=" w-16 h-14 absolute top-8 "><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover" src="https://i.imgur.com/mpemUhU.png"></a>
  49.     </div>
  50.     <div class=" w-16 h-14 absolute top-24 md:top-56 lg:top-24"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  51.     </div>
  52.    </div>
  53.     <div class="absolute top-0 md:top-8 lg:top-0">
  54.    
  55.      <div class=" w-16 h-14 absolute top-0 sm:left-28 sm:top-8 md:left-0 md:top-0"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  56.     </div>
  57.     <div class=" w-16 h-14 absolute top-16 sm:left-14 sm:top-0 md:top-16 md:left-0"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  58.     </div>
  59.     <div class=" w-16 h-14 absolute top-32 sm:top-8 md:top-32"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  60.     </div>
  61.    </div>
  62.  
  63.   </div>
  64.  
  65.   <div class=" absolute left-28 sm:left-0 sm:top-56 md:left-28 md:top-0 mx-2 my-1">
  66.     <div class="absolute top-0 md:top-8 lg:top-0">
  67.      <div class=" w-16 h-14 absolute top-0 left-14 sm:left-0 md:left-14"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  68.     </div>
  69.     <div class=" w-16 h-14 absolute top-16 left-14 sm:top-8 md:top-16"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  70.     </div>
  71.     <div class=" w-16 h-14 absolute top-32 left-14 sm:top-0 sm:left-28 md:top-32 md:left-14"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  72.     </div>
  73.    </div>
  74.    <div class="absolute top-0 left-28 sm:left-28 sm:top-8 md:left-0 lg:left-28 lg:top-0">
  75.      <div class=" w-16 h-14 absolute top-8 md:-top-8 lg:top-8"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover" src="https://i.imgur.com/mpemUhU.png"></a>
  76.     </div>
  77.     <div class=" w-16 h-14 absolute top-24 md:top-40 lg:top-24"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  78.     </div>
  79.    </div>
  80.      <div class="absolute top-16 left-14 md:top-56  md:left-0 lg:top-16 lg:left-14">
  81.      <div class=" w-16 h-14 absolute top-8 hidden sm:block md:hidden"><a href="https://buzzly.art/" rel="nofollow"><img class=" object-cover " src="https://i.imgur.com/mpemUhU.png"></a>
  82.     </div>
  83.     <div class="absolute  italic text-xs top-24 left-14 sm:left-0 md:left-14 md:top-0 lg:top-24"><a class="absolute left-4" href="https://buzzly.art/~Moolikeagoat/art/honeycomb-f2u-buzzly-art-stamps-code" rel="nofollow">code</a>
  84.    </div>
  85.    </div>
  86.   </div>
  87. </div>
  88. </div>
  89. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement