diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..5e1e1c9 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,38 @@ +# Git +.git +.gitignore +.gitattributes + +# Documentation +README.md +*.md + +# IDE +.vscode +.idea +*.swp +*.swo +*~ + +# Build artifacts +backend/main +*.exe + +# Logs +*.log + +# OS files +.DS_Store +Thumbs.db + +# Node modules (if any) +node_modules + +# Test files +*_test.go + +# Bruno API client +backend/API-Projet-CAL + +# Makefile +Makefile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..af3e3fd --- /dev/null +++ b/Dockerfile @@ -0,0 +1,46 @@ +# Multi-stage build for optimized image size +FROM golang:1.23-alpine AS backend-builder + +# Install build dependencies +RUN apk add --no-cache git + +# Set working directory for backend +WORKDIR /app/backend + +# Copy go mod files +COPY backend/go.mod backend/go.sum ./ + +# Download dependencies +RUN go mod download + +# Copy backend source code +COPY backend/ ./ + +# Build the application +RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main . + +# Final stage - minimal image +FROM alpine:latest + +# Install ca-certificates for HTTPS requests +RUN apk --no-cache add ca-certificates tzdata + +# Set timezone (adjust as needed) +ENV TZ=Europe/Paris + +WORKDIR /app + +# Copy the built binary from builder +COPY --from=backend-builder /app/backend/main . + +# Copy frontend files +COPY frontend/ ./frontend/ + +# Copy backend data file +COPY backend/date_link.txt ./ + +# Expose port +EXPOSE 8080 + +# Run the application +CMD ["./main"] diff --git a/backend/.env.example b/backend/.env.example new file mode 100644 index 0000000..2734d84 --- /dev/null +++ b/backend/.env.example @@ -0,0 +1 @@ +FILE_NAME=date_link.txt diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..9b101c5 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,17 @@ +version: "3.8" + +services: + calendrier-avent: + build: + context: . + dockerfile: Dockerfile + container_name: calendrier-avent-isen + ports: + - "8080:8080" + environment: + - FILE_NAME=date_link.txt + - GIN_MODE=release + volumes: + # Mount date_link.txt so you can update it without rebuilding + - ./backend/date_link.txt:/app/date_link.txt:ro + restart: unless-stopped diff --git a/frontend/index.html b/frontend/index.html index f215b2b..cd1cd17 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,19 +1,44 @@ + Calendrier de l'Avent - + + -
+
-

Calendrier de l'Avent 2024

+

Calendrier de l'Avent 2025

5
17
@@ -40,8 +65,11 @@
16
21
-

Site réalisé par Appen pour le BDE de l’ISEN Nantes

+
- + + \ No newline at end of file diff --git a/frontend/static/assets/bg-winter.png b/frontend/static/assets/bg-winter.png deleted file mode 100644 index d80bc58..0000000 Binary files a/frontend/static/assets/bg-winter.png and /dev/null differ diff --git a/frontend/static/style.css b/frontend/static/style.css index fe6f8c0..6dd2ed9 100644 --- a/frontend/static/style.css +++ b/frontend/static/style.css @@ -1,178 +1,871 @@ +/* =========================== + VARIABLES & RESET + =========================== */ +:root { + --primary-bg: #0a1628; + --secondary-bg: #1a2742; + --accent-red: #c41e3a; + --accent-gold: #d4af37; + --accent-white: #f8f9fa; + --text-light: #ffffff; + --shadow-color: rgba(0, 0, 0, 0.3); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - margin: 0; - padding: 0; - font-family: 'Quicksand', sans-serif; - background: linear-gradient(to bottom, #005f73, #0a9396); - color: #fff; + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; + background: linear-gradient(135deg, #0a1628 0%, #1a2742 50%, #2d3e5f 100%); + color: var(--text-light); + min-height: 100vh; + overflow-x: hidden; + position: relative; } +/* =========================== + SNOWFLAKES ANIMATION + =========================== */ +.snowflakes { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + overflow: hidden; +} + +.snowflake { + position: absolute; + top: -10%; + color: var(--accent-white); + font-size: 1.5em; + opacity: 0.8; + animation: fall linear infinite; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); +} + +.snowflake:nth-child(1) { + left: 10%; + animation-duration: 12s; + animation-delay: 0s; + font-size: 1.2em; +} +.snowflake:nth-child(2) { + left: 20%; + animation-duration: 15s; + animation-delay: 2s; + font-size: 1.8em; +} +.snowflake:nth-child(3) { + left: 30%; + animation-duration: 10s; + animation-delay: 4s; + font-size: 1em; +} +.snowflake:nth-child(4) { + left: 40%; + animation-duration: 13s; + animation-delay: 1s; + font-size: 1.5em; +} +.snowflake:nth-child(5) { + left: 50%; + animation-duration: 11s; + animation-delay: 3s; + font-size: 1.3em; +} +.snowflake:nth-child(6) { + left: 60%; + animation-duration: 14s; + animation-delay: 5s; + font-size: 1.6em; +} +.snowflake:nth-child(7) { + left: 70%; + animation-duration: 12s; + animation-delay: 2s; + font-size: 1.1em; +} +.snowflake:nth-child(8) { + left: 80%; + animation-duration: 16s; + animation-delay: 4s; + font-size: 1.4em; +} +.snowflake:nth-child(9) { + left: 90%; + animation-duration: 13s; + animation-delay: 0s; + font-size: 1.7em; +} +.snowflake:nth-child(10) { + left: 15%; + animation-duration: 11s; + animation-delay: 3s; + font-size: 1.2em; +} + +@keyframes fall { + 0% { + top: -10%; + transform: translateX(0) rotate(0deg); + } + 100% { + top: 110%; + transform: translateX(50px) rotate(360deg); + } +} + +/* =========================== + MAIN CONTAINER + =========================== */ .background { - position: relative; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - flex-direction: column; -} - -h1,h2 { - font-family: "Jim Nightshade", cursive; - font-weight: 400; - font-style: normal; - margin: 0; - text-align: center; - color: black; - position: relative; /* Assurez-vous que le titre est positionné relativement */ - z-index: 1; /* Placez le titre au-dessus de l'arrière-plan flou */ + position: relative; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 40px 20px; + z-index: 2; + gap: 30px; } +/* =========================== + TYPOGRAPHY + =========================== */ h1 { - font-size: 5em; + font-family: "Playfair Display", serif; + font-weight: 900; + font-size: clamp(2.5rem, 6vw, 5rem); + text-align: center; + background: linear-gradient( + 135deg, + var(--accent-gold) 0%, + var(--accent-white) 50%, + var(--accent-gold) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-shadow: 0 4px 20px rgba(212, 175, 55, 0.5); + margin-bottom: 20px; + letter-spacing: 2px; + animation: shimmer 3s ease-in-out infinite; } -.background-blur { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: url('assets/bg-winter.png') no-repeat center center; - background-size: cover; - filter: blur(5px); - z-index: -1; +@keyframes shimmer { + 0%, + 100% { + filter: brightness(1); + } + 50% { + filter: brightness(1.3); + } } +/* =========================== + CALENDAR GRID + =========================== */ .grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-auto-rows: 100px; - gap: 5px; - padding: 10px; - max-width: 700px; - width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + gap: 10px; + padding: 15px; + max-width: 600px; + width: 100%; + perspective: 1000px; } -/* Style des boîtes */ +/* =========================== + CALENDAR BOXES + =========================== */ .box { - background: linear-gradient(145deg, #e63946, #f4a261); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3); - border-radius: 10px; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - font-family: 'Great Vibes', cursive; - font-size: 20px; - font-weight: bold; - transition: transform 0.2s, box-shadow 0.2s; - position: relative; + background: linear-gradient( + 135deg, + rgba(196, 30, 58, 0.9) 0%, + rgba(139, 0, 0, 0.9) 100% + ); + backdrop-filter: blur(10px); + border: 2px solid rgba(212, 175, 55, 0.4); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 2px 8px rgba(255, 255, 255, 0.2), + 0 0 20px rgba(212, 175, 55, 0.3); + border-radius: 16px; + color: var(--text-light); + display: flex; + justify-content: center; + align-items: center; + font-family: "Playfair Display", serif; + font-size: 2.5rem; + font-weight: 700; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + position: relative; + cursor: pointer; + overflow: hidden; +} + +.box::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent + ); + transition: left 0.6s; +} + +.box:hover::before { + left: 100%; +} + +.box::after { + content: "🎁"; + position: absolute; + top: 8px; + right: 8px; + font-size: 1rem; + opacity: 0.6; } -/* Animation au survol */ .box:hover { - transform: scale(1.05); - box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.4); - cursor: pointer; + transform: translateY(-8px) scale(1.05) rotateZ(2deg); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), + inset 0 4px 12px rgba(255, 255, 255, 0.3), + 0 0 40px rgba(212, 175, 55, 0.6); + border-color: var(--accent-gold); } -/* Dispositions variées */ -.box-1 { grid-column: 1 / span 1; grid-row: 1 / span 1; } -.box-2 { grid-column: 2 / span 1; grid-row: 1 / span 2; } -.box-3 { grid-column: 3 / span 2; grid-row: 1 / span 1; } -.box-4 { grid-column: 5 / span 2; grid-row: 1 / span 1; } -.box-5 { grid-column: 1 / span 1; grid-row: 2 / span 1; } -.box-6 { grid-column: 4 / span 1; grid-row: 2 / span 1; } -.box-7 { grid-column: 6 / span 1; grid-row: 2 / span 1; } -.box-8 { grid-column: 1 / span 2; grid-row: 3 / span 1; } -.box-9 { grid-column: 3 / span 1; grid-row: 2 / span 2; } -.box-10 { grid-column: 4 / span 1; grid-row: 3 / span 2; } -.box-11 { grid-column: 5 / span 1; grid-row: 2 / span 2; } -.box-12 { grid-column: 6 / span 1; grid-row: 3 / span 2; } -.box-13 { grid-column: 1 / span 1; grid-row: 4 / span 1; } -.box-14 { grid-column: 2 / span 2; grid-row: 4 / span 1; } -.box-15 { grid-column: 5 / span 1; grid-row: 4 / span 1; } -.box-16 { grid-column: 1 / span 2; grid-row: 5 / span 1; } -.box-17 { grid-column: 3 / span 1; grid-row: 5 / span 1; } -.box-18 { grid-column: 4 / span 1; grid-row: 5 / span 1; } -.box-19 { grid-column: 5 / span 2; grid-row: 5 / span 1; } -.box-20 { grid-column: 1 / span 1; grid-row: 6 / span 1; } -.box-21 { grid-column: 2 / span 1; grid-row: 6 / span 1; } -.box-22 { grid-column: 3 / span 2; grid-row: 6 / span 1; } -.box-23 { grid-column: 5 / span 1; grid-row: 6 / span 1; } -.box-24 { grid-column: 6 / span 1; grid-row: 6 / span 1; } +/* Grid positioning - Mobile-first asymmetric layout */ +.box-1 { + grid-column: 1 / span 1; + grid-row: 1 / span 1; +} +.box-2 { + grid-column: 2 / span 1; + grid-row: 1 / span 1; +} +.box-3 { + grid-column: 3 / span 2; + grid-row: 1 / span 1; +} +.box-4 { + grid-column: 1 / span 1; + grid-row: 2 / span 1; +} +.box-5 { + grid-column: 2 / span 1; + grid-row: 2 / span 2; +} +.box-6 { + grid-column: 3 / span 1; + grid-row: 2 / span 1; +} +.box-7 { + grid-column: 4 / span 1; + grid-row: 2 / span 1; +} +.box-8 { + grid-column: 1 / span 1; + grid-row: 3 / span 1; +} +.box-9 { + grid-column: 3 / span 2; + grid-row: 3 / span 1; +} +.box-10 { + grid-column: 1 / span 2; + grid-row: 4 / span 1; +} +.box-11 { + grid-column: 3 / span 1; + grid-row: 4 / span 1; +} +.box-12 { + grid-column: 4 / span 1; + grid-row: 4 / span 2; +} +.box-13 { + grid-column: 1 / span 1; + grid-row: 5 / span 1; +} +.box-14 { + grid-column: 2 / span 1; + grid-row: 5 / span 1; +} +.box-15 { + grid-column: 3 / span 1; + grid-row: 5 / span 1; +} +.box-16 { + grid-column: 1 / span 1; + grid-row: 6 / span 1; +} +.box-17 { + grid-column: 2 / span 1; + grid-row: 6 / span 1; +} +.box-18 { + grid-column: 3 / span 1; + grid-row: 6 / span 1; +} +.box-19 { + grid-column: 4 / span 1; + grid-row: 6 / span 1; +} +.box-20 { + grid-column: 1 / span 1; + grid-row: 7 / span 1; +} +.box-21 { + grid-column: 2 / span 1; + grid-row: 7 / span 1; +} +.box-22 { + grid-column: 3 / span 1; + grid-row: 7 / span 1; +} +.box-23 { + grid-column: 4 / span 1; + grid-row: 7 / span 1; +} +.box-24 { + grid-column: 1 / span 4; + grid-row: 8 / span 2; + font-size: 3.5rem; +} -/* Styles pour la modale */ +/* =========================== + MODAL STYLES + =========================== */ .modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(10, 22, 40, 0.9); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + animation: fadeIn 0.3s ease; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .modal-content { - background-color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - width: 80%; - max-width: 400px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + background: linear-gradient( + 135deg, + rgba(26, 39, 66, 0.95) 0%, + rgba(45, 62, 95, 0.95) 100% + ); + backdrop-filter: blur(20px); + padding: 40px 30px; + border-radius: 24px; + text-align: center; + position: relative; + width: 90%; + max-width: 500px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), + inset 0 2px 10px rgba(255, 255, 255, 0.1), + 0 0 40px rgba(212, 175, 55, 0.2); + border: 2px solid rgba(212, 175, 55, 0.3); + animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes scaleIn { + from { + transform: scale(0.8); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } } .modal-content .close { - position: absolute; - top: 10px; - right: 10px; - font-size: 1.5rem; - cursor: pointer; + position: absolute; + top: 15px; + right: 20px; + font-size: 2rem; + cursor: pointer; + color: var(--accent-gold); + transition: all 0.3s; + font-weight: 300; + line-height: 1; +} + +.modal-content .close:hover { + color: var(--text-light); + transform: rotate(90deg); } .modal-content h2 { - margin: 0 0 10px; - font-size: 1.5rem; - color: #333; + margin: 0 0 20px; + font-family: "Playfair Display", serif; + font-size: 1.8rem; + color: var(--accent-gold); + font-weight: 700; } .modal-content p { - font-size: 1rem; - color: #555; + font-size: 1.1rem; + color: var(--accent-white); + line-height: 1.6; + font-weight: 300; } .modal-content a { - color: #007bff; - text-decoration: none; - font-weight: bold; + color: var(--accent-gold); + text-decoration: none; + font-weight: 600; + transition: all 0.3s; + border-bottom: 2px solid transparent; } -/* Media query pour les écrans de petite taille */ +.modal-content a:hover { + color: var(--text-light); + border-bottom-color: var(--accent-gold); +} + +/* =========================== + FOOTER + =========================== */ +.footer { + margin-top: 30px; + text-align: center; +} + +.footer p { + font-family: "Poppins", sans-serif; + font-size: 1rem; + color: var(--accent-white); + font-weight: 300; + letter-spacing: 0.5px; +} + +.footer .highlight { + color: var(--accent-gold); + font-weight: 600; +} + +/* =========================== + RESPONSIVE DESIGN + =========================== */ + +/* Tablettes et petits écrans */ +@media (max-width: 900px) { + .grid { + max-width: 550px; + grid-auto-rows: 95px; + gap: 10px; + } + + .box { + font-size: 2.2rem; + } +} + +/* Smartphones en mode paysage et tablettes portrait */ @media (max-width: 768px) { - .background { - overflow-y: auto; /* Permettre le défilement vertical */ - } + .background { + padding: 30px 15px; + gap: 25px; + } - .grid { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 10px; /* Ajustez l'espacement entre les éléments si nécessaire */ - } + h1 { + font-size: clamp(1.8rem, 5vw, 2.5rem); + margin-bottom: 15px; + } - .box { - flex: 1 1 100px; /* Ajustez la taille des boîtes pour qu'elles s'adaptent à l'écran */ - max-width: 100px; /* Assurez-vous que les boîtes ne dépassent pas 100px de largeur */ - height: 100px; /* Assurez-vous que les boîtes gardent une hauteur de 100px */ - } + .grid { + max-width: 100%; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 85px; + gap: 8px; + padding: 10px; + } - h1 { - margin-top: 7em; - } -} \ No newline at end of file + .box { + font-size: 2rem; + border-radius: 14px; + } + + .box::after { + font-size: 0.9rem; + top: 6px; + right: 6px; + } + + .modal-content { + padding: 35px 25px; + max-width: 90%; + border-radius: 20px; + } + + .modal-content h2 { + font-size: 1.5rem; + } + + .modal-content p { + font-size: 1rem; + } + + .footer { + margin-top: 20px; + } + + .footer p { + font-size: 0.9rem; + padding: 0 15px; + } + + .snowflake { + font-size: 1.2em; + } +} + +/* Smartphones portrait - optimisation principale */ +@media (max-width: 480px) { + body { + font-size: 14px; + } + + .background { + padding: 20px 10px; + gap: 20px; + } + + h1 { + font-size: clamp(1.5rem, 6vw, 2rem); + letter-spacing: 1px; + margin-bottom: 10px; + } + + .grid { + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 80px; + gap: 8px; + padding: 8px; + max-width: 100%; + } + + /* Nouvelle disposition pour grille 3 colonnes sur mobile */ + .box-1 { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + } + .box-2 { + grid-column: 2 / span 1; + grid-row: 1 / span 1; + } + .box-3 { + grid-column: 3 / span 1; + grid-row: 1 / span 2; + } + .box-4 { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + } + .box-5 { + grid-column: 2 / span 1; + grid-row: 2 / span 1; + } + .box-6 { + grid-column: 1 / span 2; + grid-row: 3 / span 1; + } + .box-7 { + grid-column: 3 / span 1; + grid-row: 3 / span 1; + } + .box-8 { + grid-column: 1 / span 1; + grid-row: 4 / span 1; + } + .box-9 { + grid-column: 2 / span 1; + grid-row: 4 / span 2; + } + .box-10 { + grid-column: 3 / span 1; + grid-row: 4 / span 1; + } + .box-11 { + grid-column: 1 / span 1; + grid-row: 5 / span 1; + } + .box-12 { + grid-column: 3 / span 1; + grid-row: 5 / span 1; + } + .box-13 { + grid-column: 1 / span 1; + grid-row: 6 / span 1; + } + .box-14 { + grid-column: 2 / span 2; + grid-row: 6 / span 1; + } + .box-15 { + grid-column: 1 / span 1; + grid-row: 7 / span 1; + } + .box-16 { + grid-column: 2 / span 1; + grid-row: 7 / span 1; + } + .box-17 { + grid-column: 3 / span 1; + grid-row: 7 / span 1; + } + .box-18 { + grid-column: 1 / span 1; + grid-row: 8 / span 1; + } + .box-19 { + grid-column: 2 / span 1; + grid-row: 8 / span 1; + } + .box-20 { + grid-column: 3 / span 1; + grid-row: 8 / span 1; + } + .box-21 { + grid-column: 1 / span 1; + grid-row: 9 / span 1; + } + .box-22 { + grid-column: 2 / span 1; + grid-row: 9 / span 1; + } + .box-23 { + grid-column: 3 / span 1; + grid-row: 9 / span 1; + } + .box-24 { + grid-column: 1 / span 3; + grid-row: 10 / span 1; + font-size: 2.5rem; + } + + .box { + font-size: 1.8rem; + border-radius: 12px; + border-width: 1.5px; + } + + .box::after { + font-size: 0.75rem; + top: 4px; + right: 4px; + } + + .box:hover { + transform: translateY(-4px) scale(1.03); + } + + .modal-content { + padding: 25px 20px; + max-width: 92%; + border-radius: 18px; + } + + .modal-content .close { + font-size: 1.5rem; + top: 12px; + right: 15px; + } + + .modal-content h2 { + font-size: 1.3rem; + margin-bottom: 15px; + } + + .modal-content p { + font-size: 0.95rem; + line-height: 1.5; + } + + .footer { + margin-top: 15px; + } + + .footer p { + font-size: 0.8rem; + padding: 0 10px; + line-height: 1.4; + } + + .snowflake { + font-size: 1em; + } +} + +/* Très petits écrans */ +@media (max-width: 360px) { + .grid { + grid-auto-rows: 70px; + gap: 6px; + padding: 6px; + } + + .box { + font-size: 1.6rem; + border-radius: 10px; + } + + h1 { + font-size: 1.3rem; + } + + .modal-content p { + font-size: 0.9rem; + } + + .footer p { + font-size: 0.75rem; + } +} + +/* Écrans larges (desktop) */ +@media (min-width: 1200px) { + .grid { + max-width: 1000px; + grid-template-columns: repeat(6, 1fr); + grid-auto-rows: 110px; + gap: 15px; + } + + /* Disposition optimisée pour grands écrans - pas de ligne vide */ + .box-1 { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + } + .box-2 { + grid-column: 2 / span 1; + grid-row: 1 / span 1; + } + .box-3 { + grid-column: 3 / span 2; + grid-row: 1 / span 1; + } + .box-4 { + grid-column: 5 / span 1; + grid-row: 1 / span 1; + } + .box-5 { + grid-column: 6 / span 1; + grid-row: 1 / span 2; + } + .box-6 { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + } + .box-7 { + grid-column: 2 / span 1; + grid-row: 2 / span 1; + } + .box-8 { + grid-column: 3 / span 1; + grid-row: 2 / span 1; + } + .box-9 { + grid-column: 4 / span 1; + grid-row: 2 / span 1; + } + .box-10 { + grid-column: 5 / span 1; + grid-row: 2 / span 1; + } + .box-11 { + grid-column: 1 / span 2; + grid-row: 3 / span 1; + } + .box-12 { + grid-column: 3 / span 1; + grid-row: 3 / span 2; + } + .box-13 { + grid-column: 4 / span 1; + grid-row: 3 / span 1; + } + .box-14 { + grid-column: 5 / span 2; + grid-row: 3 / span 1; + } + .box-15 { + grid-column: 1 / span 1; + grid-row: 4 / span 1; + } + .box-16 { + grid-column: 2 / span 1; + grid-row: 4 / span 1; + } + .box-17 { + grid-column: 4 / span 1; + grid-row: 4 / span 1; + } + .box-18 { + grid-column: 5 / span 1; + grid-row: 4 / span 1; + } + .box-19 { + grid-column: 6 / span 1; + grid-row: 4 / span 1; + } + .box-20 { + grid-column: 1 / span 1; + grid-row: 5 / span 1; + } + .box-21 { + grid-column: 2 / span 1; + grid-row: 5 / span 1; + } + .box-22 { + grid-column: 3 / span 1; + grid-row: 5 / span 1; + } + .box-23 { + grid-column: 4 / span 1; + grid-row: 5 / span 1; + } + .box-24 { + grid-column: 5 / span 2; + grid-row: 5 / span 1; + font-size: 4.5rem; + } + + .box { + font-size: 2.8rem; + } + + h1 { + font-size: 5rem; + } +}