Skip to content

Instantly share code, notes, and snippets.

@JeanMeijer

JeanMeijer/main.html

Created November 13, 2025 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JeanMeijer/7b9ec524cd980214dfb1d44ca3e3d0aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JeanMeijer/7b9ec524cd980214dfb1d44ca3e3d0aa to your computer and use it in GitHub Desktop.
Download ZIP
Example Gemini 3.0 generation
Raw
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HEDEN | Museum for Modern Art</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<!-- Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<!-- Google Fonts: Inter and Space Mono -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'dutch-orange': '#FF4800',
'off-white': '#F4F4F0',
'deep-black': '#0A0A0A',
'concrete': '#D4D4D4'
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['Space Mono', 'monospace'],
},
spacing: {
'128': '32rem',
}
}
}
}
</script>
<style>
body {
background-color: #F4F4F0;
color: #0A0A0A;
overflow-x: hidden;
cursor: none; /* Custom cursor */
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Custom Cursor */
.cursor-dot,
.cursor-outline {
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 9999;
pointer-events: none;
}
.cursor-dot {
width: 8px;
height: 8px;
background-color: #FF4800;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 1px solid #0A0A0A;
transition: width 0.2s, height 0.2s;
}
/* Typography Utilities */
.stroke-text {
-webkit-text-stroke: 1px #0A0A0A;
color: transparent;
}
.hover-image-scale {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .hover-image-scale {
transform: scale(1.05);
}
/* Hide Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #F4F4F0;
}
::-webkit-scrollbar-thumb {
background: #0A0A0A;
}
/* Loader */
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0A0A0A;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
color: #FF4800;
}
.marquee-container {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
</head>
<body class="antialiased">
<!-- Custom Cursor -->
<div class="cursor-dot hidden md:block"></div>
<div class="cursor-outline hidden md:block"></div>
<!-- Loader -->
<div class="loader">
<h1 class="font-mono text-4xl md:text-6xl font-bold tracking-tighter">HEDEN</h1>
</div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 px-6 py-6 flex justify-between items-center mix-blend-difference text-white">
<a href="#" class="font-mono font-bold text-xl tracking-tighter z-50 relative">HEDEN</a>
<div class="flex items-center gap-6">
<button onclick="toggleMenu()" class="font-mono text-sm uppercase hover:text-dutch-orange transition-colors z-50 relative group">
<span class="group-hover:hidden">Menu</span>
<span class="hidden group-hover:inline">Open</span>
</button>
<button onclick="openTickets()" class="hidden md:block bg-white text-black px-5 py-2 rounded-full font-mono text-xs uppercase font-bold hover:bg-dutch-orange hover:text-white transition-colors duration-300 z-50 relative">
Get Tickets
</button>
</div>
</nav>
<!-- Full Screen Menu Overlay -->
<div id="menu-overlay" class="fixed inset-0 bg-deep-black text-off-white z-40 transform translate-y-full transition-transform duration-700 ease-in-out flex flex-col justify-center items-center">
<ul class="space-y-4 text-center">
<li class="overflow-hidden"><a href="#exhibitions" onclick="toggleMenu()" class="menu-link block text-5xl md:text-8xl font-black uppercase tracking-tighter hover:text-dutch-orange transition-colors transform translate-y-full">Exhibitions</a></li>
<li class="overflow-hidden"><a href="#collection" onclick="toggleMenu()" class="menu-link block text-5xl md:text-8xl font-black uppercase tracking-tighter hover:text-dutch-orange transition-colors transform translate-y-full">Collection</a></li>
<li class="overflow-hidden"><a href="#visit" onclick="toggleMenu()" class="menu-link block text-5xl md:text-8xl font-black uppercase tracking-tighter hover:text-dutch-orange transition-colors transform translate-y-full">Visit</a></li>
<li class="overflow-hidden"><a href="#about" onclick="toggleMenu()" class="menu-link block text-5xl md:text-8xl font-black uppercase tracking-tighter hover:text-dutch-orange transition-colors transform translate-y-full">About</a></li>
</ul>
<div class="mt-12 font-mono text-sm text-gray-500 flex gap-8">
<a href="#" class="hover:text-white">INSTAGRAM</a>
<a href="#" class="hover:text-white">FACEBOOK</a>
<a href="#" class="hover:text-white">NEWSLETTER</a>
</div>
</div>
<!-- Ticket Modal -->
<div id="ticket-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex justify-center items-center opacity-0 transition-opacity duration-300">
<div class="bg-off-white text-deep-black p-8 max-w-md w-full mx-4 relative shadow-2xl border-l-8 border-dutch-orange">
<button onclick="closeTickets()" class="absolute top-4 right-4 text-2xl">&times;</button>
<h2 class="font-black text-3xl uppercase tracking-tighter mb-2">Plan Your Visit</h2>
<p class="font-mono text-sm text-gray-600 mb-6">Select your preferred access pass.</p>
<div class="space-y-4">
<div class="border border-black p-4 flex justify-between items-center hover:bg-black hover:text-white cursor-pointer transition-colors group">
<div>
<h3 class="font-bold uppercase">Adult</h3>
<p class="font-mono text-xs opacity-60">Full Access</p>
</div>
<span class="font-mono text-lg">€22.50</span>
</div>
<div class="border border-black p-4 flex justify-between items-center hover:bg-black hover:text-white cursor-pointer transition-colors group">
<div>
<h3 class="font-bold uppercase">Student</h3>
<p class="font-mono text-xs opacity-60">With valid ID</p>
</div>
<span class="font-mono text-lg">€10.00</span>
</div>
<div class="border border-black p-4 flex justify-between items-center hover:bg-black hover:text-white cursor-pointer transition-colors group">
<div>
<h3 class="font-bold uppercase">Museumkaart</h3>
<p class="font-mono text-xs opacity-60">Annual Pass</p>
</div>
<span class="font-mono text-lg">Free</span>
</div>
</div>
<button class="w-full bg-dutch-orange text-white mt-6 py-4 font-mono font-bold uppercase hover:bg-black transition-colors">
Proceed to Checkout
</button>
</div>
</div>
<!-- Hero Section -->
<header class="relative min-h-screen flex flex-col justify-between px-6 py-6 pt-32 border-b border-black/10">
<!-- Background Texture/Image hint -->
<div class="absolute right-0 top-0 w-1/3 h-full bg-concrete opacity-10 -z-10 hidden md:block"></div>
<div class="max-w-7xl w-full mx-auto">
<div class="overflow-hidden">
<p class="hero-sub font-mono text-dutch-orange mb-4 animate-reveal">EST. 2024 — AMSTERDAM</p>
</div>
<h1 class="text-[12vw] leading-[0.85] font-black uppercase tracking-tighter mb-6 text-deep-black">
<div class="overflow-hidden"><span class="hero-line block transform translate-y-full">Dutch</span></div>
<div class="overflow-hidden"><span class="hero-line block transform translate-y-full">Modern</span></div>
<div class="overflow-hidden"><span class="hero-line block transform translate-y-full text-dutch-orange">Design</span></div>
</h1>
</div>
<div class="max-w-7xl w-full mx-auto flex flex-col md:flex-row justify-between items-end pb-12">
<div class="max-w-md mb-8 md:mb-0">
<p class="font-sans text-lg md:text-xl leading-relaxed">
HEDEN collects, preserves, and presents modern and contemporary art and design. We are a space for the now.
</p>
</div>
<div class="flex gap-4 items-center">
<div class="w-16 h-16 rounded-full border border-black flex items-center justify-center animate-spin-slow">
<i class="ph ph-arrow-down text-2xl"></i>
</div>
<span class="font-mono text-xs uppercase">Scroll</span>
</div>
</div>
</header>
<!-- Marquee -->
<div class="bg-deep-black text-off-white py-4 border-y border-white/10 overflow-hidden">
<div class="marquee-container">
<div class="marquee-content font-mono text-sm md:text-base uppercase tracking-widest">
Open daily 10:00 - 18:00 — Fridays until 21:00 — located at Museumplein, Amsterdam — Art for the future —
Open daily 10:00 - 18:00 — Fridays until 21:00 — located at Museumplein, Amsterdam — Art for the future —
</div>
</div>
</div>
<!-- Current Exhibitions -->
<section id="exhibitions" class="px-6 py-24 max-w-[1600px] mx-auto">
<div class="flex justify-between items-end mb-16 border-b-2 border-black pb-4">
<h2 class="text-6xl md:text-8xl font-black uppercase tracking-tighter">On View</h2>
<span class="font-mono hidden md:block">01 — 03</span>
</div>
<!-- Exhibition 1 -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-24 group cursor-pointer">
<div class="md:col-span-5 flex flex-col justify-between order-2 md:order-1">
<div>
<span class="font-mono text-dutch-orange mb-2 block">NOW — UNTIL AUG 15</span>
<h3 class="text-4xl md:text-6xl font-bold uppercase leading-none mb-6 group-hover:text-dutch-orange transition-colors">Structured Chaos</h3>
<p class="text-gray-600 text-lg max-w-md mb-6">
A retrospective of Neo-Plasticism in the digital age. Exploring how De Stijl principles influence modern UI/UX and architectural metaverse concepts.
</p>
</div>
<button class="self-start border-b border-black pb-1 font-mono uppercase text-sm hover:text-dutch-orange hover:border-dutch-orange transition-colors">Details</button>
</div>
<div class="md:col-span-7 order-1 md:order-2 overflow-hidden relative aspect-[4/3] bg-gray-200">
<!-- Fallback for image loading -->
<img src="https://images.unsplash.com/photo-1561214115-f2f134cc4912?q=80&w=2018&auto=format&fit=crop" alt="Abstract Art" class="w-full h-full object-cover hover-image-scale grayscale group-hover:grayscale-0 transition-all duration-700">
</div>
</div>
<!-- Exhibition 2 -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-24 group cursor-pointer">
<div class="md:col-span-7 overflow-hidden relative aspect-[4/3] bg-gray-200">
<img src="https://images.unsplash.com/photo-1518640467707-6811f4a6ab73?q=80&w=2080&auto=format&fit=crop" alt="Modern Lighting" class="w-full h-full object-cover hover-image-scale grayscale group-hover:grayscale-0 transition-all duration-700">
</div>
<div class="md:col-span-5 flex flex-col justify-between pl-0 md:pl-12">
<div>
<span class="font-mono text-dutch-orange mb-2 block">NEXT — SEP 01</span>
<h3 class="text-4xl md:text-6xl font-bold uppercase leading-none mb-6 group-hover:text-dutch-orange transition-colors">Light & Void</h3>
<p class="text-gray-600 text-lg max-w-md mb-6">
Minimalist light installations challenging our perception of space. Featuring works by upcoming Dutch light artists.
</p>
</div>
<button class="self-start border-b border-black pb-1 font-mono uppercase text-sm hover:text-dutch-orange hover:border-dutch-orange transition-colors">Details</button>
</div>
</div>
</section>
<!-- Collection Grid -->
<section id="collection" class="bg-deep-black text-off-white px-6 py-24">
<div class="max-w-[1600px] mx-auto">
<div class="mb-16">
<h2 class="text-6xl md:text-8xl font-black uppercase tracking-tighter text-white">The Collection</h2>
<p class="font-mono text-gray-400 mt-4 max-w-xl">Our permanent collection houses over 4,000 works of industrial design, graphic design, and visual arts from 1900 to today.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Item 1 -->
<div class="group relative aspect-square overflow-hidden bg-neutral-900 border border-white/10">
<img src="https://images.unsplash.com/photo-1580130601275-c553985b6fa1?q=80&w=1974&auto=format&fit=crop" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" alt="Chair Design">
<div class="absolute bottom-0 left-0 w-full p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 bg-black/50 backdrop-blur-sm">
<p class="font-bold uppercase">Rietveld Series</p>
<p class="font-mono text-xs text-dutch-orange">1924</p>
</div>
</div>
<!-- Item 2 -->
<div class="group relative aspect-square overflow-hidden bg-neutral-900 border border-white/10 md:mt-12">
<img src="https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=1974&auto=format&fit=crop" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" alt="Typography">
<div class="absolute bottom-0 left-0 w-full p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 bg-black/50 backdrop-blur-sm">
<p class="font-bold uppercase">Total Design</p>
<p class="font-mono text-xs text-dutch-orange">1968</p>
</div>
</div>
<!-- Item 3 -->
<div class="group relative aspect-square overflow-hidden bg-neutral-900 border border-white/10">
<img src="https://images.unsplash.com/photo-1515405295579-ba7b45403062?q=80&w=2080&auto=format&fit=crop" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" alt="Ceramics">
<div class="absolute bottom-0 left-0 w-full p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 bg-black/50 backdrop-blur-sm">
<p class="font-bold uppercase">Dutch Porcelain</p>
<p class="font-mono text-xs text-dutch-orange">1995</p>
</div>
</div>
</div>
<div class="text-center mt-16">
<a href="#" class="inline-block border border-white px-8 py-4 font-mono uppercase hover:bg-white hover:text-black transition-colors duration-300">Browse Archive</a>
</div>
</div>
</section>
<!-- Visit Info -->
<section id="visit" class="px-6 py-24 bg-dutch-orange text-deep-black">
<div class="max-w-[1600px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h2 class="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-8">Visit<br>Heden</h2>
</div>
<div class="font-mono text-lg space-y-8">
<div class="border-b border-black/20 pb-6">
<h4 class="font-bold mb-2">LOCATION</h4>
<p>Museumplein 10<br>1071 DJ Amsterdam<br>The Netherlands</p>
</div>
<div class="border-b border-black/20 pb-6">
<h4 class="font-bold mb-2">HOURS</h4>
<p>Mon - Thu: 10:00 — 18:00</p>
<p>Fri: 10:00 — 21:00</p>
<p>Sat - Sun: 10:00 — 18:00</p>
</div>
<div>
<h4 class="font-bold mb-2">CONTACT</h4>
<p class="underline cursor-pointer">[email protected]</p>
<p>+31 (0) 20 123 4567</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-off-white px-6 py-12 border-t border-black">
<div class="max-w-[1600px] mx-auto flex flex-col md:flex-row justify-between items-end">
<div class="mb-8 md:mb-0">
<h2 class="font-black text-9xl uppercase tracking-tighter opacity-10 select-none">Heden</h2>
</div>
<div class="flex gap-6 font-mono text-xs uppercase">
<a href="#" class="hover:text-dutch-orange">Privacy</a>
<a href="#" class="hover:text-dutch-orange">Terms</a>
<a href="#" class="hover:text-dutch-orange">Colophon</a>
<span>© 2025 HEDEN MUSEUM</span>
</div>
</div>
</footer>
<script>
// Register ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
// Custom Cursor Logic
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
window.addEventListener('mousemove', (e) => {
const posX = e.clientX;
const posY = e.clientY;
// Dot follows immediately
cursorDot.style.left = `${posX}px`;
cursorDot.style.top = `${posY}px`;
// Outline follows with delay/animation
cursorOutline.animate({
left: `${posX}px`,
top: `${posY}px`
}, { duration: 500, fill: "forwards" });
});
// Add hover effect to cursor for links
const interactiveElements = document.querySelectorAll('a, button, .cursor-pointer');
interactiveElements.forEach(el => {
el.addEventListener('mouseenter', () => {
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
cursorOutline.style.borderColor = '#FF4800';
});
el.addEventListener('mouseleave', () => {
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
cursorOutline.style.borderColor = '#0A0A0A';
});
});
// Loading Animation
window.addEventListener('load', () => {
const tl = gsap.timeline();
tl.to('.loader', {
yPercent: -100,
duration: 1.2,
ease: 'power4.inOut',
delay: 0.5
})
.from('.hero-line', {
yPercent: 100,
duration: 1,
stagger: 0.1,
ease: 'power4.out'
}, "-=0.5")
.from('.hero-sub', {
opacity: 0,
duration: 1
}, "-=0.5");
});
// Menu Toggle
let isMenuOpen = false;
const menuOverlay = document.getElementById('menu-overlay');
const menuLinks = document.querySelectorAll('.menu-link');
function toggleMenu() {
isMenuOpen = !isMenuOpen;
if (isMenuOpen) {
menuOverlay.classList.remove('translate-y-full');
gsap.to(menuLinks, {
yPercent: -100,
duration: 0.8,
stagger: 0.1,
ease: 'power4.out',
delay: 0.2
});
} else {
menuOverlay.classList.add('translate-y-full');
gsap.to(menuLinks, {
yPercent: 0,
duration: 0.5
});
}
}
// Ticket Modal
const ticketModal = document.getElementById('ticket-modal');
function openTickets() {
ticketModal.classList.remove('hidden');
// Slight delay to allow display:block to apply before opacity transition
setTimeout(() => {
ticketModal.classList.remove('opacity-0');
}, 10);
}
function closeTickets() {
ticketModal.classList.add('opacity-0');
setTimeout(() => {
ticketModal.classList.add('hidden');
}, 300);
}
// Scroll Animations
gsap.utils.toArray('section').forEach(section => {
gsap.from(section.querySelectorAll('h2, h3, p, img'), {
scrollTrigger: {
trigger: section,
start: "top 80%",
toggleActions: "play none none reverse"
},
y: 50,
opacity: 0,
duration: 1,
stagger: 0.1,
ease: "power3.out"
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment