added customer review section

BowlPulp · Oct 23, 2023 · 93a1d20 · 93a1d20
1 parent 66e5c65
commit 93a1d20
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 0 deletions.
diff --git a/faq.css b/faq.css
@@ -46,3 +46,59 @@
     text-align: left;
     font-size: 18px;
 }
+
+
+/* Customer review section */
+.customer-reviews {
+    padding: 40px 0;
+    text-align: center;
+}
+
+.review-list {
+    display: flex;
+    overflow-x: auto;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    padding: 0 20px; 
+}
+
+.review {
+    border: 1px solid black;
+    width: 300px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.review img {
+    width: 250px;
+    height: 200px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.review span {
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.review-content {
+    margin-top: 10px;
+}
+
+.review-content p{
+    text-align: center;
+    font-weight: 600;
+}
+
+.star-rating {
+    font-size: 24px;
+    margin: 10px 0;
+}
+
+.star {
+    color: #FFD700;
+}
diff --git a/faq.html b/faq.html
@@ -94,6 +94,60 @@ <h2>Frequently Asked Questions</h2>
         </div>
     </section>
 
+    <section class="customer-reviews">
+        <h2>Customer Reviews</h2>
+        <div class="review-list">
+            <div class="review">
+                <div class="reviewer-info">
+                    <img src="./images/c1.jpg" alt="User 2"><br>
+                    <span>Satvic</span>
+                </div>
+                <div class="review-content">
+                    <div class="star-rating">
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                    </div>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas consequuntur molestias.</p>
+                </div>
+            </div>
+            <div class="review">
+                <div class="reviewer-info">
+                    <img src="./images/c2.jpg" alt="User 1"><br>
+                    <span>Suthar</span>
+                </div>
+                <div class="review-content">
+                    <div class="star-rating">
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                    </div>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, perferendis.</p>
+                </div>
+            </div>
+            <div class="review">
+                <div class="reviewer-info">
+                    <img src="./images/c3.jpg" alt="User 1"><br>
+                    <span>Soji</span>
+                </div>
+                <div class="review-content">
+                    <div class="star-rating">
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                        <span class="star">&#9733;</span>
+                    </div>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas consequuntur molestias.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <script src="faq.js"></script>
 </body>
 </html>
diff --git a/images/c1.jpg b/images/c1.jpg
diff --git a/images/c2.jpg b/images/c2.jpg
diff --git a/images/c3.jpg b/images/c3.jpg