Skip to content

Commit a4fb00d

Browse files
aayush105aayush105
authored
Merge pull request #924 from arorasneha08/fix/navbar-ui
Fix navbar responsiveness and improve UI
2 parents 91c6bde + 63153e4 commit a4fb00d

File tree

2 files changed

+104
-75
lines changed

2 files changed

+104
-75
lines changed

‎Travelling Website/index.html‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,37 @@
1616

1717
<body>
1818
<header>
19-
<div class="navbar">
20-
<div class="navbarleft">
21-
<img src="logo-removebg-preview.png" alt="" width="180px" height="180px" />
22-
<ul>
23-
<li><a href="">Flight+Hotel</a></li>
24-
<li><a href="">Hotel & Homes</a></li>
25-
<li><a href="">Flights</a></li>
26-
<li><a href="">Coupons and Deals</a></li>
27-
<li><a href="">Airport Transfer</a></li>
28-
<li><a href="">Activities</a></li>
29-
</ul>
19+
<nav class="navbar">
20+
<div class="logo">
21+
<img src="logo-removebg-preview.png" alt="Logo">
22+
</div>
3023

31-
<ul class="rightitems">
32-
<li><a href="" class="signin">Sign in</a></li>
33-
<li><a href="" class="account">Create Account</a></li>
34-
<li><a href=""><i class="fa-solid fa-cart-shopping fa-xl"></i></a></li>
35-
<li><a href=""><i class="fa-solid fa-bars fa-xl"></i></a></li>
36-
</ul>
24+
<input type="checkbox" id="menu-toggle" />
25+
<label for="menu-toggle" class="menu-icon">
26+
<i class="fa-solid fa-bars"></i>
27+
</label>
28+
29+
<ul class="nav-links">
30+
<li><a href="#">Flight+Hotel</a></li>
31+
<li><a href="#">Hotel & Homes</a></li>
32+
<li><a href="#">Flights</a></li>
33+
<li><a href="#">Coupons & Deals</a></li>
34+
<li><a href="#">Airport Transfer</a></li>
35+
<li><a href="#">Activities</a></li>
36+
</ul>
37+
38+
<div class="nav-actions">
39+
<a href="#" class="signin">Sign in</a>
40+
<a href="#" class="account">Create Account</a>
41+
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
3742
</div>
38-
</div>
43+
</nav>
3944

4045
<div class="navbar2">
4146
<h1>"Explore More, Worry Less"</h1>
4247
</div>
4348
</header>
49+
4450
<main>
4551
<div class="page1">
4652
<div class="heroimg">

‎Travelling Website/style.css‎

Lines changed: 80 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -24,89 +24,112 @@ header {
2424
width: 100%;
2525
}
2626

27-
2827
.navbar {
29-
display: flex;
30-
justify-content: space-evenly;
28+
background-color: var(--secondary-color);
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
padding: 10px 30px;
33+
position: relative;
34+
z-index: 1000;
3135
}
3236

33-
.navbarleft {
34-
width: 100%;
35-
height: 8vh;
36-
background-color: #EDC7B7;
37-
box-shadow: 0px 2px 50px black;
38-
display: flex;
39-
padding: 5px 25px;
40-
align-items: center;
41-
justify-content: space-between;
37+
.logo img {
38+
width: 150px;
39+
height: 60px;
4240
}
4341

44-
.navbarleft ul {
45-
display: flex;
46-
flex-direction: row;
47-
padding: 20px;
48-
justify-content: space-around;
49-
align-items: center;
42+
.nav-links {
43+
list-style: none;
44+
display: flex;
45+
gap: 25px;
5046
}
5147

52-
.navbarleft ul li {
53-
padding: 0px 10px;
54-
list-style: none;
48+
.nav-links li a {
49+
text-decoration: none;
50+
color: var(--dark-text-color);
51+
font-weight: bold;
52+
transition: color 0.3s;
5553
}
5654

57-
.navbarleft ul li a {
58-
text-decoration: none;
59-
display: inline-block;
60-
font-size: 15px;
61-
color: #123C69;
55+
.nav-links li a:hover {
56+
color: var(--primary-color);
6257
}
6358

64-
.navbarleft a:hover {
65-
text-shadow: 0px 0px 0.25px #123C69;
59+
.nav-actions {
60+
display: flex;
61+
align-items: center;
62+
gap: 15px;
6663
}
6764

68-
.navbar2 {
69-
width: 100%;
70-
height: 7vh;
71-
background-color: #123C69;
72-
align-items: center;
73-
justify-content: center;
74-
display: flex;
75-
padding: 10px;
65+
.nav-actions a {
66+
color: var(--dark-text-color);
67+
text-decoration: none;
68+
font-weight: bold;
69+
}
7670

71+
.signin,
72+
.account {
73+
border: 2px solid var(--primary-color);
74+
padding: 8px 12px;
75+
border-radius: 5px;
76+
transition: 0.3s;
7777
}
7878

79-
.navbar2 h1 {
80-
color: #EDC7B7;
81-
font-size: 28px;
82-
font-weight: 100;
79+
.signin:hover,
80+
.account:hover {
81+
background-color: var(--primary-color);
82+
color: white;
8383
}
8484

85-
.signin {
86-
border: 2px solid;
87-
padding: 10px;
88-
border-radius: 5px;
89-
transition: 0.5s;
85+
.menu-icon {
86+
display: none;
87+
font-size: 24px;
88+
cursor: pointer;
89+
color: var(--dark-text-color);
9090
}
9191

92-
.signin:hover {
93-
background-color: #123C69;
94-
color: white;
92+
#menu-toggle {
93+
display: none;
9594
}
9695

97-
.account {
98-
border: 2px solid #123C69;
99-
border-radius: 5px;
100-
padding: 10px;
101-
transition: 0.5s;
96+
/* ---------- Responsive ---------- */
97+
@media (max-width: 992px) {
98+
.nav-links {
99+
display: none;
100+
flex-direction: column;
101+
position: absolute;
102+
top: 80px;
103+
left: 0;
104+
width: 100%;
105+
background-color: var(--secondary-color);
106+
padding: 20px 0;
107+
text-align: center;
108+
gap: 20px;
109+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
110+
}
111+
112+
#menu-toggle:checked + .menu-icon + .nav-links {
113+
display: flex;
114+
}
115+
116+
.menu-icon {
117+
display: block;
118+
}
119+
120+
.nav-actions {
121+
display: none;
122+
}
102123
}
103124

104-
.account:hover {
105-
background-color: #123C69;
106-
color: white;
125+
.navbar2 {
126+
background-color: var(--primary-color);
127+
color: var(--secondary-color);
128+
text-align: center;
129+
padding: 10px 0;
107130
}
108131

109-
.flight-booking {
132+
.flight-booking {
110133
background: #f9fbff;
111134
border-radius: 16px;
112135
padding: 25px;

0 commit comments

Comments
 (0)