url

itdeveloppement · Mar 22, 2024 · 85c46d0 · 85c46d0
1 parent 361297d
commit 85c46d0
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 40 deletions.
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,2 @@
+include:
+  - node_modules
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -137,9 +137,9 @@ h2 {
     font-size: 14px;
 }
 .pre-nav-chaussures {
-background-color: var(--firstOne);
-color: var(--firstThree);
-padding: 5px 20px;
+    background-color: var(--firstOne);
+    color: var(--firstThree);
+    padding: 5px 20px;
 }
 .pre-nav-baskets {
     background-color:var(--firstThree);
@@ -470,7 +470,10 @@ margin: 40px 0;
 }
 .compteur-info p {
     margin-top: 3px;
-    padding: 0 5px;
+    padding: 0 5px 0 0;
+}
+.compteur h4{
+    width: 100%;
 }
 
 
@@ -704,6 +707,9 @@ footer a {
 .main-produit p {
     margin: 0;
 }
+.main-produit h2 {
+    margin-bottom: 40px;
+}
 .main-produit .pre-nav {
     margin: 100px 8px 50px 8px;
 }
@@ -716,13 +722,11 @@ footer a {
     justify-content: space-between;
     align-items: center;
 }
-.produit-detail-title p {
-    font-size: 25px;
-}
 .produit-detail ul {
     padding:20px 0 0 20px
 }
 .produit-detail-title p {
+    font-size: 25px;
     color: var(--firstTwo);
     font-weight: 600;
     vertical-align: middle;
@@ -931,6 +935,7 @@ footer a {
     .categorie .btn-transparent {
         font-size: 14px;
     }
+
     /* PAGE CATEGORIE CHAUSSURE */
     .main-categorie .categorie-card {
         width: 250px;
@@ -1015,7 +1020,9 @@ footer a {
         margin-bottom: 50px;
 
     }
-
+    .compteur-info p {
+        font-size: 15px;
+    }
     /* PAGE CATEGORIE CHAUSSURE */
 
     /*categorie chaussure*/
@@ -1036,6 +1043,10 @@ footer a {
     .avis-info {
         width: 80%;
     }
+    .compteur-info p {
+        font-size: 12px;
+        background-color: chartreuse;
+    }
  }
 
 @media screen and (min-width:550px) and (max-width:747px){
@@ -1097,12 +1108,16 @@ footer a {
         padding: 8%;
     }
     /*promo*/
-    .promo .large_50 {
+    .promo .large_45 {
+        width: 100%;
+    }
+    .promo .large_45 {
         width: 100%;
     }
     .promo-container-img {
         order: -1;
     }
+
 
     /* marques*/
     .marques-logo {
@@ -1246,7 +1261,7 @@ footer a {
         padding: 8%;
     }
      /*promo*/
-     .promo .large_50 {
+     .promo .large_45 {
         width: 100%;
     }
     .promo-container-img {

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -386,7 +386,7 @@ function affichageDelais () {
     let compteurPromo = document.querySelector(".compteur");
     let template = '';
     template = `
-        <p class="compteur-titre">Il ne vous reste plus que : </p>
+        <h4 class="compteur-titre">Il ne vous reste plus que : </h4>
         <div class="compteur-info flex">
             <div class="flex">
                 <p class="compteur-jours">${duree.jours} jours | </p>

diff --git a/categorie.template.html b/categorie.template.html
@@ -11,9 +11,10 @@
 
     <!-- url canonical -->
     <link rel="canonical" href="http://127.0.0.1:5500/categories.template.html" />
+    <!-- link css hambergers-->
     <link rel="stylesheet" href="./assets/css/hamburgers.css"/>
     <!-- link css leaflet carto-->
-    <link rel="stylesheet" href="./assets/dist/leaflet.css">
+    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
     <!-- link css -->
     <link rel="stylesheet" href="./assets/css/style.css">
 
@@ -177,7 +178,7 @@ <h4>Retrouvez nous sur les réseaux sociaux</h4>
 
     <!-- lien fichier java script et attente du chargement html avant js-->
     <script type="module" src="./assets/js/fonctionsAffichage.js" defer></script>
-    <script src="./assets/dist/leaflet.js" defer></script>
-    <script type="module" src="./assets/js/app.js" defer></script>
+    <script src="./node_modules/leaflet/dist/leaflet.js" defer></script>
+    <script type="module" src="./assets/js/categories.js" defer></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -12,9 +12,9 @@
     <!-- link css hambergers-->
     <link rel="stylesheet" href="./assets/css/hamburgers.css"/>
     <!-- link css aos-->
-    <link href="./assets/dist/aos.css" rel="stylesheet">
+    <link href="./node_modules/aos/dist/aos.css" rel="stylesheet">
     <!-- link css leaflet carto-->
-    <link rel="stylesheet" href="./assets/dist/leaflet.css">
+    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
     <!-- link css -->
     <link rel="stylesheet" href="./assets/css/style.css">
     <!-- favicon et image à la racine du site-->
@@ -151,24 +151,28 @@ <h3>nouveaute</h3>
 
     <!-- section promotion -->
     <section class="promo flex">
-        <div class="promo-encart large_40">
+        <div class="promo-encart large_45">
             <h2><strong>Profitez de l’offre</strong></h2>
             <p class="promo-para-weight">L’ensembe jogging M’S noir disponible en plusieurs tailles</p>
             <p>Ce jogging alie confort légereté et douceur, pour du sport a l’exterieur comme pour les moments de détente a la maison</p>
             <a class="btn btn-transparent" href="./traveaux.html" title="lien vers la page du détail du produit">Voir le détail du produit</a>
             <div class="compteur flex">
             <!-- 
-                <p>Il ne vous reste plus que :</p>
-                <div class="compteur-info flex">
-                <p class="compteur-jours">${duree.jours} jour </p>
-                <p class="compteur-heures">${duree.heures} heure</p>
-                <p class="compteur-minutes">${duree.minutes} minutes</p>
-                <p class="compteur-secondes">${duree.secondes} secondes</p>
+            <h4 class="compteur-titre">Il ne vous reste plus que : </h4>
+            <div class="compteur-info flex">
+                <div class="flex">
+                    <p class="compteur-jours">${duree.jours} jours | </p>
+                    <p class="compteur-heures">${duree.heures} heures | </p>
+                <div>
+                <div class="flex">
+                    <p class="compteur-minutes">${duree.minutes} minutes | </p>
+                    <p class="compteur-secondes">${duree.secondes} secondes</p>
+                </div>
             </div> -->
             </div>
         </div >
 
-        <div class="promo-container-img large_50">
+        <div class="promo-container-img large_45">
             <img src="./assets/images/imagesSIte/Joogin-promo.jpg" alt="">
         </div>
     </section>
@@ -197,8 +201,8 @@ <h2>Ces marques nous font confiance </h2>
     </section>
      <!-- section about M'S-->
      <section class="about">
-        <h1><span>Men Sportswear</span> est le <span>specialiste</span> des vêtements, chaussures et équipements de sports pour hommes.</h1>
-        <p>Nous avons pour ambition de vous fournir le meilleur pour la pratique de vos <span><strong>activités sportives</strong> en intérieur comme en extérieur.</span><br> Nous proposons une large <strong>gamme de <span>vêtements, chaussures et équipements pour hommes.</span></strong><br> Nous travaillons avec <strong>les plus grandes marques</strong> et nous disposons de nos propres ateliers de fabrication.<br> Notre nouvelle gamme de produits @utdoor pour les <strong>activités de plein air</strong>, allient <span>confort, respirabilité et protection</span> grâce a nos matériaux à la pointe de la technologie textile.</p>
+        <h1><span>Men Sportswear</span> est le specialiste des <span>vêtements, chaussures et équipements</span> de sports pour hommes.</h1>
+        <p>Nous avons pour ambition de vous fournir le meilleur pour la pratique de vos <span><strong>activités sportives</strong> en intérieur comme en extérieur.</span><br> Nous proposons une large <strong>gamme de vêtements, chaussures et équipements <span>pour hommes.</span></strong><br> Nous travaillons avec <strong>les plus grandes marques</strong> et nous disposons de nos propres ateliers de fabrication.<br> Notre nouvelle gamme de produits @utdoor pour les <strong>activités de plein air</strong>, allient <span>confort, respirabilité et protection</span> grâce a nos matériaux à la pointe de la technologie textile.</p>
      </section>
     <!-- section contact -->
     <section class="contact flex">
@@ -332,8 +336,8 @@ <h4>Retrouvez nous sur les réseaux sociaux</h4>
     </footer>
     <!-- lien fichier java script et attente du chargement html avant js-->
     <script type="module" src="./assets/js/fonctionsAffichage.js" defer></script>
-    <script src="./assets/dist/aos.js" defer></script>
-    <script src="./assets/dist/leaflet.js" defer></script>
+    <script src="./node_modules/aos/dist/aos.js" defer></script>
+    <script src="./node_modules/leaflet/dist/leaflet.js" defer></script>
     <script type="module" src="./assets/js/app.js" defer></script>
 </body>
 </html>
diff --git a/produit.template.html b/produit.template.html
@@ -16,7 +16,7 @@
     <!-- link css swiper -->
     <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css"/>
     <!-- link css leaflet carto-->
-    <link rel="stylesheet" href="./assets/dist/leaflet.css">
+    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
     <!-- link css -->
     <link rel="stylesheet" href="./assets/css/style.css">
 
@@ -120,7 +120,7 @@
             <!-- info produits-->
             <div class="produit-detail large_45">
                 <div class="produit-detail-title flex">
-                    <h3>Libellé du produit</h3>
+                    <h2>Libellé du produit</h2>
                     <p>159€</p>
                 </div>
                 <p>Dernière née de la gamme, cette basket est conçue pour la course a pied sur bitume comme sur les chemins légèrement escarpés</p>
@@ -156,7 +156,7 @@ <h3>Libellé du produit</h3>
         </section>
         <!-- section avis -->
         <section class="avis">
-            <h3>Avis des consommateurs</h3>
+            <h2>Avis des consommateurs</h2>
             <!-- premier avis -->
             <article class="flex"> 
                 <div class="avis-container-img">
@@ -253,9 +253,9 @@ <h4>Retrouvez nous sur les réseaux sociaux</h4>
             </div>
         </div>
     </footer>
-    <script type="module" src="./assets/js/fonctionsAffichage.js" defer></script>
-    <script src="./assets/dist/aos.js" defer></script>
-    <script src="./assets/dist/leaflet.js" defer></script>
-    <script type="module" src="./assets/js/app.js" defer></script>
+     <script type="module" src="./assets/js/fonctionsAffichage.js" defer></script>
+    <script src="./assets/js/swiper-bundle.min.js"></script>
+    <script src="./node_modules/leaflet/dist/leaflet.js" defer></script>
+    <script type="module" src="./assets/js/produit.js" defer></script>
 </body>
 </html>
diff --git a/traveaux.html b/traveaux.html
@@ -11,11 +11,12 @@
     <link rel="canonical" href="http://127.0.0.1:5500/index.html" />
       <!-- non indexation de la page-->
       <meta name="**robots**" content="noindex">
-      <link rel="stylesheet" href="./assets/css/hamburgers.css"/>
+    <!-- link css hambergers-->
+    <link rel="stylesheet" href="./assets/css/hamburgers.css"/>
     <!-- link css aos-->
-    <link href="./assets/dist/aos.css" rel="stylesheet">
+    <link href="./node_modules/aos/dist/aos.css" rel="stylesheet">
     <!-- link css leaflet carto-->
-    <link rel="stylesheet" href="./assets/dist/leaflet.css">
+    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
     <!-- link css -->
     <link rel="stylesheet" href="./assets/css/style.css">
     <!-- favicon et image à la racine du site-->
@@ -139,7 +140,8 @@ <h4>Retrouvez nous sur les réseaux sociaux</h4>
 </footer>
 <!-- lien fichier java script et attente du chargement html avant js-->
 <script type="module" src="./assets/js/fonctionsAffichage.js" defer></script>
-<script src="./assets/dist/leaflet.js" defer></script>
-<script type="module" src="./assets/js/app.js" defer></script>
+<script src="./node_modules/aos/dist/aos.js" defer></script>
+<script src="./node_modules/leaflet/dist/leaflet.js" defer></script>
+<script type="module" src="./assets/js/traveaux.js" defer></script>
 </body>
 </html>