Skip to content

Commit

Permalink
Merge pull request #500 from tejas-130704/main
Browse files Browse the repository at this point in the history 
make the navbar responsive
  • Loading branch information
@khushi-joshi-05
khushi-joshi-05 authored May 25, 2024
2 parents 003404d + 7c82e7a commit 9b511cd
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 46 deletions.
65 changes: 33 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>

</head>
Expand All @@ -36,11 +36,16 @@
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><b>Foodie</b></a>
<a class="navbar-brand fw-bold" href="index.html"><b>Foodie</b></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.html">Home</a>
<li class="nav-item mb-2">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/menu.html">Menu</a>
Expand All @@ -49,27 +54,23 @@
<a class="nav-link" href="Html-files/services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link " href="Html-files/contact.html">Contact Us</a>
<a class="nav-link" href="Html-files/contact.html">Contact Us</a>
</li>


</ul>

</div>
<div class="d-flex p-2">
<li class="nav-item"><a class="nav-btn" onclick="redirectLogin()">Login</a></li>
<li class="nav-item"><a class="nav-btn" onclick="redirectSignup()">Sign Up</a></li>
<li class="nav-item">
<a class="nav-btn " href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
<div class="d-flex p-2 navbar-nav">
<ul class="navbar-nav d-flex flex-wrap me-auto mb-2 mb-lg-0 gap-3" style="width: 100%;">
<li class="nav-item px-3"><a class="nav-btn" onclick="redirectLogin()">Login</a></li>
<li class="nav-item px-3"><a class="nav-btn" onclick="redirectSignup()">Sign Up</a></li>
<li class="nav-item px-3">
<a class="nav-btn" href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>

</div>
</nav>


<!--Navbar End-->

<section class="intro_container">
Expand All @@ -88,7 +89,7 @@ <h1 class="poppins-light">Get <span> 30% OFF </span> on your first order!</h1>
<h1 class="poppins-light">Get <span> 30% OFF </span> on your first order!</h1>
<h1 class="poppins-light">Get <span> 30% OFF </span> on your first order!</h1>
</div>
</div>
</div>

<h1 class="h-primary center">"Savor the Flavors: Discover What Sets Our Restaurant's Cuisine Apart!"</h1>

Expand Down Expand Up @@ -132,17 +133,17 @@ <h1>Bringing <br>happiness<br> to you</h1>
</div>
<div class="box">
<h1>Online Delivery</h1><br>
<a href="#">Order Online</a>
<a href="#" class="btn">Order Online</a>

</div>
<div class="box">
<h1>Click & Collect</h1><br>
<a href="#">Take out Order</a>
<a href="#" class="btn">Take out Order</a>

</div>
<div class="box">
<h1>Restaurant Dining</h1><br>
<a href="#">Book Table</a>
<a href="#" class="btn">Book Table</a>

</div>
</div>
Expand Down Expand Up @@ -210,7 +211,7 @@ <h3>Juices</h3>
</div> -->

<section class="section-meals" data-aos="fade-in" data-aos-duration="2000">
<ul class="meals-showcase clearfix">
<ul class="meals-showcase clearfixX">
<li>
<figure class="meal-photo">
<img src="Images/1.jpg" alt="food-image">
Expand Down Expand Up @@ -375,14 +376,14 @@ <h4>Follow Us</h4>
btn.onclick = () => {
location.href = "./Html-files/menu.html"
}
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.navbar');
if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
window.addEventListener('scroll', function () {
var navbar = document.querySelector('.navbar');
if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});

</script>

Expand Down
61 changes: 47 additions & 14 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
body {
background-color: black;
}

.navbar {
padding: 8px 0px;
height: 60px;
Expand All @@ -26,25 +25,56 @@ body {
color: white;
font-size: 1.3rem;
}

/* Navbar link hover effect */
.navbar a:hover,
.navbar.scrolled a:hover {
color :#fff;
color: #fff;
border-bottom: 1px solid #fff; /* Add bottom border on hover */
border-top: 1px solid #fff; /* Add top border on hover */
}
s

.navbar.fixed-top {
position: fixed;
top: 0;
width: 100%;
z-index: 1030;
}

.navbar.scrolled {
background-color: rgb(176, 63, 63);
background-color: rgba(176, 63, 63, 0.6);
backdrop-filter: blur(10px);
color: #fff;
}

/* Additional CSS to adjust the navbar on smaller screens */
.navbar-toggler {
border: none;
background-color: transparent;
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 992px) {
.navbar-nav {
text-align: center;
}

.navbar-nav .nav-item {
margin-bottom: 10px;
}
.navbar-nav .nav-link {
font-size: 1.2rem;
}

.navbar-collapse {
background-color: rgba(175, 63, 62, 1);
}
}


.intro_container {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -79,21 +109,22 @@ s
}

.intro_container button {

margin-top: 20px;
background-color: brown;
color: white;
background-color: white;
color: brown;
border: 2px solid rgb(139, 36, 36);
width: 170px;
height: 35px;
border-radius: 4px;
border-radius: 10px;
font-size: 1.3rem;
font-family: "Bree Serif", serif;
font-family:Arial, Helvetica, sans-serif;
padding-bottom: 4px;
}

.intro_container button:hover {
background-color: white;
color: brown;
background-color: brown;
color: white;
cursor: pointer;
}

Expand All @@ -105,14 +136,14 @@ s
#about {
/* margin: 34px; */
display: flex;
justify-content: center;
justify-content:center;
align-items: center;
}

#about .box {
border: 2px solid brown;
padding: 34px;
margin: 2px 55px;
margin: 2px 40px;
border-radius: 28px;
background: #f2f2f2;
margin-bottom: 20px;
Expand Down Expand Up @@ -377,8 +408,9 @@ s
}

.move {
background-color: rgb(147, 22, 33);
height: 60px;
/* background-color: rgb(147, 22, 33); */
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.145);
height: 50px;
}

.move .text {
Expand Down Expand Up @@ -856,6 +888,7 @@ padding-left:2px;

#marque {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
white-space: nowrap;
Expand Down

0 comments on commit 9b511cd

Please sign in to comment.