Add files via upload

steffano-da-cruz · Feb 1, 2024 · 763f6e1 · 763f6e1
1 parent 7225d80
commit 763f6e1
Showing 1 changed file with 100 additions and 9 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,4 +1,4 @@
-/* Global */
+/* GLOBAL */
 * {
   margin: 0;
   padding: 0;
@@ -18,7 +18,7 @@ body {
 
 .container {
   width: 96rem;
-  margin: 0 auto 0 auto;
+  margin: 0 auto;
 }
 
 h1 {
@@ -38,7 +38,7 @@ h3 {
   font-size: 2rem;
 }
 
-/* General */
+/* GENERAL */
 
 .grid-3-cols {
   display: grid;
@@ -72,7 +72,7 @@ h3 {
   padding: 0.8rem 1.2rem;
 }
 
-/* Refactored */
+/* REFACTORED */
 header,
 section {
   margin-bottom: 9.6rem;
@@ -114,15 +114,15 @@ h3,
   font-size: 1.6rem;
 }
 
-/* Hero Section */
+/* HEADER / HERO SECTION */
 .hero-section {
   display: flex;
   gap: 8rem;
   margin-top: 6.4rem;
 }
 
 .hero-box {
-  padding: 3.2rem 0rem 3.2rem 0;
+  padding: 3.2rem 0rem;
 }
 
 .hero-image {
@@ -133,7 +133,7 @@ h3,
   margin-bottom: 4.1rem;
 }
 
-/* Features Section */
+/* FEATURES SECTION */
 .features-icon {
   color: #087f5b;
   font-size: 3rem;
@@ -146,7 +146,7 @@ h3,
   margin-bottom: 1.6rem;
 }
 
-/* Testimonial Section */
+/* TESTIMONIAL SECTION */
 .testimonial-section {
   color: #fff;
   background-color: #087f5b;
@@ -170,7 +170,7 @@ h3,
   color: #c3fae8;
 }
 
-/* Ordering Section */
+/* ORDERING SECTION */
 .chair-card {
   box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07);
 }
@@ -221,3 +221,94 @@ footer {
   font-size: 1.4rem;
   color: #495057;
 }
+
+/* MEDIA QUERIES */
+
+/* BELOW 1152px (Small laptops) 1152 / 16 = 72 */
+@media (max-width: 72em) {
+  html {
+    font-size: 56.25%;
+  }
+
+  .chair-price {
+    font-size: 2.1rem;
+  }
+}
+
+/* BELOW 944px (Tablets) 944 / 16 = 59 */
+@media (max-width: 59em) {
+  .container {
+    width: 70rem;
+    margin: 0 auto;
+  }
+
+  .grid-3-cols {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 6rem;
+    row-gap: 5rem;
+  }
+
+  .hero-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 6.4rem;
+  }
+
+  .hero-box {
+    text-align: center;
+    padding: 3.2rem 2rem;
+  }
+
+  .hero-text {
+    margin-bottom: 3.8rem;
+  }
+
+  .hero-image {
+    align-self: center;
+  }
+
+  .features-name {
+    font-size: 1.9rem;
+  }
+
+  .testimonial-image {
+    align-self: center;
+  }
+
+  .testimonial-title {
+    font-size: 2.1rem;
+    margin-bottom: 1.1rem;
+  }
+
+  .testimonial-text {
+    font-size: 1.4rem;
+    margin-bottom: 2rem;
+  }
+
+  .chair-card {
+    width: 30rem;
+  }
+
+  .chair-price {
+    font-size: 2.3rem;
+  }
+}
+
+/* BELOW 704px (Smaller tablets)  704 /16 = 44 */
+@media (max-width: 44em) {
+  html {
+    font-size: 50%;
+  }
+}
+
+/* BELOW 624px (Phones)  624 /16 = 34 */
+@media (max-width: 39em) {
+  html {
+    font-size: 45%;
+  }
+
+  .container {
+    width: 50rem;
+  }
+}