Mise à jour

2MJ-DEV · Sep 22, 2024 · 20c9882 · 20c9882
1 parent 80292fe
commit 20c9882
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 25 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/assets/css/menu.css b/assets/css/menu.css
@@ -268,6 +268,10 @@ header::before {
     transition: 0.3s;
 }
 
+.destination__rating span a{
+    color: var(--white);
+}
+
 .destination__card:hover .destination__rating {
     background-color: var(--primary-color-dark);
 }

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -267,6 +267,14 @@ header::before {
   transition: 0.3s;
 }
 
+.destination__rating span a {
+  color: var(--white);
+}
+
+.client__rating a {
+  color: #ffffff;
+}
+
 .destination__card:hover .destination__rating {
   background-color: var(--primary-color-dark);
 }

diff --git a/assets/image/BLESS.webp b/assets/image/BLESS.webp
diff --git a/assets/image/ELIZABETH.webp b/assets/image/ELIZABETH.webp
diff --git a/assets/image/JIT.webp b/assets/image/JIT.webp
diff --git a/assets/image/SEPHORA.webp b/assets/image/SEPHORA.webp
diff --git a/assets/image/logo.ico b/assets/image/logo.ico
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="./assets/image/logo.ico" type="image/x-icon">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link rel="stylesheet" href="assets/css/styles.css" />
@@ -14,7 +15,7 @@
   <nav>
     <div class="nav__header">
       <div class="nav__logo">
-        <a href="#" class="logo">2MJ-FASTFOOD</a>
+        <a href="https://julesdevx.github.io/monPortfolio-dev/" class="logo">2MJ-FASTFOOD</a>
       </div>
       <div class="nav__menu__btn" id="menu-btn">
         <i class="ri-menu-line"></i>
@@ -23,9 +24,9 @@
     <ul class="nav__links" id="nav-links">
       <li><a href="#">ACCUEIL</a></li>
       <li><a href="menu.html">MENU</a></li>
-      <li><a href="#contact">SPECIALITES</a></li>
+      <li><a href="#specialite">SPECIALITES</a></li>
       <li><a href="#contact">CONTACT</a></li>
-      <li><a href="#contact">RESEVER</a></li>
+      <li><a href="#reservation">RESEVER</a></li>
     </ul>
     <!-- <div class="nav__btns">
         <button class="btn">RÉSERVER UNE TABLE</button>
@@ -39,8 +40,8 @@
         <h1>Découvrez nos burgers savoureux et nos boissons rafraîchissantes.</h1>
         <div class="header__btns">
           <button class="btn">Passer votre commande</button>
-          <a href="#">
-            <span><i class="ri-shopping-cart-2-line"></i></span>
+          <a href="#reservation" title="Réserver une table">
+            <span><i class="ri-restaurant-2-line"></i></span>
           </a>
         </div>
       </div>
@@ -50,7 +51,7 @@ <h1>Découvrez nos burgers savoureux et nos boissons rafraîchissantes.</h1>
     </div>
   </header>
 
-  <section class="section__container destination__container" id="about">
+  <section class="section__container destination__container" id="specialite">
     <h2 class="section__header">Nos meilleurs plats</h2>
     <p class="section__description">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eligendi quos quo blanditiis. Explicabo numquam
@@ -242,7 +243,7 @@ <h2 class="section__header">Témoignages de nos Clients Satisfaits</h2>
                 accompagner leur burger !</p>
             </div>
             <div class="client__details">
-              <a href="#"><img src="assets/client-3.jpg" alt="client"></a>
+              <a href="#"><img src="assets/image/JIT.webp" alt="client"></a>
               <div>
                 <h4>ILUNGA John</h4>
                 <h5>Etudiant à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
@@ -264,7 +265,7 @@ <h5>Etudiant à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
                 pour un bon repas rapide !</p>
             </div>
             <div class="client__details">
-              <a href="#"><img src="assets/client-3.jpg" alt="client"></a>
+              <a href="#"><img src="assets/image/SEPHORA.webp" alt="client"></a>
               <div>
                 <h4>NSEYA Sephora</h4>
                 <h5>Etudiante à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
@@ -285,10 +286,10 @@ <h5>Etudiante à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
               <p>Excellente ambiance, les frites au fromage fondu sont à tomber ! Je recommande vivement.</p>
             </div>
             <div class="client__details">
-              <a href="https://julesdevx.github.io/monPorfolio/"><img src="assets/client-3.jpg" alt="client"></a>
+              <a href="#"><img src="assets/image/BLESS.webp" alt="client"></a>
               <div>
-                <h4>MUKADI Jules</h4>
-                <h5>Etudiant à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
+                <h4>SHIMUBANGA Blessing</h4>
+                <h5>Etudiante à <a href="https://upl-univ.ac/">UPL Lubumbashi</a></h5>
               </div>
             </div>
           </div>
@@ -330,7 +331,7 @@ <h5>Business Executive</h5>
           quis laboriosam aperiam accusamus vitae!</p>
         <ul class="footer__socials">
           <li>
-            <a href="#"><i class="ri-linkedin-fill"></i></ion-icon></a>
+            <a href="https://www.linkedin.com/in/jules-mukadi-467015320/"><i class="ri-linkedin-fill"></i></ion-icon></a>
           </li>
           <li>
             <a href="#"><i class="ri-github-fill"></i><i class="ri-github-full"></i></a>
@@ -347,7 +348,7 @@ <h4>Liens court</h4>
           <li><a href="menu.html">MENU</a></li>
           <li><a href="#contact">SPECIALITES</a></li>
           <li><a href="#contact">CONTACT</a></li>
-          <li><a href="#contact">RESEVER</a></li>
+          <li><a href="#reservation">RESEVER</a></li>
         </ul>
       </div>
       <div class="footer__col">
@@ -367,16 +368,20 @@ <h4>Contactez Nous</h4>
           </li>
         </ul>
       </div>
-      <div class="footer__col">
-        <h4>News letters</h4>
+      <div class="footer__col" id="reservation">
+        <h4>Réserver une Table</h4>
         <form action="/">
-          <input type="text" placeholder="Entrez votre email" />
-          <button class="btn">S'abonné</button>
+          <input type="text" placeholder="Nom Complet" />
+          <input type="text" placeholder="Numéro de téléphone" />
+          <input type="number" placeholder="Nombre de personne" />
+          <input type="datetime-local" />
+          <button class="btn">Envoyer</button>
         </form>
       </div>
     </div>
-    <div class="footer__bar">&copy; 2024 <a href="https://julesdevx.github.io/monPorfolio/">2MJULES</a>. Tous droits
-      réservés.</div>
+    <div class="footer__bar">
+      <p>Copyright &copy; <span fs-hacks-element="year"></span> <a href="https://julesdevx.github.io/monPortfolio-dev/">2MJULES</a>. Tous droits réservés.</p>
+    </div>
   </footer>
 
   <script src="https://unpkg.com/scrollreveal"></script>
@@ -385,6 +390,23 @@ <h4>News letters</h4>
 
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+
+  <script>
+    // when the DOM is ready
+    document.addEventListener('DOMContentLoaded', function () {
+      // set the fs-hacks selector
+      const YEAR_SELECTOR = '[fs-hacks-element="year"]';
+      // get the the span element
+      const yearSpan = document.querySelector(YEAR_SELECTOR);
+
+      if (!yearSpan) return;
+      // get the current year
+      const currentYear = new Date().getFullYear();
+
+      // set the year span element's text to the current year
+      yearSpan.innerText = currentYear.toString();
+    });
+  </script>
 </body>
 
 </html>
diff --git a/menu.html b/menu.html
@@ -4,12 +4,19 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./assets/image/logo.ico" type="image/x-icon">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+    <!-- ==========================CSS======================= -->
     <link rel="stylesheet" href="assets/css/menu.css" />
+
+    <!-- =============================Google fonts========================= -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
+
+    <!-- ==================================Title================================ -->
     <title>2MJWEB-DEV | 2MJ-FASTFOOD</title>
 </head>
 
@@ -35,6 +42,8 @@
       </div> -->
     </nav>
 
+
+    <!-- ==================================Hero section====================================== -->
     <header id="home">
         <div class="header__container">
             <div class="header__content">
@@ -53,6 +62,8 @@ <h1> Découvrez nos burgers et boissons, préparés avec passion.</h1>
         </div>
     </header>
 
+
+    <!-- =======================================Menu burger========================================== -->
     <section class="section__container destination__container" id="about">
         <h2 class="section__header">Nos Burger</h2>
         <p class="section__description">Des burgers préparés avec des ingrédients frais et de qualité. Que vous soyez
@@ -100,6 +111,10 @@ <h4>Veggie Delight</h4>
             </div>
         </div>
     </section>
+
+
+    <!-- ==================================Menu boisson======================================= -->
+
     <section class="section__container destination__container" id="about">
         <h2 class="section__header">Nos Boissons</h2>
         <p class="section__description">Accompagnez votre burger d'une boisson rafraîchissante.</p>
@@ -154,7 +169,7 @@ <h4>Bières et Cocktails</h4>
             </div>         -->
         </div>
     </section>
-
+    <!-- ==========================================Footer========================================== -->
     <footer id="contact">
         <div class="section__container footer__container">
             <div class="footer__col">
@@ -202,23 +217,49 @@ <h4>Contactez Nous</h4>
                     </li>
                 </ul>
             </div>
-            <div class="footer__col">
-                <h4>News letter</h4>
+            <div class="footer__col" id="reservation">
+                <h4>Réserver une Table</h4>
                 <form action="/">
-                    <input type="text" placeholder="Entrez votre email" />
-                    <button class="btn">S'abonné</button>
+                    <input type="text" placeholder="Nom Complet" />
+                    <input type="text" placeholder="Numéro de téléphone" />
+                    <input type="number" placeholder="Nombre de personne" />
+                    <input type="datetime-local" />
+                    <button class="btn">Envoyer</button>
                 </form>
             </div>
         </div>
-        <div class="footer__bar">&copy; 2024 <a href="http://">2MJULES</a>. All rights reserved.</div>
+        <div class="footer__bar">
+            <p>Copyright &copy; <span fs-hacks-element="year"></span> <a
+                    href="https://julesdevx.github.io/monPorfolio/">2MJULES</a>. Tous droits réservés.</p>
+        </div>
     </footer>
 
     <script src="https://unpkg.com/scrollreveal"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/JS/main.js"></script>
 
+
+    <!-- ===================================IonIcon================================ -->
     <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+
+    <!-- =========================== Script compteur d'années automatiquement ========================== -->
+    <script>
+        // when the DOM is ready
+        document.addEventListener('DOMContentLoaded', function () {
+            // set the fs-hacks selector
+            const YEAR_SELECTOR = '[fs-hacks-element="year"]';
+            // get the the span element
+            const yearSpan = document.querySelector(YEAR_SELECTOR);
+
+            if (!yearSpan) return;
+            // get the current year
+            const currentYear = new Date().getFullYear();
+
+            // set the year span element's text to the current year
+            yearSpan.innerText = currentYear.toString();
+        });
+    </script>
 </body>
 
 </html>