All Prompts
All Prompts
featuresectionportfoliogridinteractiveanimatedresponsivecss
Featured Projects Grid Section with Hover Reveal
Секция с сеткой проектов: 3 колонки, эффекты при наведении, теги. Адаптивный дизайн для портфолио, архитектуры, агентств. Демонстрация работ.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects - Verd Architecture</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:root{
--color-bg:#0F0F0E;
--color-bg-elevated:#1A1917;
--color-bg-card:#22211E;
--color-surface:#2C2B27;
--color-copper:#C17F59;
--color-copper-light:#D4A07A;
--color-copper-bright:#E8B894;
--color-terracotta:#C4704E;
--color-gold:#C9A96E;
--color-gold-light:#DFC08A;
--color-sage:#8A9A7B;
--color-cream:#F5F0EB;
--color-cream-muted:#D9D2CA;
--color-text:#F5F0EB;
--color-text-muted:#9C9789;
--color-text-subtle:#6B675E;
--font-display:'Playfair Display',Georgia,serif;
--font-body:'Inter',system-ui,-apple-system,sans-serif;
--ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}
.container{max-width:1320px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}
.section{padding:clamp(5rem,12vh,9rem) 0;position:relative}
.section-label{
display:inline-flex;align-items:center;gap:0.5rem;
font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
color:var(--color-copper);
margin-bottom:1.5rem;
}
.section-label::before{
content:'';width:30px;height:1px;
background:linear-gradient(90deg,var(--color-copper),transparent);
}
.section-title{
font-family:var(--font-display);
font-size:clamp(2rem,4vw,3.2rem);
font-weight:400;line-height:1.15;
color:var(--color-cream);
}
.section-title em{
font-style:italic;
color:var(--color-copper-light);
}
/* Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s var(--ease-out-expo),transform 0.8s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
/* Projects */
.projects{background:var(--color-bg);overflow:hidden}
.projects-header{
text-align:center;
margin-bottom:clamp(3rem,6vw,5rem);
}
.projects-header .section-title{margin:0 auto}
.projects-subtitle{
max-width:560px;margin:1.5rem auto 0;
font-size:0.95rem;line-height:1.7;
color:var(--color-text-muted);
}
.projects-grid{
display:grid;
grid-template-columns:1.2fr 0.8fr;
grid-template-rows:auto auto;
gap:1.5rem;
}
.project-card{
position:relative;
border-radius:20px;
overflow:hidden;
cursor:pointer;
}
.project-card:nth-child(1){grid-row:1/3}
.project-card-image{
width:100%;height:100%;min-height:400px;
object-fit:cover;
transition:transform 0.8s var(--ease-out-expo);
}
.project-card:hover .project-card-image{transform:scale(1.05)}
/* Alpha mask overlay */
.project-card-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(15,15,14,0.9) 0%,rgba(15,15,14,0.1) 50%,rgba(15,15,14,0.2) 100%);
transition:background 0.5s;
}
.project-card:hover .project-card-overlay{
background:linear-gradient(to top,rgba(15,15,14,0.95) 0%,rgba(15,15,14,0.05) 40%,rgba(15,15,14,0.1) 100%);
}
.project-card-content{
position:absolute;bottom:0;left:0;right:0;
padding:clamp(1.5rem,3vw,2.5rem);
z-index:1;
}
.project-card-tags{
display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;
}
.project-card-tag{
padding:0.3rem 0.75rem;
font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
border:1px solid rgba(193,127,89,0.25);
border-radius:100px;
color:var(--color-copper-light);
background:rgba(193,127,89,0.06);
}
.project-card h3{
font-family:var(--font-display);
font-size:clamp(1.3rem,2.5vw,1.8rem);
font-weight:500;
color:var(--color-cream);
margin-bottom:0.5rem;
}
.project-card p{
font-size:0.85rem;line-height:1.6;
color:var(--color-text-muted);
max-width:400px;
}
.project-card-arrow{
position:absolute;top:1.5rem;right:1.5rem;
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:rgba(193,127,89,0.1);
border:1px solid rgba(193,127,89,0.2);
color:var(--color-copper-light);
font-size:1.2rem;
opacity:0;transform:translate(-10px,10px);
transition:all 0.5s var(--ease-out-expo);
}
.project-card:hover .project-card-arrow{
opacity:1;transform:translate(0,0);
}
/* Stagger variant: clip curtain reveal (projects) */
.stagger-clip > *{
opacity:0;transform:translateY(30px) scale(0.97);
transition:opacity 0.8s var(--ease-out-expo),transform 1.1s var(--ease-out-expo);
}
.stagger-clip.visible > *:nth-child(1){transition-delay:0s}
.stagger-clip.visible > *:nth-child(2){transition-delay:0.15s}
.stagger-clip.visible > *:nth-child(3){transition-delay:0.3s}
.stagger-clip.visible > *{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:1024px){
.projects-grid{grid-template-columns:1fr;grid-template-rows:auto}
.project-card:nth-child(1){grid-row:auto}
.project-card-image{min-height:320px}
}
</style>
</head>
<body>
<section class="projects section" id="projects">
<div class="container">
<div class="projects-header reveal">
<div class="section-label" style="justify-content:center">Featured Work</div>
<h2 class="section-title">Selected <em>projects</em></h2>
<p class="projects-subtitle">A curated selection of our most impactful work — each one a testament to the belief that architecture can heal, inspire, and sustain.</p>
</div>
<div class="projects-grid stagger-clip">
<div class="project-card reveal-child">
<img class="project-card-image" src="https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=900&q=80&auto=format" alt="Canopy House - Modern residence with expansive glass walls surrounded by forest" loading="lazy">
<div class="project-card-overlay"></div>
<div class="project-card-content">
<div class="project-card-tags">
<span class="project-card-tag">Residential</span>
<span class="project-card-tag">Net-Zero</span>
</div>
<h3>The Canopy House</h3>
<p>A 4,200 sq ft residence nestled in Pacific Northwest forest. Cross-laminated timber structure with living roof and geothermal heating.</p>
</div>
<div class="project-card-arrow">
<span class="iconify" data-icon="solar:arrow-right-up-linear"></span>
</div>
</div>
<div class="project-card reveal-child">
<img class="project-card-image" src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=900&q=80&auto=format" alt="Terracotta pavilion with rammed earth walls and natural courtyard" loading="lazy">
<div class="project-card-overlay"></div>
<div class="project-card-content">
<div class="project-card-tags">
<span class="project-card-tag">Cultural</span>
<span class="project-card-tag">Rammed Earth</span>
</div>
<h3>Earth Pavilion</h3>
<p>A community arts center built with rammed earth walls sourced from the construction site itself.</p>
</div>
<div class="project-card-arrow">
<span class="iconify" data-icon="solar:arrow-right-up-linear"></span>
</div>
</div>
<div class="project-card reveal-child">
<img class="project-card-image" src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=900&q=80&auto=format" alt="Modern sustainable office building with vertical gardens" loading="lazy">
<div class="project-card-overlay"></div>
<div class="project-card-content">
<div class="project-card-tags">
<span class="project-card-tag">Commercial</span>
<span class="project-card-tag">LEED Platinum</span>
</div>
<h3>Verde Tower</h3>
<p>A 12-story office complex achieving LEED Platinum with integrated vertical gardens on every floor.</p>
</div>
<div class="project-card-arrow">
<span class="iconify" data-icon="solar:arrow-right-up-linear"></span>
</div>
</div>
</div>
</div>
</section>
<script>
const reveals = document.querySelectorAll('.reveal,.stagger-clip');
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(el => obs.observe(el));
</script>
</body>
</html>