Adaptation de la page Produit au format téléphone

assets/css/product.css

@@ -1,16 +1,23 @@
-main{
+@media screen and (min-width: 700px) {
-    padding-bottom: 2%;
+    main{padding-bottom: 2%;
-    max-width: 1280px;
+        max-width: 1280px;
-    margin-left: auto;
+        margin-left: auto;
-    margin-right: auto;
+        margin-right: auto;
+    }
+
+    p {
+        padding-left: 5%;
+        padding-right: 5%;
+        padding-bottom: 2%;
+    }
+    .product {
+        text-align: center;
+    }
 }
 
-p {
+@media screen and (max-width: 700px) {
-    padding-left: 5%;
+    .image{
-    padding-right: 5%;
+        display: flex;
-    padding-bottom: 2%;
+        justify-content: center;
-}
+    }
-
-.product {
-    text-align: center;
 }

product/index.php

@@ -30,13 +30,21 @@
                     <p>Solar Glass est une nouvelle technologie que notre entreprise a développée. Nous avons repris la technologie des cellules photovoltaïques, présente notamment dans les panneaux solaires, puis grâce à nos ingénieurs nous avons réussi à miniaturiser de plus en plus ces cellules, afin que ces dernières soient invisibles pour l'utilisateur. L'un des plus grands succès de notre entreprise est que, malgré la miniaturisation des cellules, nous avons réussi à garder une production d'électricité assez importante, de cette manière nous pouvons toujours proposer le meilleur des services pour nos clients. Nous avons également trouvé une solution contre la surchauffe, évitant ainsi tout problème à l'appareil électronique, que ce soit un ordinateur ou même un téléphone sur lequel la technologie Solar Glass sera installée.</p>
                 </div>
 
-                <div class="image"><img src="../assets/img/product_b.png" alt="Produit"></div>
+                <div class="image">
+                    <img srcset="../assets/img/product_b2.png 298w, ../assets/img/product_b.png 600w"
+                        sizes="(max-width: 700px) 298px, 600px"
+                        src="../assets/img/product_b.png" alt="Produit">
+                </div>
 
                 <div>
                     <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, comme par exemple notre partenaire Apple, qui va pouvoir intégrer notre technologie dans les écrans de leurs téléphones afin que ces derniers puissent se recharger grâce à l'énergie solaire, cela permet d'être plus écologique car nous utilisons l'énergie solaire, plutôt que d'utiliser l'électicité produite à partir d’énergies fossiles.</p>
                 </div>
 
-                <div class="image"><img src="../assets/img/product_a.png" alt="Produit"></div>
+                <div class="image">
+                    <img srcset="../assets/img/product_a2.png 273w, ../assets/img/product_a.png 547w"
+                        sizes="(max-width: 700px) 273px, 547px"
+                        src="../assets/img/product_a.png" alt="Produit">
+                </div>
             </div>
         </main>
         <footer>
@@ -71,4 +79,4 @@
             <p id="copyright">© <?= date("Y") ?> Elite Solar. Créé par Lyanis Souidi, Tom Moguljak et Romain Journeau.</p>
 	</footer>
     </body>
-</html>
+</html>