Skip to content

Commit

Permalink
Merge pull request Open-Source-Chandigarh#12 from saurav1207/saurav
Browse files Browse the repository at this point in the history
Added FAQ Section to the Cafe Management Project
  • Loading branch information
Kavyam172 authored Oct 25, 2023
2 parents 87d58a7 + 9d53435 commit d572dfa
Show file tree
Hide file tree
Showing 7 changed files with 244 additions and 0 deletions.
131 changes: 131 additions & 0 deletions faq.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@

.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;
}

.faq-section h2 {
font-size: 28px;
margin-bottom: 20px;
color: #fff;
}

.faq-list {
display: flex;
flex-direction: column;
align-items: center;
}

.faq-item {
width: 100%;
max-width: 600px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

.faq-question {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
font-weight: 600;
}

.faq-question.open {
background-color: #e1e1e1;
}

.arrow {
font-weight: bold;
}

.faq-answer {
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;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 20px;
}

.review {
border: 1px solid #fff;
width: 300px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
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;
}

.reviewer-info span {
font-weight: bold;
font-size: 18px;
color: #fff;
}

.review-content {
margin-top: 10px;
}

.review-content p{
text-align: center;
font-weight: 600;
color: #fff;
}

.star-rating {
font-size: 24px;
margin: 10px 0;
}

.star {
color: #FFD700;
}
95 changes: 95 additions & 0 deletions faq.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="faq.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
Expand Down Expand Up @@ -61,5 +63,98 @@
</div>
</div>
</nav>

<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-list">
<div class="faq-item">
<div class="faq-question">
<span>What is Cafe-Management?</span>
<span class="arrow">+</span>
</div>
<div class="faq-answer">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tenetur voluptatibus in rem, adipisci cupiditate eius possimus dolorem, corrupti, fuga iusto! Animi quas ab iste!
</div>
</div>

<div class="faq-item">
<div class="faq-question">
<span>Do you offer free Wi-Fi for customers?</span>
<span class="arrow">+</span>
</div>
<div class="faq-answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure illum similique recusandae nulla! Facilis libero maiores veritatis molestiae deserunt temporibus ipsum quos quo exercitationem inventore.
</div>
</div>

<div class="faq-item">
<div class="faq-question">
<span>Can I bring my own cake for a special occasion?</span>
<span class="arrow">+</span>
</div>
<div class="faq-answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure illum similique recusandae nulla! Facilis libero maiores veritatis molestiae deserunt temporibus ipsum quos quo exercitationem inventore.
</div>
</div>

</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> John Wick</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>Tom Cruise</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>Taylor Swift</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>
18 changes: 18 additions & 0 deletions faq.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
document.addEventListener("DOMContentLoaded", function () {
const faqQuestions = document.querySelectorAll(".faq-question");

faqQuestions.forEach(function (question) {
question.addEventListener("click", function () {
const answer = question.nextElementSibling;
const arrow = question.querySelector(".arrow");

if (answer.style.display === "block" || getComputedStyle(answer).display === "block") {
answer.style.display = "none";
arrow.textContent = "+";
} else {
answer.style.display = "block";
arrow.textContent = "-";
}
});
});
});
Binary file added images/c1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/c2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/c3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/faqback1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d572dfa

Please sign in to comment.