Update style.css

style.css

@@ -1,139 +1,140 @@
-/* Layout */
-/* * The designs were created to the following widths:
-  * - Mobile: 375px
-  * - Desktop: 1440px
-  * * Ensure content is responsive and meets WCAG requirements
-  * by testing the full range of screen sizes from 320px to large screens.
-  */
-
-/* Colors */
-
-/* Primary */
-:root {
-  --green-500: hsl(158, 36%, 37%);
-  --green-700: hsl(158, 42%, 18%);
-
-  /* Neutral */
-  --black: hsl(212, 21%, 14%);
-  --grey: hsl(228, 12%, 48%);
-  --cream: hsl(30, 38%, 92%);
-  --white: hsl(0, 0%, 100%);
-
-  /* Typography */
-  --font-size-paragraph: 14px;
-
-  /* Font */
-  --font-montserrat: 'Montserrat', sans-serif; /* Make sure you've imported this font */
-  --font-fraunces: 'Fraunces', serif;       /* Make sure you've imported this font */
-}
-
-/* Example usage */
-body {
-  font-size: var(--font-size-paragraph);
-/*  color: var(--black);*/
-}
-
-h1 {
-  font-family: var(--font-fraunces);
-  font-weight: 700;
-}
-
-p {
-  font-family: var(--font-montserrat);
-  font-weight: 500;
-  margin: 0;
-}
-
-.primary-button {
-  background-color: var(--green-500);
-  color: var(--white);
-  /* other styles */
-}
-
-.primary-button:hover {
-  background-color: var(--green-700);
-}
-
-/* Add more CSS rules as needed based on your design */
-
- body {
-     background: var(--cream);
-       display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-    }
-
-    .container {
-      /* background-color: white; */
-     /*  border-radius: 20px; */
-      overflow: hidden;
-      /* background-color: var(--white); */
-      max-width: 700px;
-      width: 90%;
-      display: flex;
-      flex-direction: column;
-      border-radius: 20px;
-    }
-
-.image{
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-img{
-  border-radius: 20px 20px 0 0;
-}
-.product-info{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center; 
-  background-color: var(--white);
-  border-radius: 0 0 20px 20px;
-  padding: 30px;
-}
-
-.product-info h1{
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-.product-info p{
-  font-size: 16px;
-  margin-bottom: 20px;
-} 
-.brand{
-  font-size: 14px;
-  color: var(--grey);
-}
-
-
-@media (min-width: 768px) {
-  .container {
-    flex-direction: row;
-    /* border-radius: 15px 15 15 0; */
-  }
-  .image, .product-info{
-    width: 50%;
-
-
-  }
-  .product-info{
-    border-radius: 0 20px 20px 0;
-  }
- 
- 
-  img {
-    border-radius: 20px 0 0 20px;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  
-  }
-  button {
-    width: 100%;
-    border-radius: 20px;
-  }
+/* Layout */
+/* * The designs were created to the following widths:
+  * - Mobile: 375px
+  * - Desktop: 1440px
+  * * Ensure content is responsive and meets WCAG requirements
+  * by testing the full range of screen sizes from 320px to large screens.
+  */
+
+/* Colors */
+
+/* Primary */
+:root {
+  --green-500: hsl(158, 36%, 37%);
+  --green-700: hsl(158, 42%, 18%);
+
+  /* Neutral */
+  --black: hsl(212, 21%, 14%);
+  --grey: hsl(228, 12%, 48%);
+  --cream: hsl(30, 38%, 92%);
+  --white: hsl(0, 0%, 100%);
+
+  /* Typography */
+  --font-size-paragraph: 14px;
+
+  /* Font */
+  --font-montserrat: 'Montserrat', sans-serif; /* Make sure you've imported this font */
+  --font-fraunces: 'Fraunces', serif;       /* Make sure you've imported this font */
+}
+
+/* Example usage */
+body {
+  font-size: var(--font-size-paragraph);
+/*  color: var(--black);*/
+}
+
+h1 {
+  font-family: var(--font-fraunces);
+  font-weight: 700;
+}
+
+p {
+  font-family: var(--font-montserrat);
+  font-weight: 500;
+  margin: 0;
+}
+
+.primary-button {
+  background-color: var(--green-500);
+  color: var(--white);
+  /* other styles */
+}
+
+.primary-button:hover {
+  background-color: var(--green-700);
+}
+
+/* Add more CSS rules as needed based on your design */
+
+ body {
+     background: var(--cream);
+       display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+    }
+
+    .container {
+      /* background-color: white; */
+     /*  border-radius: 20px; */
+      overflow: hidden;
+      /* background-color: var(--white); */
+      max-width: 700px;
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      border-radius: 20px;
+    }
+
+.image{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+img{
+  border-radius: 20px 20px 0 0;
+}
+.product-info{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; 
+  background-color: var(--white);
+  border-radius: 0 0 20px 20px;
+  padding: 30px;
+}
+
+.product-info h1{
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+.product-info p{
+  font-size: 16px;
+  margin-bottom: 20px;
+} 
+.brand{
+  font-size: 14px;
+  color: var(--grey);
+}
+
+
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row;
+    align-items: stretch;
+    /* border-radius: 15px 15 15 0; */
+  }
+  .image, .product-info{
+    width: 50%;
+
+
+  }
+  .product-info{
+    border-radius: 0 20px 20px 0;
+  }
+ 
+ 
+  img {
+    border-radius: 20px 0 0 20px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  
+  }
+  button {
+    width: 100%;
+    border-radius: 20px;
+  }
 }