All Prompts
All Prompts
herosectionresponsiveinteractivetailwindportfolioheader
Cinematic Portfolio Hero Header
Полноэкранный заголовок для портфолио с кинематографичными изображениями, наложением статуса и двумя CTA. Идеально для фотографов и видеографов.
Prompt
<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Hero Only</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Space Grotesk','sans-serif'],
mono: ['Space Mono','monospace'],
},
colors: {
acid: '#ccff00',
acidInk: '#2B3300',
raw: '#f0f0f0',
dark: '#050505',
grid: '#333333',
error: '#ff3333',
},
animation: {
flicker: 'flicker 0.15s infinite alternate',
},
keyframes: {
flicker: { '0%': { opacity: '0.8' }, '100%': { opacity: '1' } }
}
}
}
}
</script>
<style>
.bg-atmosphere {
width: 100vw;
height: 100vh;
background:
radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.33) 100%),
linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)),
repeating-linear-gradient(to right, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 120px),
repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px);
opacity: 1;
}
</style>
</head>
<body class="text-raw antialiased overflow-x-hidden font-sans relative bg-dark">
<!-- Optional grid rails -->
<div
class="fixed inset-0 pointer-events-none z-0 flex justify-between px-6 md:px-12 max-w-[1600px] mx-auto opacity-20">
<div class="w-px h-full bg-grid"></div>
<div class="hidden md:block w-px h-full bg-grid"></div>
<div class="hidden lg:block w-px h-full bg-grid"></div>
<div class="w-px h-full bg-grid"></div>
</div>
<!-- Atmosphere overlay -->
<div class="bg-atmosphere pointer-events-none fixed inset-0 z-[5]"></div>
<!-- HERO (paste your hero exactly here) -->
<header
class="relative max-w-[1600px] mx-auto min-h-screen grid grid-cols-1 lg:grid-cols-2 border-x border-dashed border-white/5 z-10">
<!-- Left Column: Content -->
<div
class="flex flex-col md:px-12 lg:py-0 border-dashed lg:border-b-0 lg:border-r z-20 border-white/5 border-b px-6 py-20 relative backdrop-blur-sm justify-center">
<div class="absolute top-6 left-6 md:left-12 font-mono text-[10px] text-acid animate-flicker pointer-events-none">
SYSTEM STATUS: RECORDING<br>
LOC: NY_USA<br>
TIME: <span id="time">01:37:42</span>
</div>
<div class="max-w-xl relative z-10">
<h1 class="text-6xl md:text-7xl lg:text-8xl font-bold leading-[0.85] tracking-tighter uppercase mb-12">
<span class="block w-max transition-all duration-300 hover:translate-x-4 hover:text-transparent text-white hover:text-outline-hover cursor-default">
Silence
</span>
<span class="block w-max transition-all duration-300 delay-75 hover:translate-x-4 hover:text-transparent text-white hover:text-outline-hover cursor-default">
Between
</span>
<span class="block w-max mt-4 text-acid text-4xl md:text-6xl lg:text-7xl font-mono font-normal tracking-tight bg-grid/30 px-4 -rotate-1 border border-acid/20 transition-all duration-300 hover:translate-x-4 hover:bg-acid hover:text-black cursor-default">
The_Frames
</span>
</h1>
<div class="group relative pl-6 bg-white/5 backdrop-blur-md py-6 pr-6 mb-10 rounded-r-sm overflow-hidden">
<div
class="absolute left-0 top-0 bg-acid transition-all duration-300 ease-out h-full w-[2px] group-hover:h-[2px] group-hover:w-full origin-top-left">
</div>
<div
class="absolute top-4 right-4 text-right pointer-events-none opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 delay-75">
<p class="font-mono text-[10px] text-raw uppercase tracking-widest leading-relaxed opacity-90">
<span class="text-acid">[ SIGNAL ACQUIRED ]</span><br>
STATUS: AVAILABLE FOR WORK
</p>
</div>
<div class="relative z-10">
<p
class="font-mono text-xs md:text-sm text-gray-400 group-hover:text-gray-600 transition-colors duration-300 leading-relaxed uppercase mb-4">
// Visual Architecture<br>// Documentary Fragments
</p>
<p
class="font-sans text-lg text-gray-300 group-hover:text-gray-500 transition-colors duration-300 leading-tight">
Based in
<span class="text-white border-b border-white group-hover:text-gray-400 group-hover:border-gray-500 transition-colors duration-300">New York</span>.
Documenting the liminal spaces where human presence fades into geometry.
</p>
</div>
</div>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
<a href="#"
class="group relative inline-flex items-center gap-4 bg-raw text-black px-8 py-4 font-mono text-sm font-bold uppercase tracking-widest hover:bg-acid transition-colors">
Enter Archive
<iconify-icon icon="solar:arrow-right-linear" width="18"
class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</a>
<a href="#"
class="group inline-flex items-center gap-2 text-raw font-mono text-xs uppercase tracking-widest hover:text-acid transition-colors px-4 py-2">
<span class="border-b border-transparent group-hover:border-acid transition-all">Read Statement</span>
<iconify-icon icon="solar:arrow-right-up-linear" width="14"
class="opacity-50 group-hover:opacity-100 transition-opacity"></iconify-icon>
</a>
</div>
</div>
</div>
<!-- Right Column: Visual Panel -->
<div
class="relative h-[60vh] lg:h-auto overflow-hidden group/panel border-b border-dashed border-white/5 lg:border-none">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c2f57749-813b-4faa-b5ca-e5ed5fc06ae5_3840w.webp?w=800&q=80"
class="absolute inset-0 w-full h-full object-cover grayscale contrast-130 brightness-65 saturate-0 transition-transform duration-1000 ease-out group-hover/panel:scale-105 group-hover/panel:translate-x-2 group-hover/panel:-translate-y-2 motion-reduce:transform-none"
alt="Signal Field">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent pointer-events-none">
</div>
<div class="absolute inset-0 bg-grid opacity-10 mix-blend-overlay"></div>
<div class="absolute inset-4 border border-white/10 pointer-events-none flex flex-col justify-between p-4">
<div class="flex justify-between items-start">
<div class="w-2 h-2 bg-acid box-content border border-black shadow-[0_0_8px_rgba(204,255,0,0.6)]"></div>
<div class="w-2 h-2 border border-acid"></div>
</div>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40%] aspect-square border border-white/5 rounded-full flex items-center justify-center opacity-30 group-hover/panel:scale-95 transition-transform duration-700 motion-reduce:transform-none">
<div class="w-px h-full bg-white/10"></div>
<div class="h-px w-full bg-white/10"></div>
</div>
<div class="flex justify-between items-end">
<div class="text-acid/80 font-mono text-[9px] tracking-widest bg-black/50 px-2 backdrop-blur-sm">
[ SIGNAL_FRAME_0001 ]<br>NYC / 2024
</div>
<div class="w-2 h-2 bg-raw box-content border border-black"></div>
</div>
</div>
</div>
</header>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString('en-US', { hour12: false });
const el = document.getElementById('time');
if (el) el.innerText = timeString;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>