Overlaying half of a logo on top of an image
I'm trying to get half of the 'RixtMixt' logo to be on top of the first image, as seen in the design (1st image attached). My previous attempts resulted in the section overflowing, or there being some weird whitespace. The section needs to be 100vh. Here's the code (Astro & Tailwind):
<section
id="streetwear"
class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7"
>
<Logo outline={true} />
<div class="flex flex-wrap flex-col md:flex-row gap-4">
{
[
{
src: streetwear1,
alt: "Person wearing the '?!' socks and yellow Adidas shoes",
text: '?!',
},
{
src: streetwear2,
alt: "Person wearing the 'Shine' socks and lightblue Adidas shoes",
text: 'Shine',
},
{
src: streetwear3,
alt: "Person on a bike wearing the 'Sunny Side Up' socks and green Nike shoes",
text: 'Sunny side up',
},
].map(item => (
<div class="uppercase flex-1 text-orange">
<Image
src={item.src}
class="w-full md:w-auto object-cover"
alt={item.alt}
/>
<span>{item.text}</span>
</div>
))
}
</div>
</section>
