Webleb - Code-Snippets

HTML CSS JS

<!DOCTYPE html>

<head>

<title>ARCH | Aether Architectural Showcase</title>

<style>

/* --- Core Visual System --- */

:root {

--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

--glass-border: rgba(255, 255, 255, 0.1);

--glass-bg: rgba(20, 20, 20, 0.6);

--accent-gold: #D4AF37;

}

body {

background-color: #0a0a0a;

color: #e5e5e5;

font-family: 'Space Grotesk', sans-serif;

overflow: hidden; /* Prevent scroll, purely app-like */

height: 100vh;

width: 100vw;

margin: 0;

}

/* --- Typography Classes --- */

.font-serif { font-family: 'Cormorant Garamond', serif; }

.font-sans { font-family: 'Space Grotesk', sans-serif; }

/* --- Accordion Architecture --- */

.gallery-container {

display: flex;

height: 100%;

width: 100%;

overflow: hidden;

flex-direction: column; /* Mobile Default: Vertical Stack */

}

@media (min-width: 1024px) {

.gallery-container {

flex-direction: row; /* Desktop: Horizontal Strip */

}

.panel {

position: relative;

flex: 1; /* Collapsed state */

background-size: cover;

background-position: center;

background-repeat: no-repeat;

cursor: pointer;

transition: flex 1.2s var(--ease-out-expo), filter 0.5s ease;

overflow: hidden;

display: flex;

flex-direction: column;

justify-content: flex-end;

border-bottom: 1px solid rgba(255,255,255,0.05);

}

@media (min-width: 1024px) {

.panel {

border-bottom: none;

border-right: 1px solid rgba(255,255,255,0.05);

height: 100%;

}

/* Active State logic */

.panel.active {

flex: 8; /* Expanded state */

}

.panel:not(.active) {

filter: grayscale(100%) brightness(0.6);

}

.panel:not(.active):hover {

filter: grayscale(0%) brightness(0.8);

}

/* --- Panel Content Layers --- */

.panel-overlay {

position: absolute;

inset: 0;

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.95) 100%);

z-index: 1;

transition: opacity 0.5s ease;

}

.panel-content {

position: relative;

z-index: 10;

padding: 1.5rem;

width: 100%;

opacity: 0;

transform: translateY(20px);

transition: all 0.6s var(--ease-out-expo);

transition-delay: 0.1s;

display: flex;

flex-direction: column;

gap: 1rem;

}

.panel.active .panel-content {

opacity: 1;

transform: translateY(0);

}

/* Collapsed Header (Visible when inactive) */

.panel-header-collapsed {

position: absolute;

z-index: 5;

top: 1.5rem;

left: 1.5rem;

opacity: 1;

transition: opacity 0.5s ease;

}

@media (min-width: 1024px) {

.panel-header-collapsed {

/* Rotate text for vertical tabs on desktop */

writing-mode: vertical-rl;

transform: rotate(180deg);

top: auto;

bottom: 2rem;

left: 50%;

transform-origin: center;

margin-left: -10px;

white-space: nowrap;

}

.panel.active .panel-header-collapsed {

opacity: 0;

pointer-events: none;

}

/* --- Glassmorphism Cards --- */

.glass-card {

background: var(--glass-bg);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border: 1px solid var(--glass-border);

border-radius: 4px;

}

/* --- Architectural Detail Styling --- */

.metrics-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 0.5rem;

margin-top: 1rem;

border-top: 1px solid rgba(255,255,255,0.1);

padding-top: 1rem;

}

.metric-item {

display: flex;

flex-direction: column;

gap: 0.2rem;

}

.material-palette {

display: flex;

gap: -10px;

}

.material-circle {

width: 24px;

height: 24px;

border-radius: 50%;

border: 1px solid rgba(255,255,255,0.3);

box-shadow: 0 2px 5px rgba(0,0,0,0.5);

margin-right: -8px;

position: relative;

z-index: 1;

}

/* --- Animations --- */

.reveal-text {

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}

/* Scrollbar hide for content area if it overflows */

.scroll-content {

max-height: 0;

overflow: hidden;

transition: max-height 1s ease;

}

.panel.active .scroll-content {

max-height: 40vh; /* Allow scroll on mobile if content is long */

overflow-y: auto;

}

@media (min-width: 1024px) {

.panel.active .scroll-content {

max-height: 300px;

}

/* Custom Scrollbar */

::-webkit-scrollbar { width: 4px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

</style>

</head>

<body>

<div class="panel active"

style="background-image: url('https://images.unsplash.com/photo-1486744360430-65c8dc299ce0?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">01 / The Monolith</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Reykjavík, Iceland</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">The Monolith</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Bjarke Ingels Group</h3>

A brutalist civic structure rising from the volcanic basalt. The Monolith reinterprets the stark Icelandic landscape through raw concrete and panoramic thermal glass. The structure acts as both a library and a geothermal energy hub, merging civic utility with geological reverence.

</p>

</div>

<span class="text-[10px] uppercase text-gray-500">Height</span>

</div>

<span class="text-[10px] uppercase text-gray-500">CO2 Offset</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

View Schematics <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">02 / Helix Museum</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Shanghai, China</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">Helix Museum</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Zaha Hadid Architects</h3>

Driven by algorithmic design, the Helix Museum features a continuous, seamless fluid envelope. The facade creates a kinetic illusion, responding to the flow of urban pedestrian traffic. A celebration of parametric complexity and structural fluidity.

</p>

<span class="text-[10px] uppercase text-gray-500">Polygons</span>

</div>

</div>

<span class="text-lg font-mono text-blue-400">Fluid</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Explore Algorithm <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1590353837240-8037df2ffd13?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">03 / The Canopy</h2>

</div>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">The Canopy</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Ibuku Studio</h3>

An experiment in extreme sustainability. Constructed entirely from locally sourced bamboo and recycled rammed earth. The architecture disappears into the jungle, providing a net-zero luxury retreat that breathes with the surrounding ecosystem.

</p>

<span class="text-[10px] uppercase text-gray-500">Bamboo</span>

<span class="text-lg font-mono">14<span class="text-xs">k Culms</span></span>

</div>

<span class="text-[10px] uppercase text-gray-500">Energy</span>

</div>

<span class="text-[10px] uppercase text-gray-500">H2O Reuse</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Sustainability Report <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">04 / Noir Residence</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Manhattan, NY</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">Noir Residence</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Foster + Partners</h3>

A hyper-luxury penthouse concept exploring the interplay of light and void. Characterized by stark monochromatic palettes, invisible joinery, and floor-to-ceiling smart glass that frames the skyline as living art.

</p>

<span class="text-[10px] uppercase text-gray-500">Floor</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Price/sqft</span>

</div>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Inquire Listing <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

const panels = document.querySelectorAll('.panel');

function activatePanel(clickedPanel) {

// If already active, do nothing (or optional: toggle detail view)

if (clickedPanel.classList.contains('active')) return;

// Remove active class from all

panels.forEach(panel => {

panel.classList.remove('active');

});

// Add active class to clicked

clickedPanel.classList.add('active');

}

// Initialize keyboard navigation

document.addEventListener('keydown', (e) => {

const current = document.querySelector('.panel.active');

const index = Array.from(panels).indexOf(current);

if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {

const next = panels[index + 1] || panels[0];

activatePanel(next);

} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {

const prev = panels[index - 1] || panels[panels.length - 1];

activatePanel(prev);

}

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>ARCH | Aether Architectural Showcase</title>

<style>

/* --- Core Visual System --- */

:root {

--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

--glass-border: rgba(255, 255, 255, 0.1);

--glass-bg: rgba(20, 20, 20, 0.6);

--accent-gold: #D4AF37;

}

body {

background-color: #0a0a0a;

color: #e5e5e5;

font-family: 'Space Grotesk', sans-serif;

overflow: hidden; /* Prevent scroll, purely app-like */

height: 100vh;

width: 100vw;

margin: 0;

}

/* --- Typography Classes --- */

.font-serif { font-family: 'Cormorant Garamond', serif; }

.font-sans { font-family: 'Space Grotesk', sans-serif; }

/* --- Accordion Architecture --- */

.gallery-container {

display: flex;

height: 100%;

width: 100%;

overflow: hidden;

flex-direction: column; /* Mobile Default: Vertical Stack */

}

@media (min-width: 1024px) {

.gallery-container {

flex-direction: row; /* Desktop: Horizontal Strip */

}

.panel {

position: relative;

flex: 1; /* Collapsed state */

background-size: cover;

background-position: center;

background-repeat: no-repeat;

cursor: pointer;

transition: flex 1.2s var(--ease-out-expo), filter 0.5s ease;

overflow: hidden;

display: flex;

flex-direction: column;

justify-content: flex-end;

border-bottom: 1px solid rgba(255,255,255,0.05);

}

@media (min-width: 1024px) {

.panel {

border-bottom: none;

border-right: 1px solid rgba(255,255,255,0.05);

height: 100%;

}

/* Active State logic */

.panel.active {

flex: 8; /* Expanded state */

}

.panel:not(.active) {

filter: grayscale(100%) brightness(0.6);

}

.panel:not(.active):hover {

filter: grayscale(0%) brightness(0.8);

}

/* --- Panel Content Layers --- */

.panel-overlay {

position: absolute;

inset: 0;

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.95) 100%);

z-index: 1;

transition: opacity 0.5s ease;

}

.panel-content {

position: relative;

z-index: 10;

padding: 1.5rem;

width: 100%;

opacity: 0;

transform: translateY(20px);

transition: all 0.6s var(--ease-out-expo);

transition-delay: 0.1s;

display: flex;

flex-direction: column;

gap: 1rem;

}

.panel.active .panel-content {

opacity: 1;

transform: translateY(0);

}

/* Collapsed Header (Visible when inactive) */

.panel-header-collapsed {

position: absolute;

z-index: 5;

top: 1.5rem;

left: 1.5rem;

opacity: 1;

transition: opacity 0.5s ease;

}

@media (min-width: 1024px) {

.panel-header-collapsed {

/* Rotate text for vertical tabs on desktop */

writing-mode: vertical-rl;

transform: rotate(180deg);

top: auto;

bottom: 2rem;

left: 50%;

transform-origin: center;

margin-left: -10px;

white-space: nowrap;

}

.panel.active .panel-header-collapsed {

opacity: 0;

pointer-events: none;

}

/* --- Glassmorphism Cards --- */

.glass-card {

background: var(--glass-bg);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border: 1px solid var(--glass-border);

border-radius: 4px;

}

/* --- Architectural Detail Styling --- */

.metrics-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 0.5rem;

margin-top: 1rem;

border-top: 1px solid rgba(255,255,255,0.1);

padding-top: 1rem;

}

.metric-item {

display: flex;

flex-direction: column;

gap: 0.2rem;

}

.material-palette {

display: flex;

gap: -10px;

}

.material-circle {

width: 24px;

height: 24px;

border-radius: 50%;

border: 1px solid rgba(255,255,255,0.3);

box-shadow: 0 2px 5px rgba(0,0,0,0.5);

margin-right: -8px;

position: relative;

z-index: 1;

}

/* --- Animations --- */

.reveal-text {

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}

/* Scrollbar hide for content area if it overflows */

.scroll-content {

max-height: 0;

overflow: hidden;

transition: max-height 1s ease;

}

.panel.active .scroll-content {

max-height: 40vh; /* Allow scroll on mobile if content is long */

overflow-y: auto;

}

@media (min-width: 1024px) {

.panel.active .scroll-content {

max-height: 300px;

}

/* Custom Scrollbar */

::-webkit-scrollbar { width: 4px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

</style>

</head>

<body>

<div class="panel active"

style="background-image: url('https://images.unsplash.com/photo-1486744360430-65c8dc299ce0?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">01 / The Monolith</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Reykjavík, Iceland</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">The Monolith</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Bjarke Ingels Group</h3>

</p>

</div>

<span class="text-[10px] uppercase text-gray-500">Height</span>

</div>

<span class="text-[10px] uppercase text-gray-500">CO2 Offset</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

View Schematics <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">02 / Helix Museum</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Shanghai, China</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">Helix Museum</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Zaha Hadid Architects</h3>

</p>

<span class="text-[10px] uppercase text-gray-500">Polygons</span>

</div>

</div>

<span class="text-lg font-mono text-blue-400">Fluid</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Explore Algorithm <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1590353837240-8037df2ffd13?q=80&w=2070&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">03 / The Canopy</h2>

</div>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">The Canopy</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Ibuku Studio</h3>

</p>

<span class="text-[10px] uppercase text-gray-500">Bamboo</span>

<span class="text-lg font-mono">14<span class="text-xs">k Culms</span></span>

</div>

<span class="text-[10px] uppercase text-gray-500">Energy</span>

</div>

<span class="text-[10px] uppercase text-gray-500">H2O Reuse</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Sustainability Report <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

<div class="panel"

style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop');"

onclick="activatePanel(this)">

<h2 class="text-xl tracking-widest uppercase font-bold text-gray-400">04 / Noir Residence</h2>

</div>

<span class="text-xs font-bold tracking-[0.2em] text-gray-400 uppercase">Manhattan, NY</span>

</div>

<h1 class="text-4xl md:text-6xl font-serif italic leading-none mb-1 text-white">Noir Residence</h1>

<h3 class="text-sm font-sans tracking-widest uppercase text-gray-400 mb-6">Foster + Partners</h3>

</p>

<span class="text-[10px] uppercase text-gray-500">Floor</span>

</div>

<span class="text-[10px] uppercase text-gray-500">Price/sqft</span>

</div>

</div>

<span class="text-[10px] uppercase text-gray-500">Materiality</span>

</div>

Inquire Listing <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>

</button>

</div>

const panels = document.querySelectorAll('.panel');

function activatePanel(clickedPanel) {

// If already active, do nothing (or optional: toggle detail view)

if (clickedPanel.classList.contains('active')) return;

// Remove active class from all

panels.forEach(panel => {

panel.classList.remove('active');

});

// Add active class to clicked

clickedPanel.classList.add('active');

}

// Initialize keyboard navigation

document.addEventListener('keydown', (e) => {

const current = document.querySelector('.panel.active');

const index = Array.from(panels).indexOf(current);

if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {

const next = panels[index + 1] || panels[0];

activatePanel(next);

} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {

const prev = panels[index - 1] || panels[panels.length - 1];

activatePanel(prev);

}

});

</script>

</body>

</html>

Preview

Validating your code, please wait...