Skip to content

Commit

Permalink
Added Rate Us option
Browse files Browse the repository at this point in the history
  • Loading branch information
@sailaja-adapa
sailaja-adapa committed Jul 2, 2024
1 parent 25d7f6a commit f2e8086
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 0 deletions.
104 changes: 104 additions & 0 deletions Css-files/RateUs.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
/* General Styles for Body */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-image: url('../Images/RateUs.avif');
background-size: cover;
background-repeat: no-repeat;
padding-top: 60px; /* Adjust padding to account for fixed navbar */
}

.rateus-container {
width: 40%; /* Decreased width */
max-width: 600px; /* Maximum width */
height: 80%; /* Increased height */
padding: 30px; /* Increased padding */
border: 2px solid black;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px; /* Adjust margin-top as needed */
}

.rateus-container:hover {
transform: scale(1.02);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 80px rgba(255, 255, 255, 0.3);
filter: brightness(1.0);
}

/* Heading Styles */
.rateus-heading {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}

/* Star Rating Styles */
.star-rating {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.star {
font-size: 30px;
color: #ccc;
cursor: pointer;
transition: color 0.3s;
}

.star:hover,
.star.selected {
color: #ffcc00;
}

/* Textarea Styles */
.feedback-textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
color: black;
transition: border-color 0.3s;
}

.feedback-textarea:focus {
outline: none;
border-color: #ffcc00;
}

/* Submit Button Styles */
.submit-button {
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #ffcc00;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}

.submit-button:hover {
background-color: #e6b800;
transform: translateY(-2px);
}

.submit-button:active {
background-color: #cc9900;
transform: translateY(0);
}
142 changes: 142 additions & 0 deletions Html-files/RateUs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rate Us - Food Ordering Website</title>
<link href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
<link rel="stylesheet" href="../Css-files/scroll-top-button.css" />
<link rel="stylesheet" href="../Css-files/content.css" />
<link rel="stylesheet" href="../Css-files/navbar.css" />
<link rel="stylesheet" href="../Css-files/footer.css" />
<link rel="stylesheet" href="../Css-files/RateUs.css" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a href="../index.html" class="navbar-brand opacity-75 flex-fill">
<img src="../Images/logo/Foodielogo.png" height="40" />
</a>
<button
class="navbar-toggler order-1"
type="button"
data-bs-toggle="collapse"
data-bs-target=".hamburgeritems"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0"
>
<ul class="navbar-nav center-links">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="../index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../Html-files/menu.html">Menu</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link services"
href="../Html-files/services.html"
aria-expanded="false"
>Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Ordering options</a></li>
<li><a class="dropdown-item" href="#">Order Tracking</a></li>
<li><a class="dropdown-item" href="#">Customer Support</a></li>
<li><a class="dropdown-item" href="#">FAQS</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/offers.html">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/offers.html">Rate Us</a>
</li>
</ul>
</div>
<div class="order-0 ml-auto p-2">
<img
class="nav-link"
src="../Images/navbar/sun.png"
id="theme-toggle-icon"
alt="theme toggler button"
/>
</div>
<div class="collapse navbar-collapse hamburgeritems enddiv order-3">
<ul class="navbar-nav end-links">
<li class="nav-item">
<a class="nav-link" href="../Html-files/login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/signup.html">Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/cart.html">
Cart
<i class="fa-solid fa-cart-shopping"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="rateus-container">
<h2 class="rateus-heading">Rate Us</h2>
<div class="star-rating">
<i class="fa fa-star star" id="star1" onclick="rateStar(1)"></i>
<i class="fa fa-star star" id="star2" onclick="rateStar(2)"></i>
<i class="fa fa-star star" id="star3" onclick="rateStar(3)"></i>
<i class="fa fa-star star" id="star4" onclick="rateStar(4)"></i>
<i class="fa fa-star star" id="star5" onclick="rateStar(5)"></i>
</div>
<textarea class="feedback-textarea" placeholder="Leave your feedback here..." rows="4"></textarea>
<button class="submit-button">Submit</button>
</div>

<footer>
<!-- Footer content here -->
</footer>

<button id="scroll-top-button" class="scroll-top-button" onclick="goToTop()">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white" class="arrow">
<path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/>
</svg>
</button>

<script>
document.getElementById("copyright-year").textContent = new Date().getFullYear();

function rateStar(star) {
for (let i = 1; i <= 5; i++) {
const starElement = document.getElementById(`star${i}`);
starElement.classList.remove('selected');
if (i <= star) {
starElement.classList.add('selected');
}
}
}
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
easing: "ease",
once: false,
});
</script>
</body>
</html>
Binary file added Images/RateUs.avif
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@
<li class="nav-item">
<a class="nav-link" href="Html-files/offers.html">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/RateUs.html">Rate Us</a>
</li>
</ul>
</div>
<div class="order-0 ml-auto p-2">
Expand Down

0 comments on commit f2e8086

Please sign in to comment.