modified

Mixipixi91 · Jun 1, 2024 · dba7bbc · dba7bbc
1 parent a83352c
commit dba7bbc
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link type="image/jpg" href="images/image-product-desktop.jpg">
+  <link type="image/jpg" href="images/image-product-mobile.jpg">
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -18,61 +18,20 @@
 
   <title>Frontend Mentor | Product preview card component</title>
 
-  <style>@media only screen and (max-width: 600px) {
-
-    body{
-      box-sizing: content-box;
-      justify-content: center;
-    }
-
-  .grid-container{
-    display: block;
-  }
-
-  .ribbon-text {
-    letter-spacing: 5px;
-  }
-
-  .essence {
-    display: inline;
-    font-size: 35px;
-  }
-
-  .grid-text {
-    display: block;
-    border-radius: 0 0 10px 10px;
-    width: 345px;
-    height: 350px;
-  }
-
-  img {
-    display: block;
-    border-radius: 10px 10px 0 0;
-    width: 393px;
-    height: 295px;
-    object-fit: cover;
-  }
-  button {
-    justify-content: center;
-    font-weight: 700;
-    position: relative;
-    width: 22rem;
-  }
-    }
-</style>
-
 </head>
 
 <body>
 
   <div class="grid-container">
-        <section class="grid-img">
+        <div class="grid-img">
           <picture>
-          <img src= "images/image-product-desktop.jpg" width="300px" height="416px" alt="bottle of perfume"/>
+            <source media="(max-width:375px)" srcset="image-product-mobile.jpg">
+            <source media="(min-width:376px)" srcset="image-product-desktop.jpg">
+          <img src= "images/image-product-mobile.jpg" alt="product"/>
           </picture>
-        </section>
+        </div>
 
-      <section class="grid-text">
+      <div class="grid-text">
         <hgroup>
           <p class="ribbon-text">PERFUME</p>
 
@@ -85,7 +44,7 @@ <h2 class="essence">Gabrielle Essence Eau De Parfum</h2>
         <p class="new-price">$149.99 <s>$169.99</s></p>
 
         <button><svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg> Add to Cart</button>
-      </section>
+        </div>
   </div>
 
 </body>

diff --git a/style.css b/style.css
@@ -1,9 +1,58 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+  /*
+    2. Remove default margin
+  */
+  * {
+    margin: 0;
+  }
+  /*
+    Typographic tweaks!
+    3. Add accessible line-height
+    4. Improve text rendering
+  */
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  /*
+    5. Improve media defaults
+  */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+  /*
+    6. Remove built-in form typography styles
+  */
+  input, button, textarea, select {
+    font: inherit;
+  }
+  /*
+    7. Avoid text overflows
+  */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  /*
+    8. Create a root stacking context
+  */
+  #root, #__next {
+    isolation: isolate;
+  }
+
+  @media only screen and (max-width: 375px){
 
 body {
+    display: flexbox;
+    min-height: 100vh;
     background-color: hsl(30, 38%, 92%);
-    display: grid;
-    max-width: 100%;
-}
+        }
+
 .grid-container {
     display: flex;
     max-width: 30%;
@@ -91,4 +140,5 @@ button {
 }
 svg {
     padding-right: 10px;
+}
 }