testimonials apricing features

Author: duba74

starter/07-Omnifood-Desktop/content.md

@@ -85,7 +85,7 @@ Starter: $399 per month
 
 Complete: $649 per month
 
--   2 meal2 per day
+-   2 meals per day
 -   Order 24/7
 -   Delivery is free
 -   Get access to latest recipes

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

@@ -31,10 +31,12 @@ Paragraph default: 1.6
 - Shades: #cf711f
 - Accents:
 - Greys:
+#6f6f6f lightest gray allowed on #fdf2e9
 #555
 #333
 
 
+
 --- 05 Shadows
 
 
@@ -87,6 +89,14 @@ body {
     gap: 9.6rem 6.4rem;
 }
 
+/* .grid:last-child {
+    margin-bottom: 0;
+} */
+
+.grid:not(:last-child) {
+    margin-bottom: 9.6rem;
+}
+
 .grid--2-cols {
     grid-template-columns: repeat(2, 1fr);
 }
@@ -195,6 +205,26 @@ body {
     border-bottom: 1px solid transparent;
 }
 
+.list {
+    list-style: none;
+    display: flex;
+    flex-flow: 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;
+}
+
 /* Helper & settings classes*/
 .margin-right-sm {
     margin-right: 1.6rem !important;

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

@@ -290,22 +290,166 @@
     font-size: 1.8rem;
 }
 
-.list {
-    list-style: none;
-    display: flex;
-    flex-flow: column;
-    gap: 1.6rem;
+/***********************************/
+/* Testimonials section */
+/***********************************/
+
+.section-testimonials {
+    background-color: #fdf2e9;
+
+    display: grid;
+    grid-template-columns: 55fr 45fr;
+    align-items: center;
+}
+
+.testimonials-container {
+    padding: 9.6rem;
 }
 
-.list-item {
+.testimonials {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4.9rem 8rem;
+}
+
+.testimonial-img {
+    width: 6.4rem;
+    border-radius: 50%;
+    margin-bottom: 1.2rem;
+}
+
+.testimonial-text {
     font-size: 1.8rem;
-    display: flex;
-    align-items: center;
+    line-height: 1.8;
+    margin-bottom: 1.6rem;
+}
+
+.testimonial-name {
+    font-size: 1.6rem;
+    color: #6f6f6f;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 1.6rem;
+    padding: 1.6rem;
+}
+
+.gallery-item {
+    overflow: hidden;
+}
+
+.gallery-item img {
+    display: block;
+    width: 100%;
+    transition: all 0.4s ease-out;
+}
+
+.gallery img:hover {
+    transform: scale(1.1);
+}
+
+/***********************************/
+/* Testimonials section */
+/***********************************/
+
+.section-pricing {
+    padding: 9.6rem;
+}
+
+.pricing-plan {
+    border-radius: 11px;
+    width: 75%;
+}
+
+.pricing-plan--starter {
+    justify-self: end;
+    border: 0.2rem solid #fdf2e9;
+    padding: 4.6rem;
+}
+
+.pricing-plan--complete {
+    background-color: #fdf2e9;
+    padding: 4.8rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.pricing-plan--complete::after {
+    content: "Best value";
+    position: absolute;
+    top: 6%;
+    right: -19%;
+    text-transform: uppercase;
+    color: #333;
+    font-size: 1.4rem;
+    font-weight: 700;
+    background-color: #ffd43b;
+    padding: 0.8rem 8rem;
+    transform: rotate(45deg);
+}
+
+.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.3rem;
+    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;
 }
 
-.list-icon {
-    width: 3rem;
-    height: 3rem;
+.plan-sign-up {
+    text-align: center;
+    margin-top: 4.8rem;
+}
+
+.plan-details {
+    font-size: 1.6rem;
+    line-height: 1.6;
+    text-align: center;
+}
+
+.feature-icon {
     color: #e67e22;
+    height: 3.2rem;
+    width: 3.2rem;
+    background-color: #fdf2e9;
+    padding: 1.6rem;
+    border-radius: 50%;
+    margin-bottom: 3.2rem;
+}
+.feature-title {
+    font-size: 2.4rem;
+    color: #333;
+    font-weight: 700;
+    margin-bottom: 1.6rem;
+}
+.feature-text {
+    font-size: 1.8rem;
+    line-height: 1.8;
 }