Create testimonials section

src/index.html

@@ -264,6 +264,65 @@
             </div>
         </div>
     </section>
+    <section class="testimonials">
+        <p class="testimonials__h1">People are talking about fork</p>
+        <div class="testimonials__content container">
+            <div class="testimonials__row row">
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
+                        magna.
+                        Sed varius urna et pulvinar venenatis.
+                    </p>
+                </div>
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
+                        mollis eleifend nibh.
+                    </p>
+                </div>
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
+                        nibh.
+                        Morbi tempus auctor felis ac vehicula.
+                    </p>
+                </div>
+            </div>
+            <div class="testimonials__row row">
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
+                    <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
+                        magna.
+                        Sed varius urna et pulvinar venenatis.
+                    </p>
+                </div>
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
+                        arcu
+                        consequat faucibus.
+                    </p>
+                </div>
+                <div class="testimonial col-4">
+                    <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
+                    <p class="testimonial__text">
+                        Fusce pharetra erat id odio blandit, nec
+                        pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
+                    </p>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="testimonials__delimiter col-8"></div>
+            </div>
+        </div>
+    </section>
 </div>
 
 <!-- JavaScript -->

src/scss/_testimonials.scss

@@ -0,0 +1,42 @@
+.testimonials {
+  position: relative;
+  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
+}
+
+.testimonials__h1 {
+  padding: 100px 0;
+  font-family: Montserrat, sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.testimonials__row {
+  padding-bottom: 100px;
+}
+
+.testimonial {
+  position: relative;
+  text-align: center;
+  min-height: 170px;
+}
+
+.testimonial__logo {
+  padding-bottom: 40px;
+}
+
+.testimonial__text {
+  position: absolute;
+  bottom: 0;
+  font-family: Source Sans Pro, sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+  font-style: italic;
+  color: white;
+}
+
+.testimonials__delimiter {
+  border-bottom: solid 1px $line-dark;
+}

src/scss/_variables.scss

@@ -5,8 +5,10 @@ $regular-text: #848e97;
 $dark-text: #323232;
 
 $background-light: #f4f4f4;
+$background-violet: #4a3b4e;
 
 $line-light: #f4f4f4;
+$line-dark: #655969;
 
 $hover-threshold: 20%;
 $hover-duration: 0.3s;

src/scss/style.scss

@@ -9,4 +9,5 @@
 @import "about";
 @import "feature";
 @import "reviews";
-@import "social";
+@import "social";
+@import "testimonials";