Modèle HTML CSS Fortnight Planner

27 K2314350

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 October 2025

Code HTML de l'animation CSS Eye Loader

19 January 2026

Code source HTML du jeu Little Alchemy 2

24 August 2025

Exemple de formulaire d'inscription HTML simple

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fortnight Planner</title>
    <style>
        :root {
            --primary: #4a90e2;
            --bg: #f4f7f6;
            --text: #333;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 90%;
        }
        h1 {
            text-align: center;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
        }
        .day-box {
            aspect-ratio: 1 / 1;
            border: 2px solid #eee;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            cursor: pointer;
        }
        .day-box:hover {
            border-color: var(--primary);
            background-color: #f0f7ff;
        }
        .day-number {
            font-weight: bold;
            font-size: 1.2rem;
        }
        .week-label {
            grid-column: span 7;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #888;
            margin: 10px 0 5px 0;
            border-bottom: 1px solid #eee;
        }
        .status {
            font-size: 0.7rem;
            margin-top: 4px;
            color: #999;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Fortnight Schedule</h1>
    <div class="grid">
        <div class="week-label">Week 1</div>
        <div class="day-box"><span class="day-number">1</span><span class="status">Mon</span></div>
        <div class="day-box"><span class="day-number">2</span><span class="status">Tue</span></div>
        <div class="day-box"><span class="day-number">3</span><span class="status">Wed</span></div>
        <div class="day-box"><span class="day-number">4</span><span class="status">Thu</span></div>
        <div class="day-box"><span class="day-number">5</span><span class="status">Fri</span></div>
        <div class="day-box" style="background: #fafafa;"><span class="day-number">6</span><span class="status">Sat</span></div>
        <div class="day-box" style="background: #fafafa;"><span class="day-number">7</span><span class="status">Sun</span></div>

</body>
</html>

CSS