Worked on styling

BowlPulp · Oct 25, 2023 · 9d53435 · 9d53435
1 parent 537aea0
commit 9d53435
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/faq.css b/faq.css
@@ -1,9 +1,9 @@
-#saufaq{
-    background-image: url(./images/faqback1.png);
-    background-size: cover;
-}
 
 .faq-section {
+    background-image: url('./images/cafe.webp');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
     overflow-x: hidden;
     text-align: center;
     padding: 2rem;
@@ -12,6 +12,7 @@
 .faq-section h2 {
     font-size: 28px;
     margin-bottom: 20px;
+    color: #fff;
 }
 
 .faq-list {
@@ -50,15 +51,29 @@
     padding: 10px;
     text-align: left;
     font-size: 18px;
+    color: #fff;
 }
 
+.faq-answer:hover{
+    background-color:rgb(195, 93, 38);
+}
 
 /* Customer review section */
 .customer-reviews {
+    background-image: url('./images/cafe.webp');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
     padding: 40px 0;
     text-align: center;
 }
 
+.customer-reviews h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
 .review-list {
     display: flex;
     overflow-x: auto;
@@ -69,7 +84,7 @@
 }
 
 .review {
-    border: 1px solid black;
+    border: 1px solid #fff;
     width: 300px;
     padding: 20px;
     display: flex;
@@ -78,16 +93,22 @@
     text-align: center;
 }
 
+.review:hover{
+    background: rgb(195, 93, 38);
+}
+
 .review img {
     width: 250px;
     height: 200px;
     border-radius: 5px;
+    border: 2px solid #fff;
     margin-bottom: 10px;
 }
 
-.review span {
+.reviewer-info span {
     font-weight: bold;
     font-size: 18px;
+    color: #fff;
 }
 
 .review-content {
@@ -97,6 +118,7 @@
 .review-content p{
     text-align: center;
     font-weight: 600;
+    color: #fff;
 }
 
 .star-rating {

diff --git a/faq.html b/faq.html
@@ -58,7 +58,6 @@
         </div>
     </nav>
 
-<div id="saufaq">
     <section class="faq-section">
         <h2>Frequently Asked Questions</h2>
         <div class="faq-list">
@@ -101,7 +100,7 @@ <h2>Customer Reviews</h2>
             <div class="review">
                 <div class="reviewer-info">
                     <img src="./images/c1.jpg" alt="User 2"><br>
-                    <span>Satvic</span>
+                    <span> John Wick</span>
                 </div>
                 <div class="review-content">
                     <div class="star-rating">
@@ -117,7 +116,7 @@ <h2>Customer Reviews</h2>
             <div class="review">
                 <div class="reviewer-info">
                     <img src="./images/c2.jpg" alt="User 1"><br>
-                    <span>Suthar</span>
+                    <span>Tom Cruise</span>
                 </div>
                 <div class="review-content">
                     <div class="star-rating">
@@ -133,7 +132,7 @@ <h2>Customer Reviews</h2>
             <div class="review">
                 <div class="reviewer-info">
                     <img src="./images/c3.jpg" alt="User 1"><br>
-                    <span>Soji</span>
+                    <span>Taylor Swift</span>
                 </div>
                 <div class="review-content">
                     <div class="star-rating">
@@ -148,7 +147,7 @@ <h2>Customer Reviews</h2>
             </div>
         </div>
     </section>
-</div>
+
 
     <script src="faq.js"></script>
 </body>

diff --git a/images/c3.jpg b/images/c3.jpg