Skip to content

Commit 4baea49

Browse files
saiprasadm45saiprasadm45
committed
building reallife scenerios.
1 parent 8554302 commit 4baea49

File tree

3 files changed

+142
-0
lines changed

3 files changed

+142
-0
lines changed

‎07_Projects/07_ResponsiveNavbar&FaQ/blank.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
let btn = document.getElementById('hambtn')
2+
let navlist = document.getElementById('ul')
3+
4+
btn.addEventListener('click',()=>{
5+
console.log("e")
6+
navlist.classList.toggle('show')
7+
})

‎07_Projects/07_ResponsiveNavbar&FaQ/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10+
</head>
11+
12+
<body>
13+
<div class="wrapper">
14+
<nav>
15+
<p><a href="#"><span>S</span>upraC</a></p>
16+
<ul id="ul">
17+
<li>Product</li>
18+
<li>Pricing</li>
19+
<li>Accomodation</li>
20+
<li>RealEstate</li>
21+
<li>Seminars</li>
22+
</ul>
23+
<div class="btns">
24+
<button> Sign Up</button>
25+
<button> Sign in</button>
26+
</div>
27+
<i id="hambtn" class="hamburger fa-solid fa-bars"></i>
28+
</nav>
29+
30+
</div>
31+
<script src="blank.js"></script>
32+
</body>
33+
34+
</html>

‎07_Projects/07_ResponsiveNavbar&FaQ/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
background-color: papayawhip;
8+
9+
min-height: 100vh;
10+
text-decoration: none;
11+
width: 100%;
12+
}
13+
a{
14+
color: white;
15+
text-decoration: none;
16+
font-size: 2rem;
17+
}
18+
span{
19+
color:aqua;
20+
font-weight: 800;
21+
}
22+
nav{
23+
display: flex;
24+
border: 2px solid blue;
25+
justify-content: space-between;
26+
align-items: center;
27+
padding: 0.5rem 2rem;
28+
background-color: seagreen;
29+
color: white;
30+
width: 100%;
31+
position: relative;
32+
}
33+
ul{
34+
display: flex;
35+
gap: 1rem;
36+
}
37+
ul li{
38+
list-style: none;
39+
font-size: 1.2rem;
40+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
41+
}
42+
button{
43+
padding: 0.5rem 1rem;
44+
border: none;
45+
border-radius: 10px;
46+
margin-left: 1rem;
47+
font-size: 1.1rem;
48+
color: white;
49+
background-color: sandybrown;
50+
}
51+
i.hamburger{
52+
display: none;
53+
/* border: 2px solid red; */
54+
}
55+
@media (max-width: 970px){
56+
nav ul{
57+
position: absolute;
58+
top: 50px; /* Position it right below the nav bar */
59+
left: 0;
60+
width: 100%;
61+
background-color: seagreen;
62+
63+
/* --- FIX: Use max-height for smooth transition --- */
64+
max-height: 0; /* Start with max-height 0 to hide it */
65+
overflow: hidden; /* Hide the content that overflows the 0 height */
66+
transition: max-height 0.5s ease-in-out; /* Animate the max-height property */
67+
68+
/* Keep these for layout */
69+
display: flex;
70+
flex-direction: column;
71+
text-align: center;
72+
gap: 1.2rem;
73+
padding: 0 0.5rem; /* Remove top/bottom padding when hidden */
74+
}
75+
76+
/* The .show class now only changes max-height and padding */
77+
.show{
78+
max-height: 300px; /* Set a height large enough for your content */
79+
padding: 1rem 0.5rem; /* Add padding back when it's visible */
80+
}
81+
82+
li{
83+
/* border: 2px solid black; */ /* Optional: remove for cleaner look */
84+
padding: 0.5rem 0;
85+
}
86+
.btns{
87+
display: none;
88+
}
89+
i.hamburger{
90+
display: block;
91+
font-size: 1.5rem;
92+
z-index: 10;
93+
}
94+
95+
96+
}
97+
@media (max-width: 565px){
98+
nav{
99+
padding-inline: 1rem;
100+
}
101+
}

0 commit comments

Comments
 (0)