De Nieuwe Esthetiek van het Web: Trends die Uw Site Transformeren

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moderne Webdesign App</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Inline Custom Styles (Minimalisme & Motion) -->
<style>
/* Standaard Lichte Modus Styling */
body {
transition: background-color 0.4s ease, color 0.4s ease; /* Zachte overgang voor motion */
background-color: #f8f9fa; /* Zeer licht grijs (Whitespace) */
color: #212529; /* Donkere tekst */
}
/* Dark Mode Styling */
body.dark-mode {
background-color: #1a1a2e; /* Diep donkerblauw/paars */
color: #f0f0ff; /* Licht, bijna wit */
}
/* Card styling voor visuele impact */
.card {
border: none;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Subtiele hover effecten */
}
.card:hover {
transform: translateY(-5px); /* Card 'zweemt' subtiel op */
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; /* Verhoogde schaduw bij hover */
}
/* Dark Mode aanpassing voor cards */
body.dark-mode .card {
background-color: #2c2c4e; /* Donkerdere achtergrond voor de kaart zelf */
box-shadow: 0 5px 15px rgba(44, 44, 78, 0.4) !important;
}
/* Dark Mode aanpassing voor knoppen/links binnen cards */
body.dark-mode .btn-outline-primary {
color: #a9c2ff; /* Lichtblauwe tekst op de donkere card */
border-color: #6d8cd5;
}
body.dark-mode .btn-outline-primary:hover {
background-color: #6d8cd5;
color: white !important;
}
</style>
</head>
<body>
<div class="container py-5">
<!-- Header en Toggle -->
<header class="text-center mb-5">
<h1>✨ Moderne Design App</h1>
<p class="lead text-muted">Een showcase van minimalisme, fluïditeit en micro-interacties.</p>
<button id="darkModeToggle" class="btn btn-primary btn-lg shadow-sm mt-3">🌙 Schakel naar Donkere Modus</button>
</header>
<!-- De Card Grid Sectie (Adaptive Layout) -->
<div class="row g-4">
<!-- Kolom 1: Op mobiel 12, op tablet/desktop 6/3 -->
<div class="col-md-6 col-xl-3">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<h5>Product A</h5>
<p class="text-muted small">Minimalistisch design in actie.</p>
<a href="#" class="btn btn-outline-primary btn-sm mt-2">Bekijk</a>
</div>
</div>
</div>
<!-- Kolom 2 -->
<div class="col-md-6 col-xl-3">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<h5>Dienst B</h5>
<p class="text-muted small">Fluïde en responsief.</p>
<a href="#" class="btn btn-outline-primary btn-sm mt-2">Lezen</a>
</div>
</div>
</div>
<!-- Kolom 3 -->
<div class="col-md-6 col-xl-3">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<h5>Case Study C</h5>
<p class="text-muted small">Storytelling door scroll.</p>
<a href="#" class="btn btn-outline-primary btn-sm mt-2">Meer info</a>
</div>
</div>
</div>
<!-- Kolom 4 -->
<div class="col-md-6 col-xl-3">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<h5>Innovatie D</h5>
<p class="text-muted small">De toekomst van de UI.</p>
<a href="#" class="btn btn-outline-primary btn-sm mt-2">Ontdekken</a>
</div>
</div>
</div>
</div>
</div>
<!-- Inline JavaScript (Micro-interactie) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('darkModeToggle');
const body = document.body;
// Initial check: Controleer of dark mode al is ingesteld via lokale opslag
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-mode');
toggleButton.textContent = '☀️ Schakel naar Lichte Modus';
} else {
// Zorg ervoor dat de knop correct is gelabeld in lichte modus
toggleButton.textContent = '🌙 Schakel naar Donkere Modus';
}
// Event listener voor de klik op de toggle-knop
toggleButton.addEventListener('click', function() {
body.classList.toggle('dark-mode');
// Sla de voorkeur van de gebruiker op
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
this.textContent = '☀️ Schakel naar Lichte Modus';
} else {
localStorage.setItem('theme', 'light');
this.textContent = '🌙 Schakel naar Donkere Modus';
}
});
});
</script>
<!-- Bootstrap JS Bundle (voor eventuele extra functionaliteit) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>