Skip to content

Commit b5ae2a4

Browse files
Gaurav786kumawatGaurav786kumawat
authored
Update index.html
1 parent a653824 commit b5ae2a4

File tree

1 file changed

+97
-86
lines changed

1 file changed

+97
-86
lines changed

‎index.html‎

Lines changed: 97 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
<link rel="stylesheet" href="css/responsive.css">
1818
</head>
1919

20-
<body>
20+
<!-- BODY: Use Bootstrap flex utilities so footer can be pushed to bottom when content is short -->
21+
22+
<body class="d-flex flex-column min-vh-100">
23+
2124
<!-- ================= NAVBAR ================= -->
2225
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
2326
<div class="container py-2">
@@ -36,7 +39,8 @@
3639

3740
<ul class="navbar-nav ms-auto align-items-center">
3841
<li class="nav-item"><a href="account.html" class="nav-link"><i
39-
class="bi bi-person-circle me-1"></i>Account</a></li>
42+
class="bi bi-person-circle me-1"></i>Account</a>
43+
</li>
4044
<li class="nav-item position-relative">
4145
<button class="btn nav-link position-relative" data-bs-toggle="offcanvas"
4246
data-bs-target="#cartDrawer" aria-controls="cartDrawer">
@@ -50,108 +54,115 @@
5054
</div>
5155
</header>
5256

53-
<!-- ================= HERO CAROUSEL ================= -->
54-
<section id="hero" class="mt-3">
55-
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
56-
<div class="carousel-inner rounded-4 shadow-lg overflow-hidden">
57-
<div class="carousel-item active">
58-
<img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
59-
class="d-block w-100" alt="Fashion Banner" loading="lazy">
60-
<div
61-
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
62-
<h2 class="fw-bold display-5 text-white mb-3">Trendy Fashion Arrivals</h2>
63-
<a href="category.html" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Shop Now</a>
57+
<!-- ================= MAIN (flex-grow) ================= -->
58+
<!-- Make main expand so footer is pushed down when page content is short -->
59+
<main class="flex-grow-1">
60+
<!-- ================= HERO CAROUSEL ================= -->
61+
<section id="hero" class="mt-3">
62+
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
63+
<div class="carousel-inner rounded-4 shadow-lg overflow-hidden">
64+
<div class="carousel-item active">
65+
<img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
66+
class="d-block w-100" alt="Fashion Banner" loading="lazy">
67+
<div
68+
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
69+
<h2 class="fw-bold display-5 text-white mb-3">Trendy Fashion Arrivals</h2>
70+
<a href="category.html" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Shop
71+
Now</a>
72+
</div>
6473
</div>
65-
</div>
66-
<div class="carousel-item">
67-
<img src="https://images.unsplash.com/photo-1515940175183-6798529cb860?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1629"
68-
class="d-block w-100" alt="Gadgets Banner" loading="lazy">
69-
<div
70-
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
71-
<h2 class="fw-bold display-5 text-white mb-3">Smart Gadgets for Smart Life</h2>
72-
<a href="category.html" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Explore</a>
74+
<div class="carousel-item">
75+
<img src="https://images.unsplash.com/photo-1515940175183-6798529cb860?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1629"
76+
class="d-block w-100" alt="Gadgets Banner" loading="lazy">
77+
<div
78+
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
79+
<h2 class="fw-bold display-5 text-white mb-3">Smart Gadgets for Smart Life</h2>
80+
<a href="category.html" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Explore</a>
81+
</div>
7382
</div>
74-
</div>
75-
<div class="carousel-item">
76-
<img src="https://images.unsplash.com/photo-1572048572872-2394404cf1f3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1171"
77-
class="d-block w-100" alt="Home Decor Banner" loading="lazy">
78-
<div
79-
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
80-
<h2 class="fw-bold display-5 text-white mb-3">Style Your Home Beautifully</h2>
81-
<a href="category.html" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Discover</a>
83+
<div class="carousel-item">
84+
<img src="https://images.unsplash.com/photo-1572048572872-2394404cf1f3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1171"
85+
class="d-block w-100" alt="Home Decor Banner" loading="lazy">
86+
<div
87+
class="carousel-caption d-flex flex-column align-items-center justify-content-center text-center">
88+
<h2 class="fw-bold display-5 text-white mb-3">Style Your Home Beautifully</h2>
89+
<a href="category.html"
90+
class="btn btn-light rounded-pill px-4 py-2 fw-semibold">Discover</a>
91+
</div>
8292
</div>
8393
</div>
94+
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
95+
<span class="carousel-control-prev-icon"></span>
96+
</button>
97+
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
98+
<span class="carousel-control-next-icon"></span>
99+
</button>
84100
</div>
85-
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
86-
<span class="carousel-control-prev-icon"></span>
87-
</button>
88-
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
89-
<span class="carousel-control-next-icon"></span>
90-
</button>
91-
</div>
92-
</section>
101+
</section>
93102

94-
<!-- ================= FEATURED COLLECTIONS ================= -->
95-
<section class="container mt-5">
96-
<h3 class="section-title mb-4 fw-semibold">Featured Collections</h3>
97-
<div class="row g-4">
98-
<div class="col-6 col-md-3">
99-
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
100-
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
101-
alt="Men Fashion" class="w-100 h-100 object-fit-cover">
102-
<div class="overlay d-flex align-items-center justify-content-center">
103-
<a href="category.html" class="btn btn-light fw-semibold">Men</a>
103+
<!-- ================= FEATURED COLLECTIONS ================= -->
104+
<section class="container mt-5">
105+
<h3 class="section-title mb-4 fw-semibold">Featured Collections</h3>
106+
<div class="row g-4">
107+
<div class="col-6 col-md-3">
108+
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
109+
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
110+
alt="Men Fashion" class="w-100 h-100 object-fit-cover">
111+
<div class="overlay d-flex align-items-center justify-content-center">
112+
<a href="category.html" class="btn btn-light fw-semibold">Men</a>
113+
</div>
104114
</div>
105115
</div>
106-
</div>
107-
<div class="col-6 col-md-3">
108-
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
109-
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
110-
alt="Women Fashion" class="w-100 h-100 object-fit-cover">
111-
<div class="overlay d-flex align-items-center justify-content-center">
112-
<a href="category.html" class="btn btn-light fw-semibold">Women</a>
116+
<div class="col-6 col-md-3">
117+
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
118+
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
119+
alt="Women Fashion" class="w-100 h-100 object-fit-cover">
120+
<div class="overlay d-flex align-items-center justify-content-center">
121+
<a href="category.html" class="btn btn-light fw-semibold">Women</a>
122+
</div>
113123
</div>
114124
</div>
115-
</div>
116-
<div class="col-6 col-md-3">
117-
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
118-
<img src="https://images.unsplash.com/photo-1740803292349-c7e53f7125b2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1202"
119-
alt="Electronics" class="w-100 h-100 object-fit-cover">
120-
<div class="overlay d-flex align-items-center justify-content-center">
121-
<a href="category.html" class="btn btn-light fw-semibold">Electronics</a>
125+
<div class="col-6 col-md-3">
126+
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
127+
<img src="https://images.unsplash.com/photo-1740803292349-c7e53f7125b2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1202"
128+
alt="Electronics" class="w-100 h-100 object-fit-cover">
129+
<div class="overlay d-flex align-items-center justify-content-center">
130+
<a href="category.html" class="btn btn-light fw-semibold">Electronics</a>
131+
</div>
122132
</div>
123133
</div>
124-
</div>
125-
<div class="col-6 col-md-3">
126-
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
127-
<img src="https://images.unsplash.com/photo-1615874694520-474822394e73?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=880"
128-
alt="Home Decor" class="w-100 h-100 object-fit-cover">
129-
<div class="overlay d-flex align-items-center justify-content-center">
130-
<a href="category.html" class="btn btn-light fw-semibold">Home</a>
134+
<div class="col-6 col-md-3">
135+
<div class="category-tile position-relative rounded-4 overflow-hidden shadow-sm">
136+
<img src="https://images.unsplash.com/photo-1615874694520-474822394e73?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=880"
137+
alt="Home Decor" class="w-100 h-100 object-fit-cover">
138+
<div class="overlay d-flex align-items-center justify-content-center">
139+
<a href="category.html" class="btn btn-light fw-semibold">Home</a>
140+
</div>
131141
</div>
132142
</div>
133143
</div>
134-
</div>
135-
</section>
144+
</section>
136145

137-
<!-- ================= TRENDING PRODUCTS ================= -->
138-
<section class="container mt-5">
139-
<h3 class="section-title mb-4 fw-semibold">Trending Products</h3>
140-
<div class="row g-4" id="trendingProducts">
141-
<!-- JS will inject trending product cards -->
142-
</div>
143-
</section>
146+
<!-- ================= TRENDING PRODUCTS ================= -->
147+
<section class="container mt-5">
148+
<h3 class="section-title mb-4 fw-semibold">Trending Products</h3>
149+
<div class="row g-4" id="trendingProducts">
150+
<!-- JS will inject trending product cards -->
151+
</div>
152+
</section>
144153

145-
<!-- ================= RECOMMENDED ================= -->
146-
<section class="container mt-5 mb-5">
147-
<h3 class="section-title mb-4 fw-semibold">Recommended For You</h3>
148-
<div class="row g-4" id="recommendedProducts">
149-
<!-- JS will inject recommended product cards -->
150-
</div>
151-
</section>
154+
<!-- ================= RECOMMENDED ================= -->
155+
<section class="container mt-5 mb-5">
156+
<h3 class="section-title mb-4 fw-semibold">Recommended For You</h3>
157+
<div class="row g-4" id="recommendedProducts">
158+
<!-- JS will inject recommended product cards -->
159+
</div>
160+
</section>
161+
</main>
152162

153163
<!-- ================= FOOTER ================= -->
154-
<footer class="bg-dark text-light py-4 mt-5">
164+
<!-- Use mt-auto so footer is pushed to bottom when main is short -->
165+
<footer class="bg-dark text-light py-4 mt-auto">
155166
<div class="container text-center small">
156167
<p class="mb-1">&copy; 2025 ShopEase — All rights reserved.</p>
157168
<p class="mb-0">Images from <a href="https://unsplash.com" target="_blank"
@@ -199,4 +210,4 @@ <h5 class="modal-title" id="quickViewLabel">Quick View</h5>
199210
<script src="js/script.js"></script>
200211
</body>
201212

202-
</html>
213+
</html>

0 commit comments

Comments
 (0)