Skip to content

Commit f70f330

Browse files
aayush105aayush105
authored
Merge pull request #851 from Prasoon52/master
making hamburger menu operational in mobile view
2 parents b46f0ce + df9080d commit f70f330

File tree

1 file changed

+87
-37
lines changed

1 file changed

+87
-37
lines changed

‎Landing Page/index.html‎

Lines changed: 87 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,85 @@
2020
.nav-item:hover::after {
2121
transform: scaleX(1);
2222
}
23+
24+
/* --- CSS FOR MOBILE SIDEBAR (TOP-RIGHT ALIGNED) --- */
25+
26+
@media (max-width: 767px) {
27+
.nav-links {
28+
position: fixed;
29+
top: 0;
30+
/* MODIFICATION 1: Position back to the right edge */
31+
right: 0;
32+
height: 100vh;
33+
width: 75%;
34+
max-width: 300px;
35+
background-color: #111827;
36+
z-index: 50;
37+
display: flex;
38+
flex-direction: column;
39+
40+
/* MODIFICATION 2: Align items to the start (left) of the sidebar */
41+
align-items: flex-start;
42+
43+
/* MODIFICATION 3: Justify content to the start (top) */
44+
justify-content: flex-start;
45+
46+
/* MODIFICATION 4: Add padding for spacing */
47+
padding-top: 5rem;
48+
padding-left: 2rem;
49+
50+
/* MODIFICATION 5: Change transform back to horizontal slide */
51+
transform: translateX(100%);
52+
transition: transform 0.3s ease-in-out;
53+
}
54+
55+
#menu-toggle:checked ~ .nav-links {
56+
/* MODIFICATION 6: Show menu by sliding it in from the right */
57+
transform: translateX(0);
58+
}
59+
60+
.nav-links li {
61+
width: 80%;
62+
/* MODIFICATION 7: Align text to the left for readability */
63+
text-align: left;
64+
padding-bottom: 0.75rem;
65+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
66+
}
67+
.nav-links li:last-child {
68+
border-bottom: none;
69+
}
70+
.nav-links li a {
71+
display: inline-block;
72+
padding-top: 0.75rem;
73+
}
74+
}
2375
</style>
2476
</head>
2577
<body class="bg-gray-900 text-white">
26-
<!-- Navbar -->
27-
<nav class="bg-gray-800 p-4 transition-shadow duration-300 hover:shadow-lg hover:shadow-red-500/50 hover:shadow-green-500/50 hover:shadow-blue-500/50">
78+
<nav class="bg-gray-800 p-4 sticky top-0 z-10">
2879
<div class="container mx-auto flex justify-between items-center">
2980
<a href="#" class="text-2xl font-bold">E-Shop</a>
30-
<input type="checkbox" id="menu-toggle" class="hidden peer">
81+
<input type="checkbox" id="menu-toggle" class="hidden">
3182
<label for="menu-toggle" class="menu-button text-white cursor-pointer md:hidden">
3283
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3384
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
3485
</svg>
3586
</label>
36-
<ul class="nav-links flex-col space-y-4 md:flex md:flex-row md:space-y-0 md:space-x-4 hidden peer-checked:flex">
37-
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/50 hover:shadow-green-500/50 hover:shadow-blue-500/50">Home</a></li>
38-
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/50 hover:shadow-green-500/50 hover:shadow-blue-500/50">Shop</a></li>
39-
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/50 hover:shadow-green-500/50 hover:shadow-blue-500/50">About</a></li>
40-
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/50 hover:shadow-green-500/50 hover:shadow-blue-500/50">Contact</a></li>
87+
88+
<ul class="nav-links md:flex md:flex-row md:space-x-4">
89+
<li class="absolute top-5 left-5 md:hidden">
90+
<label for="menu-toggle" class="cursor-pointer">
91+
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
92+
</label>
93+
</li>
94+
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md text-xl md:text-base hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110">Home</a></li>
95+
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md text-xl md:text-base hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110">Shop</a></li>
96+
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md text-xl md:text-base hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110">About</a></li>
97+
<li><a href="#" class="nav-item relative px-3 py-2 rounded-md text-xl md:text-base hover:bg-gradient-to-r from-white/10 to-white/20 transition-transform duration-300 hover:scale-110">Contact</a></li>
4198
</ul>
4299
</div>
43100
</nav>
44101

45-
<!-- Header -->
46102
<header class="bg-cover bg-center h-screen fill-current" style="background-image: url('https://t3.ftcdn.net/jpg/05/35/13/82/360_F_535138292_62ZnI4Hcw37J8Jaeg4E9TzJwUciCwSnp.jpg');">
47103
<div class="container mx-auto h-full flex items-center justify-center">
48104
<div class="text-center animate-fade-in">
@@ -53,12 +109,11 @@ <h1 class="text-5xl font-bold mb-4">Welcome to E-Shop</h1>
53109
</div>
54110
</header>
55111

56-
<!-- Main Content -->
57112
<main class="py-12 bg-gray-100 text-gray-900">
58-
<div class="container mx-auto text-center">
113+
<div class="container mx-auto text-center px-4">
59114
<h2 class="text-3xl font-bold mb-8 animate-fade-in">About Us</h2>
60115
<div class="flex flex-col md:flex-row items-center">
61-
<img src="https://kinsta.com/wp-content/uploads/2021/11/about-us-page.png" alt="About Us" class="h-96 w-2/4 mb-8 md:mb-0 md:mr-8 rounded-lg transform transition duration-500 hover:scale-105">
116+
<img src="https://kinsta.com/wp-content/uploads/2021/11/about-us-page.png" alt="About Us" class="w-full md:w-1/2 mb-8 md:mb-0 md:mr-8 rounded-lg transform transition duration-500 hover:scale-105">
62117
<p class="text-lg animate-fade-in text-justify">
63118
Welcome to E-Shop, your number one source for all things [product, ie: shoes, electronics, etc.]. We're dedicated to giving you the very best of [product], with a focus on dependability, customer service, and uniqueness.
64119
Founded in [year] by [founder name], E-Shop has come a long way from its beginnings in a [starting location, ie: home office, toolshed, Houston, TX.]. When [founder name] first started out, [his/her/their] passion for [brand message - ie: "eco-friendly cleaning products"] drove them to [action: quit day job, do tons of research, etc.] so that E-Shop can offer you [competitive differentiator - ie: "the world's most advanced toothbrush"]. We now serve customers all over [place - town, country, the world], and are thrilled that we're able to turn our passion into our own website.
@@ -69,34 +124,29 @@ <h2 class="text-3xl font-bold mb-8 animate-fade-in">About Us</h2>
69124
</div>
70125
</main>
71126

72-
<!-- Customer Testimonials -->
73-
<section class="py-12 bg-white text-gray-900">
74-
<div class="container mx-auto text-center">
75-
<h2 class="text-3xl font-bold mb-8 animate-fade-in">Customer Testimonials</h2>
76-
<div class="flex flex-col md:flex-row items-center justify-center">
77-
<!-- Testimonial 1 -->
78-
<div class="max-w-sm mx-4 mb-8 md:mb-0">
79-
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer 1" class="h-24 w-24 rounded-full mx-auto mb-4">
80-
<h3 class="text-xl font-semibold mb-2">Jane Doe</h3>
81-
<p class="text-lg">"E-Shop has the best products I've ever used. Their customer service is top-notch!"</p>
82-
</div>
83-
<!-- Testimonial 2 -->
84-
<div class="max-w-sm mx-4 mb-8 md:mb-0">
85-
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer 2" class="h-24 w-24 rounded-full mx-auto mb-4">
86-
<h3 class="text-xl font-semibold mb-2">John Smith</h3>
87-
<p class="text-lg">"I love shopping at E-Shop. They always have what I need and more!"</p>
88-
</div>
89-
<!-- Testimonial 3 -->
90-
<div class="max-w-sm mx-4 mb-8 md:mb-0">
91-
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer 3" class="h-24 w-24 rounded-full mx-auto mb-4">
92-
<h3 class="text-xl font-semibold mb-2">Emily Johnson</h3>
93-
<p class="text-lg">"Fast shipping and great quality products. Highly recommend E-Shop!"</p>
127+
<section class="py-12 bg-white text-gray-900">
128+
<div class="container mx-auto text-center px-4">
129+
<h2 class="text-3xl font-bold mb-8 animate-fade-in">Customer Testimonials</h2>
130+
<div class="flex flex-col md:flex-row items-center justify-center">
131+
<div class="max-w-sm mx-4 mb-8 md:mb-0">
132+
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer 1" class="h-24 w-24 rounded-full mx-auto mb-4">
133+
<h3 class="text-xl font-semibold mb-2">Jane Doe</h3>
134+
<p class="text-lg">"E-Shop has the best products I've ever used. Their customer service is top-notch!"</p>
135+
</div>
136+
<div class="max-w-sm mx-4 mb-8 md:mb-0">
137+
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer 2" class="h-24 w-24 rounded-full mx-auto mb-4">
138+
<h3 class="text-xl font-semibold mb-2">John Smith</h3>
139+
<p class="text-lg">"I love shopping at E-Shop. They always have what I need and more!"</p>
140+
</div>
141+
<div class="max-w-sm mx-4 mb-8 md:mb-0">
142+
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer 3" class="h-24 w-24 rounded-full mx-auto mb-4">
143+
<h3 class="text-xl font-semibold mb-2">Emily Johnson</h3>
144+
<p class="text-lg">"Fast shipping and great quality products. Highly recommend E-Shop!"</p>
145+
</div>
94146
</div>
95147
</div>
96-
</div>
97-
</section>
148+
</section>
98149

99-
<!-- Footer -->
100150
<footer class="bg-gray-800 py-6">
101151
<div class="container mx-auto text-center">
102152
<p class="mb-4">Contact us at: <a href="mailto:[email protected]" class="text-blue-500">[email protected]</a></p>

0 commit comments

Comments
 (0)