Blog Layout

📋 Project Overzicht

Maak een blog-achtige website met meerdere artikelen en een professionele layout. Dit project oefent CSS Flexbox/Grid layouts en responsive design.

✅ Vereisten

Pagina's (2 verplicht)

1. Home/Blog Lijst - Toont meerdere blog posts
2. Enkele Post - Individuele artikel pagina

Home Pagina Structuur

• Header met blog naam en navigatie
• Uitgelichte post (groter, gemarkeerd)
• Posts grid (3-6 recente artikelen)
• Sidebar met categorieën
• Footer

Post Pagina Structuur

• Artikel titel, datum, auteur
• Artikel content met koppen
• Terug naar home link

Technische Vereisten

• Extern CSS bestand
• CSS Grid of Flexbox voor layouts
• Responsive design (mobielvriendelijk)
• Navigatie werkt op alle pagina's
• Hover effecten op posts

📁 Bestandsstructuur

project-02-blog/
├── index.html
├── post.html
├── css/
│   └── style.css
└── images/
    └── (placeholder afbeeldingen)

💡 Blog Kaart Component

<article class="post-card">
    <img src="afbeelding.jpg" alt="Post afbeelding" class="post-image">
    <div class="post-content">
        <span class="category">Technologie</span>
        <h3><a href="post.html">Blog Post Titel</a></h3>
        <p class="excerpt">Korte samenvatting van de post...</p>
        <div class="post-meta">
            <span class="author">Jan Jansen</span>
            <span class="date">15 jan 2024</span>
        </div>
    </div>
</article>

.post-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.category {
    background: #3498db;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

📱 Responsive Grid Layout

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Op mobiel, stapel alles */
@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}

🎯 Voorbeeld Layout

Ga Verder met Leren