All Prompts
All Prompts
featuresectionanimatedresponsivelandingscrollcss
Animated Philosophy Section with Image and Icons
Анимированная секция для студии/бренда с изображением, заголовком, цитатой и иконками. Адаптивный дизайн, CSS-анимация при скролле.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VERD Studio - Philosophy</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;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);
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center
}
img {
display: block;
max-width: 100%
}
:root {
--color-bg: #0F0F0E;
--color-bg-elevated: #1A1917;
--color-surface: #2C2B27;
--color-copper: #C17F59;
--color-copper-light: #D4A07A;
--color-copper-bright: #E8B894;
--color-gold: #C9A96E;
--color-gold-light: #DFC08A;
--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-clip-left {
opacity: 0;
transform: translateX(-60px) scale(0.97);
transition: opacity 1.1s var(--ease-out-expo), transform 1.2s var(--ease-out-expo)
}
.reveal-clip-left.visible {
opacity: 1;
transform: translateX(0) scale(1)
}
.reveal-slide-right {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo)
}
.reveal-slide-right.visible {
opacity: 1;
transform: translateX(0)
}
.reveal-delay-1 {
transition-delay: 0.1s
}
.reveal-delay-2 {
transition-delay: 0.2s
}
.reveal-delay-3 {
transition-delay: 0.3s
}
.reveal-delay-4 {
transition-delay: 0.4s
}
.philosophy {
background: var(--color-bg)
}
.philosophy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: center
}
.philosophy-image {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4/5
}
.philosophy-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out-expo)
}
.philosophy-image:hover img {
transform: scale(1.04)
}
.philosophy-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
pointer-events: none
}
.philosophy-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: 16px;
padding: 1px;
background: linear-gradient(160deg, rgba(193, 127, 89, 0.4), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.philosophy-text {
max-width: 520px
}
.philosophy-quote {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-weight: 400;
line-height: 1.5;
color: var(--color-cream);
margin: 2rem 0;
font-style: italic
}
.philosophy-quote span {
background: linear-gradient(135deg, var(--color-copper-light), var(--color-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-style: normal;
font-weight: 500
}
.philosophy-desc {
font-size: 0.95rem;
line-height: 1.8;
color: var(--color-text-muted)
}
.philosophy-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2.5rem
}
.philosophy-feature {
display: flex;
align-items: flex-start;
gap: 1rem
}
.philosophy-feature-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(193, 127, 89, 0.1);
border: 1px solid rgba(193, 127, 89, 0.15);
color: var(--color-copper-light);
font-size: 1.1rem
}
.philosophy-feature-text h4 {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-cream);
margin-bottom: 0.25rem
}
.philosophy-feature-text p {
font-size: 0.82rem;
line-height: 1.6;
color: var(--color-text-muted)
}
@media(max-width:768px) {
.philosophy-grid {
grid-template-columns: 1fr;
gap: 2.5rem
}
.philosophy-image {
aspect-ratio: 16/10
}
}
</style>
</head>
<body>
<section class="philosophy section">
<div class="container">
<div class="philosophy-grid">
<div class="philosophy-image reveal-clip-left">
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&q=80&auto=format" alt="Sustainable building with living green wall" loading="lazy">
</div>
<div class="philosophy-text">
<div class="section-label reveal-slide-right">Our Philosophy</div>
<h2 class="section-title reveal-slide-right reveal-delay-1">Architecture as <em>living dialogue</em></h2>
<p class="philosophy-quote reveal-slide-right reveal-delay-2">"The best buildings are not monuments to ego,
but <span>quiet conversations</span> between place, purpose, and the passage of time."</p>
<p class="philosophy-desc reveal-slide-right reveal-delay-3">At VERD, we believe every structure should give
back more than it takes. Our biophilic approach integrates passive heating, natural ventilation, living
walls, and locally-sourced materials into designs that feel timeless rather than trendy.</p>
<div class="philosophy-features reveal-slide-right reveal-delay-4">
<div class="philosophy-feature">
<div class="philosophy-feature-icon"><span class="iconify" data-icon="solar:leaf-bold"></span></div>
<div class="philosophy-feature-text">
<h4>Net-Zero Commitment</h4>
<p>Every project targets net-zero carbon over its lifetime through passive design and renewable
integration.</p>
</div>
</div>
<div class="philosophy-feature">
<div class="philosophy-feature-icon"><span class="iconify" data-icon="solar:pallete-2-bold"></span></div>
<div class="philosophy-feature-text">
<h4>Material Honesty</h4>
<p>We celebrate raw materials — timber, stone, rammed earth — letting their natural character define the
aesthetic.</p>
</div>
</div>
<div class="philosophy-feature">
<div class="philosophy-feature-icon"><span class="iconify" data-icon="solar:compass-big-bold"></span>
</div>
<div class="philosophy-feature-text">
<h4>Contextual Design</h4>
<p>Every site has a story. We listen to the landscape, climate, and culture before drawing a single
line.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
const reveals=document.querySelectorAll('.reveal-clip-left,.reveal-slide-right');
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>