Initial commit: Portfolio Aya Ben Mabrouk

2025-12-12 01:26:44 +01:00
commit a19b8ee75b
11 changed files with 787 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="c9fb54f2-bf4d-42a7-867b-ebcad9281633" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/Dockerfile" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/assets/cms.preview.jpg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/portfolio.iml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 7
+}</component>
+  <component name="ProjectId" id="36e4ozg1hRHvlJhv8Y5NUATXvf1" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "git-widget-placeholder": "main",
+    "kotlin-language-version-configured": "true",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-jdk-9823dce3aa75-bf35d07a577b-intellij.indexing.shared.core-IU-252.26830.84" />
+        <option value="bundled-js-predefined-d6986cc7102b-3aa1da707db6-JavaScript-IU-252.26830.84" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="c9fb54f2-bf4d-42a7-867b-ebcad9281633" name="Changes" comment="" />
+      <created>1765353883129</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1765353883129</updated>
+      <workItem from="1765353884119" duration="13778000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
--- a/8
+++ b/8
@@ -0,0 +1,8 @@
+# Utiliser une image de base d'un serveur web léger
+FROM nginx:stable-alpine
+
+# Copier tout le contenu du répertoire courant (.) dans le répertoire de service de Nginx
+COPY . /usr/share/nginx/html 
+
+# Exposer le port par défaut du serveur web (80)
+EXPOSE 80
--- a/README.md
+++ b/README.md
--- a/assets/README.md
+++ b/assets/README.md
@@ -0,0 +1,38 @@
+# 🌸 Portfolio – Aya Ben Mabrouk
+
+Bienvenue sur mon portfolio !  
+Je suis **Aya Ben Mabrouk**, étudiante en **2ème année de BTS CIEL (Cybersécurité, Informatique et Électronique)**.  
+Ce site présente mes compétences, mes projets ainsi que mon expérience professionnelle, notamment mon stage en clinique.
+
+---
+
+## 🚀 Technologies utilisées
+
+- **HTML5 / CSS3 / JavaScript**
+- **Docker & Docker Compose**
+- **Devicon (icônes professionnelles)**
+- **Organisation de projet propre en architecture `/src`**
+
+---
+
+## 🐳 Lancer le projet avec Docker
+
+Assurez-vous d’avoir Docker installé, puis exécutez :
+
+cd ~/Documents/portfolio
+
+Lien :  http://localhost:8080
+```bash
+./init.sh
+
+.
+├── docker-compose.yml
+├── Dockerfile
+├── init.sh
+└── src/
+    ├── index.html
+    ├── style.css
+    ├── script.js
+    └── assets/
+        └── portrait_aya.jpg
+        
--- a/assets/cms.preview.jpg
+++ b/assets/cms.preview.jpg
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,7 @@
+services:
+  portfolio:
+    build: .
+    ports:
+      - "8080:80"
+    container_name: portfolio
+    restart: unless-stopped
--- a/index.html
+++ b/index.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio - Aya Ben Mabrouk</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+<header class="main-header">
+    <div class="logo">
+        <span class="logo-abm">ABM</span>
+        <div class="logo-info">
+            <span>Aya Ben Mabrouk</span>
+            <span class="logo-subtitle">BTS CIEL — Développement & Réseaux</span>
+        </div>
+    </div>
+
+    <nav class="main-nav">
+        <a href="#about">À propos</a>
+        <a href="#skills">Compétences</a>
+        <a href="#projects">Projets</a>
+        <a href="#experience">Expériences</a>
+        <a href="#parcours">Parcours</a>
+        <a href="#contact">Contact</a>
+    </nav>
+</header>
+
+<main>
+
+    <!-- SECTION HERO -->
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Portfolio de Aya Ben Mabrouk</h1>
+            <p class="hero-description">
+                Étudiante en 2ème année de BTS CIEL — développement web, systèmes & réseaux.
+                Je conçois des solutions simples et élégantes, et j'aime résoudre des problèmes concrets.
+            </p>
+            <div class="hero-actions">
+                <a href="#projects" class="btn btn-project">Voir mes projets</a>
+                <a href="#contact" class="btn btn-contact">Me contacter</a>
+            </div>
+        </div>
+
+        <div class="hero-profile-card">
+            <div class="profile-placeholder">AB</div>
+        </div>
+    </section>
+
+    <!-- SECTION A PROPOS -->
+    <section id="about" class="about-section">
+        <div class="about-header">
+            <h2>À propos</h2>
+        </div>
+
+        <div class="about-details-grid">
+            <div class="about-bio">
+                <p>
+                    Je m'appelle Aya Ben Mabrouk. Actuellement en deuxième année de BTS CIEL,
+                    je m'intéresse au développement web, à l'administration système et réseau, et aux systèmes embarqués.
+                    J'apprécie les interfaces soignées et l'optimisation technique.
+                </p>
+                <p>
+                    Je suis organisée, curieuse et motivée. J'apprends continuellement et j'aime travailler sur des
+                    projets concrets et stimulants.
+                </p>
+
+                <div class="social-links">
+                    <a href="mailto:ayabmk13@gmail.com" target="_blank">
+                        <i class="devicon-google-plain colored"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/in/ayabmk13" target="_blank">
+                        <i class="devicon-linkedin-plain colored"></i>
+                    </a>
+                    <a href="https://github.com/Ayaabmk" target="_blank">
+                        <i class="devicon-github-original"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="about-keywords">
+                <p><strong>Langages :</strong> HTML, CSS, JavaScript, PHP, Python</p>
+                <p><strong>Réseaux :</strong> TCP/IP, VLAN, DHCP, Linux</p>
+                <p><strong>Outils :</strong> Git, Docker, MySQL</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION COMPETENCES -->
+    <section id="skills">
+        <h2>Compétences</h2>
+
+        <div class="skills-grid">
+            <div class="skill-card"><i class="devicon-html5-plain colored"></i><p>HTML</p></div>
+            <div class="skill-card"><i class="devicon-css3-plain colored"></i><p>CSS</p></div>
+            <div class="skill-card"><i class="devicon-javascript-plain colored"></i><p>JavaScript</p></div>
+            <div class="skill-card"><i class="devicon-php-plain colored"></i><p>PHP</p></div>
+            <div class="skill-card"><i class="devicon-mysql-plain colored"></i><p>MySQL</p></div>
+            <div class="skill-card"><i class="devicon-linux-plain colored"></i><p>Linux</p></div>
+            <div class="skill-card"><i class="devicon-docker-plain colored"></i><p>Docker</p></div>
+        </div>
+    </section>
+
+    <!-- SECTION PROJETS -->
+    <section id="projects">
+        <h2>Projets</h2>
+
+        <div class="project-card">
+            <h3>Mini CMS – Création d’un système de gestion de contenu</h3>
+
+            <img src="assets/cms.preview.jpg" alt="Aperçu du CMS" class="project-preview">
+
+            <p>
+                J’ai développé un mini CMS permettant de créer, modifier et supprimer du contenu.
+                Il intègre un système d’authentification, une interface administrateur moderne et une gestion dynamique des contenus.
+            </p>
+
+            <ul>
+                <li>PHP / MySQL</li>
+                <li>CRUD complet</li>
+                <li>Gestion des utilisateurs</li>
+                <li>Interface moderne</li>
+            </ul>
+
+            <div class="project-actions">
+                <a class="project-btn" target="_blank" href="https://github.com/Ayaabmk">
+                    Voir le code sur GitHub
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION EXPERIENCE -->
+    <section id="experience">
+        <h2>Mon expérience en entreprise</h2>
+
+        <div class="experience-card">
+            <h3>Stage – Support Informatique & Réseau<br>Clinique Privée</h3>
+            <p>
+                Dans un environnement réel en clinique, j'ai participé à la gestion du parc informatique :
+            </p>
+
+            <ul>
+                <li>Configuration de postes</li>
+                <li>Mise en réseau et gestion des accès</li>
+                <li>Installation d’imprimantes</li>
+                <li>Support utilisateurs quotidien</li>
+                <li>Gestion de droits sur des logiciels internes</li>
+            </ul>
+
+            <p>Ce stage m’a permis de renforcer mes compétences techniques et ma rigueur.</p>
+        </div>
+    </section>
+
+    <!-- SECTION PARCOURS -->
+    <section id="parcours" class="timeline-section">
+        <h2>Parcours</h2>
+
+        <div class="timeline">
+
+            <div class="timeline-item">
+                <span class="timeline-dot"></span>
+                <div class="timeline-content">
+                    <span class="timeline-date">2025 - 2026</span>
+                    <p>BTS CIEL — 2ᵉ année, développement & réseaux</p>
+                </div>
+            </div>
+
+            <div class="timeline-item">
+                <span class="timeline-dot"></span>
+                <div class="timeline-content">
+                    <span class="timeline-date">2024 - 2025</span>
+                    <p>BTS CIEL — 1ʳᵉ année, bases en programmation</p>
+                </div>
+
+                <div class="timeline-item">
+
+
+                    <span class="timeline-dot"></span>
+                    <div class="timeline-content">
+                        <span class="timeline-date">2024 - 2023</span>
+                        <p>Baccalauréat — Général - Mention Bien, Economique & social</p>
+
+                </div>
+
+
+        </div>
+    </section>
+
+    <!-- SECTION CONTACT -->
+    <section id="contact" class="contact-section">
+        <h2>Contact</h2>
+
+        <p class="contact-subtitle">
+            Une opportunité, une idée, une question ? Contacte-moi !
+        </p>
+
+        <div class="contact-links">
+            <a href="mailto:ayabmk13@gmail.com" class="contact-btn">
+                <i class="fas fa-envelope"></i> Email
+            </a>
+            <a href="https://www.linkedin.com/in/ayabmk13" target="_blank" class="contact-btn">
+                <i class="fab fa-linkedin"></i> LinkedIn
+            </a>
+        </div>
+    </section>
+
+</main>
+
+<footer>
+    <p>&copy; 2025 Aya Ben Mabrouk - Portfolio</p>
+</footer>
+
+<script src="script.js"></script>
+</body>
+</html>
--- a/portfolio.iml
+++ b/portfolio.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="GENERAL_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,80 @@
+// Smooth scroll pour les liens d'ancrage
+const links = document.querySelectorAll('a[href^="#"]');
+
+links.forEach(link => {
+    link.addEventListener('click', event => {
+        const targetId = link.getAttribute('href');
+        if (targetId.length > 1) {
+            event.preventDefault();
+            const target = document.querySelector(targetId);
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }
+    });
+});
+
+// Gestion du formulaire de contact
+const contactForm = document.getElementById('contactForm');
+const formFeedback = document.getElementById('formFeedback');
+
+if (contactForm) {
+    contactForm.addEventListener('submit', event => {
+        event.preventDefault();
+
+        const formData = new FormData(contactForm);
+        const name = formData.get('name').trim();
+        const email = formData.get('email').trim();
+        const message = formData.get('message').trim();
+
+        // Validation simple
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+        if (name && emailRegex.test(email) && message) {
+            formFeedback.textContent = `Merci ${name}, ton message a bien été reçu !`;
+            formFeedback.className = 'form__feedback success';
+            formFeedback.style.display = 'block';
+            contactForm.reset();
+
+            // Masquer le message après 5 secondes
+            setTimeout(() => {
+                formFeedback.style.display = 'none';
+            }, 5000);
+        } else {
+            formFeedback.textContent = 'Merci de remplir tous les champs avec des informations valides.';
+            formFeedback.className = 'form__feedback error';
+            formFeedback.style.display = 'block';
+        }
+    });
+}
+
+const currentYearElement = document.getElementById('currentYear');
+if (currentYearElement) {
+    currentYearElement.textContent = new Date().getFullYear();
+}
+
+// Animation au scroll (optionnel, pour un effet plus subtil)
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateY(0)';
+        }
+    });
+}, observerOptions);
+
+// Appliquer l'animation aux cartes
+document.querySelectorAll('.card, .timeline__item').forEach(el => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(20px)';
+    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+    observer.observe(el);
+});
--- a/style.css
+++ b/style.css
@@ -0,0 +1,348 @@
+/* ============================================
+   PORTFOLIO — AYA BEN MABROUK
+   Thème girly professionnel : rose poudré + blanc
+   ============================================ */
+
+:root {
+    --rose-light: #f8e9ef;
+    --rose: #e7c4cf;
+    --rose-gold: #d7a9a3;
+    --rose-dark: #b07d84;
+    --white: #ffffff;
+    --text: #3a3a3a;
+    --muted: #6b6b6b;
+
+    --radius: 16px;
+    --shadow: 0 8px 24px rgba(0,0,0,0.08);
+    --shadow-light: 0 4px 16px rgba(0,0,0,0.05);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+/* ============================================
+   GLOBAL
+   ============================================ */
+
+body {
+    background: var(--rose-light);
+    color: var(--text);
+    line-height: 1.6;
+}
+
+h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    color: var(--rose-dark);
+    font-weight: 700;
+}
+
+section {
+    padding: 4rem 8%;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.main-header {
+    background: linear-gradient(135deg, var(--rose), var(--rose-gold));
+    color: var(--white);
+    padding: 1.5rem 8%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: var(--shadow);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo-abm {
+    background: var(--white);
+    color: var(--rose-dark);
+    padding: 0.6rem 1rem;
+    border-radius: var(--radius);
+    font-size: 1.4rem;
+    font-weight: 700;
+}
+
+.logo-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.logo-subtitle {
+    font-size: 0.85rem;
+    opacity: 0.9;
+}
+
+.main-nav a {
+    color: var(--white);
+    text-decoration: none;
+    font-weight: 600;
+    margin-left: 1rem;
+    transition: 0.2s;
+}
+
+.main-nav a:hover {
+    opacity: 0.7;
+}
+
+/* ============================================
+   HERO SECTION
+   ============================================ */
+
+.hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 3rem;
+}
+
+.hero-content h1 {
+    font-size: 2.4rem;
+    color: var(--rose-dark);
+}
+
+.hero-description {
+    max-width: 500px;
+    color: var(--muted);
+    margin: 1rem 0;
+}
+
+.hero-actions {
+    margin-top: 1rem;
+    display: flex;
+    gap: 1rem;
+}
+
+.btn {
+    padding: 0.9rem 1.4rem;
+    border-radius: var(--radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-block;
+}
+
+.btn-project {
+    background: var(--rose-gold);
+    color: var(--white);
+}
+
+.btn-contact {
+    background: var(--white);
+    border: 2px solid var(--rose-gold);
+    color: var(--rose-dark);
+}
+
+.hero-profile-card {
+    background: var(--white);
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    box-shadow: var(--shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profile-placeholder {
+    background: linear-gradient(135deg, var(--rose), var(--rose-gold));
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    color: var(--white);
+    font-size: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* ============================================
+   ABOUT
+   ============================================ */
+
+.about-details-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+}
+
+.about-bio {
+    font-size: 1rem;
+    color: var(--muted);
+}
+
+.social-links a {
+    font-size: 2rem;
+    margin-right: 1rem;
+}
+
+/* ============================================
+   SKILLS
+   ============================================ */
+
+.skills-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.skill-card {
+    background: var(--white);
+    padding: 1.2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-light);
+    text-align: center;
+}
+
+.skill-card i {
+    font-size: 2.6rem;
+    margin-bottom: 0.4rem;
+}
+
+/* ============================================
+   PROJECTS
+   ============================================ */
+
+.project-card {
+    background: var(--white);
+    padding: 2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    max-width: 750px;
+    margin: auto;
+}
+
+.project-card h3 {
+    font-size: 1.6rem;
+    color: var(--rose-dark);
+}
+
+.project-preview {
+    width: 100%;
+    border-radius: var(--radius);
+    margin: 1.2rem 0;
+}
+
+.project-card ul {
+    margin: 1rem 0 1.5rem;
+}
+
+.project-actions {
+    margin-top: 1rem;
+}
+
+.project-btn {
+    background: var(--rose-dark);
+    color: var(--white);
+    padding: 0.8rem 1.4rem;
+    border-radius: var(--radius);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* ============================================
+   EXPERIENCE
+   ============================================ */
+
+.experience-card {
+    background: var(--white);
+    padding: 2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    max-width: 800px;
+    margin: auto;
+}
+
+.experience-card h3 {
+    color: var(--rose-dark);
+}
+
+/* ============================================
+   TIMELINE
+   ============================================ */
+
+.timeline {
+    border-left: 3px solid var(--rose-dark);
+    padding-left: 2rem;
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: 2rem;
+}
+
+.timeline-dot {
+    width: 14px;
+    height: 14px;
+    background: var(--rose-dark);
+    border-radius: 50%;
+    position: absolute;
+    left: -29px;
+    top: 5px;
+}
+
+/* ============================================
+   CONTACT
+   ============================================ */
+
+.contact-links {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.contact-btn {
+    background: var(--rose-dark);
+    color: var(--white);
+    padding: 0.8rem 1.4rem;
+    border-radius: var(--radius);
+    text-decoration: none;
+    margin: 0 0.5rem;
+}
+
+.form-container {
+    max-width: 600px;
+    margin: auto;
+}
+
+.contact-form input,
+.contact-form textarea {
+    width: 100%;
+    padding: 1rem;
+    border-radius: var(--radius);
+    border: 1px solid var(--rose);
+    margin-bottom: 1rem;
+}
+
+.submit-btn {
+    background: var(--rose-gold);
+    border: none;
+    color: var(--white);
+    padding: 0.8rem 1.4rem;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-weight: 600;
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+footer {
+    text-align: center;
+    padding: 2rem;
+    background: var(--rose-dark);
+    color: var(--white);
+    margin-top: 3rem;
+}