section-7: Testimonials.

Author: owen-webb

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

@@ -296,3 +296,61 @@
 .tag--vegetarian {
   background-color: #51cf66;
 }
+
+/*** TESTIMONIALS ***/
+
+.gallery {
+  display: grid;
+  gap: 1.6rem;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 1.6rem;
+}
+
+.gallery-item {
+  overflow: hidden;
+}
+
+.gallery-item img {
+  display: block;
+  width: 100%;
+  transition: all 400ms;
+}
+
+.gallery-item img:hover {
+  transform: scale(1.1);
+}
+
+.section-testimonials {
+  align-items: center;
+  background-color: #fdf2e9;
+  display: grid;
+  grid-template-columns: 55fr 45fr;
+}
+
+.testimonials {
+  column-gap: 8rem;
+  display: grid;
+  gap: 4.8rem;
+  grid-template-columns: 1fr 1fr;
+}
+
+.testimonials-container {
+  padding: 9.6rem;
+}
+
+.testimonial-img {
+  border-radius: 50%;
+  width: 6.4rem;
+  margin-bottom: 1.2rem;
+}
+
+.testimonial-name {
+  color: #6f6f6f;
+  font-size: 1.6rem;
+}
+
+.testimonial-text {
+  font-size: 1.8rem;
+  line-height: 1.8;
+  margin-bottom: 1.6rem;
+}

starter/07-Omnifood-Desktop/index.html

@@ -245,6 +245,92 @@ <h3 class="heading-tertiary">Works with any diet:</h3>
           <a href="#" class="link">See all recipes &rarr;</a>
         </div>
       </section>
+
+
+      <!-- TESTIMONIALS -->
+      <section class="section-testimonials">
+        <div class="testimonials-container">
+          <span class="subheading">
+            Testimonials
+          </span>
+          <h2 class="heading-secondary">
+            Once you try it, you can't go back
+          </h2>
+
+          <div class="testimonials">
+            <figure class="testimonial">
+              <img src="img/customers/dave.jpg" alt="Customer." class="testimonial-img" />
+              <blockquote class="testimonial-text">
+                Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical.
+              </blockquote>
+              <p class="testimonial-name">&mdash; - Dave Bryson</p>
+            </figure>
+
+            <figure class="testimonial">
+              <img src="img/customers/ben.jpg" alt="Customer." class="testimonial-img" />
+              <blockquote class="testimonial-text">
+                The AI algorithm is crazy good, it chooses the right meals for me every time. It's amazing not to worry about food anymore!
+              </blockquote>
+              <p class="testimonial-name">&mdash; - Ben Hadley</p>
+            </figure>
+
+            <figure class="testimonial">
+              <img src="img/customers/steve.jpg" alt="Customer." class="testimonial-img" />
+              <blockquote class="testimonial-text">
+                Omnifood is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals now!
+              </blockquote>
+              <p class="testimonial-name">&mdash; - Steve Miller</p>
+            </figure>
+
+            <figure class="testimonial">
+              <img src="img/customers/hannah.jpg" alt="Customer." class="testimonial-img" />
+              <blockquote class="testimonial-text">
+                I got Omnifood for the whole family, and it frees up so much time! Plus, everything is organic and vegan and without plastic.
+              </blockquote>
+              <p class="testimonial-name">&mdash; - Hannah Smith</p>
+            </figure>
+          </div>
+        </div>
+
+        <div class="gallery">
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-1.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-2.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-3.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-4.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-5.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-6.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-7.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-8.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-9.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-10.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-11.jpg" alt="Food." />
+          </figure>
+          <figure class="gallery-item">
+            <img src="img/gallery/gallery-12.jpg" alt="Food." />
+          </figure>
+        </div>
+      </section>
     </main>
   </body>
 </html>