All Prompts
All Prompts
sectiongallerymediascrollableresponsivetailwind
Backstage Horizontal Scroll Gallery Section
Секция галереи с горизонтальной прокруткой изображений. Полноширинная, с заголовком, подзаголовком и стрелками. Адаптивный дизайн.
Prompt
<section class="mb-32" id="backstage">
<div class="max-w-5xl mx-auto px-6 mb-8 flex items-end justify-between">
<div>
<h2 class="text-2xl font-semibold text-white tracking-tight mb-2">Backstage</h2>
<p class="text-sm text-neutral-500">Behind the scenes on recent productions.</p>
</div>
<div class="hidden sm:flex gap-2">
<div class="w-8 h-8 rounded-full border border-neutral-800 flex items-center justify-center text-neutral-500">
<iconify-icon icon="lucide:arrow-left" width="14" stroke-width="1.5"></iconify-icon>
</div>
<div class="w-8 h-8 rounded-full border border-neutral-800 flex items-center justify-center text-neutral-500">
<iconify-icon icon="lucide:arrow-right" width="14" stroke-width="1.5" class=""></iconify-icon>
</div>
</div>
</div>
<!-- Horizontal Scroll Container -->
<div class="overflow-x-auto snap-x snap-mandatory scrollbar-hide w-full pb-4">
<div
class="flex gap-4 sm:mx-0 sm:px-[max(1.5rem,calc((100vw-64rem)/2))] w-max mr-auto ml-auto pr-6 pl-6 gap-x-4 gap-y-4">
<!-- Item 1 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=1000&auto=format&fit=crop" alt="Backstage 1" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:clapperboard" width="12"></iconify-icon> On Set
</span>
</div>
</div>
<!-- Item 2 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?q=80&w=1000&auto=format&fit=crop" alt="Backstage 2" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:settings-2" width="12"></iconify-icon> Equipment Setup
</span>
</div>
</div>
<!-- Item 3 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1522858547137-f1dcec554f55?q=80&w=1000&auto=format&fit=crop" alt="Backstage 3" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:mic" width="12"></iconify-icon> Boom Operation
</span>
</div>
</div>
<!-- Item 4 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1000&auto=format&fit=crop" alt="Backstage 4" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:film" width="12"></iconify-icon> Exterior Night Shoot
</span>
</div>
</div>
<!-- Item 5 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&q=80" alt="Backstage 5" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:headphones" width="12"></iconify-icon> Studio Recording
</span>
</div>
</div>
<!-- Item 6 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80" alt="Backstage 6" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:sliders" width="12"></iconify-icon> Sound Mixing
</span>
</div>
</div>
<!-- Item 7 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=2160&q=80" alt="Backstage 7" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:activity" width="12"></iconify-icon> Field Recording
</span>
</div>
</div>
<!-- Item 8 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Backstage 8" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:map-pin" width="12"></iconify-icon> Location Scouting
</span>
</div>
</div>
<!-- Item 9 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="Backstage 9" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:monitor-play" width="12"></iconify-icon> Post Production
</span>
</div>
</div>
<!-- Item 10 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg" alt="Backstage 10" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:volume-2" width="12"></iconify-icon> Sound Check
</span>
</div>
</div>
<!-- Item 11 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop" alt="Backstage 11" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:video" width="12"></iconify-icon> Interview Setup
</span>
</div>
</div>
<!-- Item 12 -->
<div
class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative aspect-[4/3] rounded-lg overflow-hidden border border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Backstage 12" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0">
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:check-circle" width="12"></iconify-icon> Final Mix
</span>
</div>
</div>
</div>
</div>
</section>