zero-to-mastery · Claudiana27 · Jun 17, 2025
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "meta-viewport": "off"
+  }
+}
diff --git a/shower/images/chambre2.jpg b/shower/images/chambre2.jpg
diff --git a/shower/images/food.jpg b/shower/images/food.jpg
diff --git a/shower/images/food1.jpg b/shower/images/food1.jpg
diff --git a/shower/images/food2.jpg b/shower/images/food2.jpg
diff --git a/shower/images/food3.jpg b/shower/images/food3.jpg
diff --git a/shower/images/food4.jpg b/shower/images/food4.jpg
diff --git a/shower/images/image1.jpg b/shower/images/image1.jpg
diff --git a/shower/images/logo.png b/shower/images/logo.png
diff --git a/shower/images/nourriture.jpg b/shower/images/nourriture.jpg
diff --git a/shower/images/piscine.jpg b/shower/images/piscine.jpg
diff --git a/shower/images/piscine1.jpeg b/shower/images/piscine1.jpeg
diff --git a/shower/images/piscine2.jpg b/shower/images/piscine2.jpg
diff --git a/shower/images/room1.jpg b/shower/images/room1.jpg
diff --git a/shower/images/room2.jpg b/shower/images/room2.jpg
diff --git a/shower/images/room3.jpg b/shower/images/room3.jpg
diff --git a/shower/index.html b/shower/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Restaurant 5 Étoiles | Accueil</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header-decor">
+        <div class="header-content">
+          <h1 class="logo">Restaurant <span>5 Étoiles</span></h1>
+          <img src="images/logo.png" alt="Logo" class="header-logo">
+        </div>
+      </header>      
+
+  <main>
+    <section class="hero-horizontal">
+        <div class="slide-container">
+          <img src="images/chambre2.jpg" alt="Chambre confortable" class="slide active">
+          <img src="images/nourriture.jpg" alt="Délicieuse restauration" class="slide">
+          <img src="images/image1.jpg" alt="Fête au bord de la piscine" class="slide">
+        </div>
+
+        <div class="description-container">
+          <p class="description-text active">Des chambres luxueuses pour votre confort absolu.</p>
+          <p class="description-text">Savourez notre cuisine raffinée, locale et internationale.</p>
+          <p class="description-text">Amusez-vous lors de nos soirées au bord de la piscine.</p>
+        </div>
+      </section>
+  </main>
+
+  <section id="chambres" class="vitrine-section">
+    <div class="vitrine-container">
+      <div class="vitrine-text">
+        <h2><a href="#chambres">Nos Chambres</a></h2>
+        <p><em>Des chambres modernes avec une vue imprenable et un confort absolu pour un séjour inoubliable.</em></p>
+      </div>
+      <div class="vitrine-slider">
+        <img src="images/room1.jpg"  alt="Chambre confortable" class="slide-chambre active">
+        <img src="images/room2.jpg"  alt="Chambre confortable" class="slide-chambre">
+        <img src="images/room3.jpg" alt="Chambre confortable" class="slide-chambre">
+      </div>
+    </div>
+  </section>
+
+  <section id="restauration" class="vitrine-section">
+    <div class="vitrine-container">
+      <div class="vitrine-text">
+        <h2><a href="#restauration">Restauration</a></h2>
+        <p><em>Une cuisine gastronomique, locale et internationale, pour satisfaire toutes les envies.</em></p>
+      </div>
+      <div class="vitrine-slider">
+        <img src="images/food.jpg" alt="food" class="slide-resto active">
+        <img src="images/food1.jpg" alt="food" class="slide-resto">
+        <img src="images/food2.jpg" alt="food" class="slide-resto">
+        <img src="images/food3.jpg" alt="food" class="slide-resto">
+        <img src="images/food4.jpg" alt="food" class="slide-resto">
+      </div>
+    </div>
+  </section>
+
+  <section id="piscine" class="vitrine-section">
+    <div class="vitrine-container">
+      <div class="vitrine-text">
+        <h2><a href="#piscine">Piscine & Événements</a></h2>
+        <p><em>Des soirées magiques autour de la piscine avec cocktails, musique et ambiance festive.</em></p>
+      </div>
+      <div class="vitrine-slider">
+        <img src="images/piscine.jpg" alt="piscine" class="slide-piscine active">
+        <img src="images/piscine1.jpg" alt="piscine" class="slide-piscine">
+        <img src="images/piscine2.jpg" alt="piscine" class="slide-piscine">
+      </div>
+    </div>
+  </section>
+
+
+  <footer>
+    &copy; 2025 Restaurant 5 Étoiles – Tous droits réservés
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/shower/script.js b/shower/script.js
@@ -0,0 +1,33 @@
+let currentIndex = 0;
+
+const slides = document.querySelectorAll('.slide');
+const texts = document.querySelectorAll('.description-text');
+
+function showSlide(index) {
+  slides.forEach((slide, i) => {
+    slide.classList.toggle('active', i === index);
+  });
+
+  texts.forEach((text, i) => {
+    text.classList.toggle('active', i === index);
+  });
+}
+
+setInterval(() => {
+  currentIndex = (currentIndex + 1) % slides.length;
+  showSlide(currentIndex);
+}, 3000); // toutes les 3 secondes
+
+
+function carousel(slidesClass) {
+    const slides = document.querySelectorAll(`.${slidesClass}`);
+    let index = 0;
+    setInterval(() => {
+      slides.forEach((s, i) => s.classList.toggle('active', i === index));
+      index = (index + 1) % slides.length;
+    }, 3000);
+  }
+
+  carousel('slide-chambre');
+  carousel('slide-resto');
+  carousel('slide-piscine');
diff --git a/shower/style.css b/shower/style.css
@@ -0,0 +1,170 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Segoe UI', sans-serif;
+    background-color: #fdfdfd;
+    color: #333;
+  }
+
+  header {
+    background-color: white;
+    padding: 30px 40px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+
+  .header-decor {
+    background: linear-gradient(135deg, #f8f0e3, #fbeee6);
+    padding: 40px;
+    border-bottom: 4px solid #e67e22;
+    border-radius: 0 0 15px 15px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  }
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header-logo {
+    width: 80px;
+    height: auto;
+  }
+
+
+  .logo {
+    font-size: 50px;
+    color: #e67e22;
+    font-family: 'Georgia', serif;
+    font-weight: bold;
+  }
+
+  .logo span {
+    color: #2c3e50;
+  }
+
+  .hero-horizontal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    padding: 60px 40px;
+    flex-wrap: wrap;
+  }
+
+  .slide-container, .description-container {
+    width: 48%;
+  }
+
+  .slide-container img {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 12px;
+    display: none;
+  }
+
+  .slide-container img.active {
+    display: block;
+  }
+
+  .description-text {
+    font-size: 1.2rem;
+    font-style: italic;
+    color: #2c3e50;
+    display: none;
+    line-height: 1.6;
+  }
+
+  .description-text.active {
+    display: block;
+  }
+
+
+  .description {
+    max-width: 400px;
+    font-size: 1.2rem;
+    font-style: italic;
+    font-weight: 300; /* Texte fin */
+    color: #34495e;
+    line-height: 1.6;
+  }
+
+
+  .slider {
+    width: 500px;
+    max-width: 90%;
+    overflow: hidden;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.1);
+  }
+
+  .slide {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    display: none;
+    border-radius: 10px;
+  }
+
+  .slide.active {
+    display: block;
+  }
+
+  .vitrine-section {
+    padding: 60px 40px;
+    background-color: #fff;
+    border-top: 1px solid #ddd;
+  }
+
+  .vitrine-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 40px;
+    flex-wrap: wrap;
+  }
+
+  .vitrine-text {
+    max-width: 400px;
+  }
+
+  .vitrine-text h2 a {
+    font-size: 28px;
+    color: #e67e22;
+    text-decoration: none;
+  }
+
+  .vitrine-slider {
+    width: 400px;
+    height: 250px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .vitrine-slider img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+  }
+
+  .vitrine-slider img.active {
+    opacity: 1;
+  }
+
+  footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #2c3e50;
+    color: white;
+    margin-top: 40px;
+  }
+
+