Mise à jour de la page d'accueil

assets/css/home.css

@@ -1,87 +1,43 @@
-
+.bande { 
-    main{
-        padding: 50px;
-      }
-
-    main h1 {
-        padding: 20px;
-        font-size: 30px;
-        font-family: sans-serif;
-      }
-
-    main p {
-        font-size: 20px;
-        max-width: 1200px;
-        font-family:"system-ui";
-        font-family: sans-serif;
-      }
-
-    main a {
-        font-size: 20px;
-        color : #00E6FF;
-        font-family: sans-serif;
-      }
-
-    .bande { 
     text-align: center; 
     font-size: 25px; 
     font-weight: bold; 
     }
-    .bande img {
+
+.bande img {
     padding : 25px;
+}
+
+.bande ul {
+display: inline-block;
+}
+
+.bande li {
+display: inline;
+}
+
+@media screen and (min-width: 700px) {
+    main{
+        padding-bottom: 2%;
+        max-width: 1280px;
+        margin-left: auto;
+        margin-right: auto;
       }
 
-    .bande ul {
+      p {
-	display: inline-block;
+        padding-left: 5%;
+        padding-right: 5%;
+        padding-bottom: 2%;
     }
 
-    .bande li {
+    .home {
-	display: inline;
+        text-align: center;
     }
+}
 
-    .image1{
+@media screen and (max-width: 700px) {
-	width: 330px;
+    .image{
-	height: 260px;
+        display: flex;
-	float: left;
+        justify-content: center;
-	margin-right: 50px;
+}
-    }
+}
-
-    .image2{
-	width: 400px;
-	height: 310px;
-	float: right;
-	margin-left: 50px;
-    }
-
-    .image3{
-	width: 300px;
-	height: 180px;
-	float: left;
-	margin-right: 50px;
-    }
-
-    .logoA{
-	width: 150px;
-	height: 150px;
-    }
-
-    .logoS{
-	width: 320px;
-	height: 120px;
-    }
-
-    .logoH{
-	width: 150px;
-	height: 150px;
-    }
-
-    .margin{
-	margin-left: 20px;
-	margin-right: 20px;
-    }
-
-    
-    
-      
-     
-     

index.php

@@ -23,12 +23,14 @@
             </ul>
         </header>
         <main>
-      	    <h1>Bienvenue chez EliteSolar !</h1>
+      	    <h1>Bienvenue chez Elite Solar !</h1><br>
 
-	    <p>&nbsp;</p>
+            <div class="home">
-            <br>
+                <div class="image">
-	    
+                    <img srcset="assets/img/schema_b2.png 273w, assets/img/schema_b.png 547w"
-            <p><img src="assets/img/shema_b.png" alt="shema bleu decomposer" class="image1"></p>
+                    sizes="(max-width: 700px) 273px, 547px"
+                    src="assets/img/shema_b.png" alt="schema">
+                </div>
 
                 <p>Nous sommes une entreprise innovante qui a créé une technologie nomé Solart Glass
                 qui s'intègre dans l'écran des smartphones et qui permet grâce à l'énergie
@@ -43,47 +45,40 @@
                 <p>Cette technologie a été conçue pour être facile à utiliser et à configurer.
                 Grâce à l'utilisation d'un matériau ultra-fin qui est intégré à l'écran, l'énergie lumineuse est captée et transformée en énergie électrique qui est ensuite stockée dans la batterie.</p>
 
-            <p><img src="assets/img/schema.png" alt="shema soleil oeil" class="image2"></p>
+                <div class="image">
-
+                    <img src="assets/img/schema.png" alt="schema">
-            <p>&nbsp;</p>
+                </div>
-            <br><br><br>
 
                 <p>Lorsque l'écran est exposé à la lumière du soleil ou à la lumière artificielle,
-              l'énergie est convertie en électricité.              
+                l'énergie est convertie en électricité.</p>
-            </p>
 
-            <p>&nbsp;</p>
+                <div class="image">
-            <br>
+                    <img srcset="assets/img/tech2.jpg 320w, assets/img/tech.jpg 800w"
-
+                    sizes="(max-width: 700px) 320px, 800px"
-            <p><img src="assets/img/tech.jpg" alt="image environnement" class="image3"></p>
+                    src="assets/img/tech.jpg" alt="image environnement">
-
+                </div>
-            <p>&nbsp;</p>
 
                 <p>Notre technologie est écologique, économique et durable. Nous sommes fiers de vous
                 offrir une technologie qui aidera à réduire la consommation d'énergie et à
                 améliorer la durée de vie de votre téléphone portable.</p>
-            <p>Avec cette technologie innovante et écologique, EliteSolar offre aux utilisateurs une expérience qui est à la fois pratique et durable. </p>
                 
-            <p>&nbsp;</p>
+                <p>Avec cette technologie innovante et écologique, EliteSolar offre aux utilisateurs une expérience qui est à la fois pratique et durable.</p>
-            <br>
             
                 <p>Nous commercialisons notre technologie Solar Glass à des entreprises partenaires, qui sont nos clients, afin qu'ils puissent l'intégrer dans leurs produits. Ces derniers vont pouvoir installer Solar Glass dans l'écran de leurs appareils éléctroniques.</p>
+            </div>
             
             <div class="bande">
-		    <br>
                 <h2>Nos partenaires</h2>
                 <ul>
-		        <li><img src="assets/img/Apple_logo_white.png" alt="Logo Apple" class="logoA margin"></li>
+                    <li><img src="assets/img/Apple_logo_white.png" alt="Apple" width="150" height="150"></li>
-		        <li><img src="assets/img/Samsung_Logo.png" alt="Logo Samsung" class="logoS margin"></li>
+                    <li><img src="assets/img/Samsung_Logo.png" alt="Samsung" width="320" height="120"></li>
-		        <li><img src="assets/img/Huawei_logo.png" alt="Logo Huawei" class="logoH margin"></li>
+                    <li><img src="assets/img/Huawei_logo.png" alt="Huawei" width="150" height="150"></li>
                 </ul>
             </div>
 
-		<br><br><br>
+            <div class="home">
-            <p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de
+                <p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de vous offrir un service de qualité. N'hésitez pas à nous <a href="contact/index.php">contacter</a> pour en savoir plus sur notre produit et comment il peut vous aider.</p>
-              vous offrir un service de qualité. N'hésitez pas à nous <a href="contact/index.php">contacter</a> pour en
+            </div>
-              savoir plus sur notre produit et comment il peut vous aider.</p>
-
 	    </main>
         <footer>
             <div id="social">