opinion-section completed

src/css/styles.css

@@ -64,10 +64,11 @@ ol {
   background-repeat: no-repeat;
   background-size: 1440px; */
   width: 100%;
-  height: 696px;
+  min-height: 696px;
   margin: 0 auto;
-  background-image: linear-gradient(to bottom, #fff, #e2f1ff);
   padding-top: 20px;
+  background-image: linear-gradient(to bottom, #fff, #e2f1ff);
+  clip-path: polygon(0 0, 100% 0, 100% 83%, 0% 100%);
 }
 
 .navigation {
@@ -465,3 +466,58 @@ ol {
   width: 600px;
   height: 400px;
 }
+
+/**
+  |============================
+  | OPINION SECTION
+  |============================
+*/
+.opinion-section {
+  padding-bottom: 205px;
+}
+
+.main-opinion-container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 700px;
+  max-width: 964px;
+}
+
+.opinion-heading {
+  text-align: center;
+  font-size: 24px;
+  color: var(--black-text);
+  margin-bottom: 32px;
+}
+
+.feedback-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.man-image {
+  border-radius: 50%;
+  margin-bottom: 32px;
+}
+
+.opinion-p {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 64px;
+}
+
+.opinion-list {
+  display: flex;
+  gap: 91px;
+}
+
+.skewed {
+  clip-path: polygon(100% 6%, 100% 83%, 0 100%, 0 25%);
+  background-image: linear-gradient(to bottom, #f9f0ff, #e2f1ff);
+  z-index: -1;
+}

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Page title</title>
-    <link rel="stylesheet" href="/src/css/styles.css" />
+    <link rel="stylesheet" href="./css/styles.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -250,7 +250,65 @@ <h3 class="engineer-heading">Data-driven pipelines in minutes</h3>
           </div>
         </div>
       </section>
-      <section class="opinion-section"></section>
+
+      <!-- Companies feedback -->
+      <section class="opinion-section">
+        <div class="skewed">
+          <div class="container main-opinion-container">
+            <h3 class="opinion-heading">
+              "What I love about Qubly is the easy way we can collaborate even
+              if there is a lot of people involved in the process"
+            </h3>
+            <div class="feedback-container">
+              <img
+                class="man-image"
+                src="./images/person-image.jpg"
+                alt="Man's portrait"
+                width="80"
+              />
+              <p class="opinion-p">
+                Guillaume Cabane <br />
+                CTO @ BigSpring
+              </p>
+            </div>
+
+            <ul class="list opinion-list">
+              <li class="opinion-list-item">
+                <img
+                  src="./images/companies/Tonkean.png"
+                  alt="Company name - Tonkean"
+                />
+              </li>
+              <li class="opinion-list-item">
+                <img
+                  src="./images/companies/BigSpring.png"
+                  alt="Company name - BigSpring"
+                />
+              </li>
+              <li class="opinion-list-item">
+                <img
+                  src="./images/companies/Clearbit.png"
+                  alt="Company name - Clearbit"
+                />
+              </li>
+              <li class="opinion-list-item">
+                <img
+                  src="./images/companies/Mine.png"
+                  alt="Company name - Mine"
+                />
+              </li>
+              <li class="opinion-list-item">
+                <img
+                  src="./images/companies/Shake.png"
+                  alt="Company name - Shake"
+                />
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- Sign-up form section -->
       <section class="form-section"></section>
     </main>
     <footer></footer>