Update

Author: N0sBa

starter/07-Omnifood-Desktop/css/genreral.css

@@ -53,6 +53,10 @@ body {
     align-items: center;
 }
 
+.grid--center-h {
+    justify-items: center;
+}
+
 .grid--2-cols {
     grid-template-columns: repeat(2, 1fr);
 }
@@ -169,13 +173,29 @@ body {
     text-decoration: none;
     font-weight: 500;
     font-size: 1.6rem;
-    transition: background-color 0.3s;
+    transition: all 0.3s;
 }
 
 .btn-padding-sm {
     padding: 1.6rem 3.2rem;
 }
 
+.link:link,
+.link:visited {
+    display: inline-block;
+    color: #e67e22;
+    text-decoration: none;
+    border-bottom: 1px solid currentColor;
+    padding-bottom: 2px;
+    transition: all 0.3s;
+}
+
+.link:hover,
+.link:active {
+    color: #cf711f;
+    border-bottom: 1px solid transparent;
+}
+
 .margin-right-sm {
     margin-right: 1.6rem;
 }
@@ -204,6 +224,34 @@ body {
     margin-bottom: 1.6rem;
 }
 
+.margin-bottom-md {
+    margin-bottom: 4.8rem !important;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+}
+
+.list-item {
+    font-size: 1.8rem;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+}
+
+.list-icon {
+    width: 3rem;
+    height: 3rem;
+    color: #e67e22;
+} 
+
 strong {
     font-weight: 500;
 }

starter/07-Omnifood-Desktop/css/style.css

@@ -198,7 +198,7 @@
 }
 
 /*****************************************/
-/************** HOW IT WORKS SECTION *************/
+/************** MEALS SECTION *************/
 /*****************************************/
 
 .meals {
@@ -209,6 +209,12 @@
     box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.075);
     border-radius: 11px;
     overflow: hidden;
+    transition: transform 0.3s;
+}
+
+.meal:hover {
+    transform: translateY(-1.2rem);
+    box-shadow: 0 2.4rem 6.4rem rgba(0,0,0,0.06);
 }
 
 .meal-content {
@@ -271,4 +277,116 @@
 
 .meal-img {
     width: 100%;
+}
+
+.all-receipes {
+    text-align: center;
+    font-size: 1.8rem;
+}
+
+/*****************************************/
+/************** TESTIMONIALS SECTION *************/
+/*****************************************/
+.testimonials {
+    background-color: #fdf2e9;
+    display: grid;
+    grid-template-columns: 55fr 45fr;
+    align-items: center;
+}
+
+.testimonials-container {
+    padding: 9.6rem;
+}
+
+.testimonials-side {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 4.8rem;
+    column-gap: 8rem;
+}
+
+.testimonial-img {
+    width: 6.4rem;
+    border-radius: 50%;
+    margin-bottom: 1.2rem;
+}
+
+.testimonial-text {
+    font-size: 1.8rem;
+    line-height: 1.8;
+    margin-bottom: 1.6rem;
+}
+
+.testimonial-name {
+    font-size: 1.6rem;
+    color: #6f6f6f;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.6rem;
+    padding: 1.6rem;
+}
+
+.gallery-item {
+    overflow: hidden;
+}
+
+.gallery-item img {
+    display: block;
+    width: 100%;
+    transition: transform 0.4s;
+}
+
+.gallery-item img:hover {
+    transform: scale(1.1);
+}
+
+/*****************************************/
+/************** PRICING SECTION *************/
+/*****************************************/
+.pricing {
+    padding: 9.6rem 0;
+}
+.pricing-plan {
+    background-color: #fdf2e9;
+    border-radius: 11px;
+    padding: 4.8rem;
+    width: 75%;
+}
+.pricing-plan--stater {
+    justify-self: end;
+}
+.plan-header {
+    text-align: center;
+    margin-bottom: 4.8rem;
+}
+.plan-name {
+    color: #cf711f;
+    font-weight: 600;
+    font-size: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 0.75;
+    margin-bottom: 3.2rem;
+}
+.plan-price {
+    font-size: 6.2rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 1.6rem;
+}
+.plan-price span {
+    font-size: 3rem;
+    font-weight: 500;
+    margin-right: 0.8rem;
+}
+.plan-text {
+    font-size: 1.6rem;
+    line-height: 1.6;
+    color: #6f6f6f;
+}
+.plan-sign-up {
+    text-align: center;
+    margin-top: 4.8rem;
 }