Skip to content

Commit 7438711

Browse files
memunarazamemunaraza
authored
Add files via upload
0 parents  commit 7438711

File tree

2 files changed

+268
-0
lines changed

2 files changed

+268
-0
lines changed

‎index.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<!-- index.html -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Combined Responsive Page</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
13+
<!-- HEADER -->
14+
<header class="main-header">
15+
<div class="logo">YourBrand</div>
16+
<nav class="nav-links">
17+
<a href="#">Home</a>
18+
<a href="#">Shop</a>
19+
<a href="#">Products</a>
20+
<a href="#">Contact</a>
21+
</nav>
22+
</header>
23+
24+
<!-- HERO SECTION -->
25+
<header class="hero">
26+
<div class="hero-content">
27+
<h1>Level Up Your Style</h1>
28+
<p>Step into comfort, design and performance.</p>
29+
<button class="hero-btn">Shop Now</button>
30+
</div>
31+
<div class="hero-img"></div>
32+
</header>
33+
34+
<!-- FEATURES SECTION -->
35+
<section class="features">
36+
<div class="feature-item">
37+
<h3>Free Shipping</h3>
38+
<p>On all orders over $50</p>
39+
</div>
40+
<div class="feature-item">
41+
<h3>Easy Returns</h3>
42+
<p>30 days money back guarantee</p>
43+
</div>
44+
<div class="feature-item">
45+
<h3>24/7 Support</h3>
46+
<p>We are here anytime</p>
47+
</div>
48+
</section>
49+
50+
<!-- PRODUCT CARDS -->
51+
<section class="products">
52+
<h2 class="section-title">Popular Products</h2>
53+
<div class="product-grid">
54+
<div class="product-card">
55+
<div class="p-img"></div>
56+
<h3>Nike Air Max</h3>
57+
<p>$149</p>
58+
</div>
59+
<div class="product-card">
60+
<div class="p-img"></div>
61+
<h3>Jordan Retro</h3>
62+
<p>$199</p>
63+
</div>
64+
<div class="product-card">
65+
<div class="p-img"></div>
66+
<h3>Running Shoes</h3>
67+
<p>$129</p>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<!-- NEWSLETTER -->
73+
<section class="newsletter-box">
74+
<h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
75+
<div class="newsletter-input">
76+
<input type="text" placeholder="Enter your email">
77+
<button>Subscribe</button>
78+
</div>
79+
</section>
80+
81+
<!-- FOOTER -->
82+
<footer class="footer">
83+
<div class="footer-grid">
84+
<div class="footer-col">
85+
<h3>FEATURED</h3>
86+
<a href="#">Holiday Gift Guide</a>
87+
<a href="#">Air Force 1</a>
88+
<a href="#">Jordan 1</a>
89+
<a href="#">Air Max 2090</a>
90+
</div>
91+
<div class="footer-col">
92+
<h3>SHOES</h3>
93+
<a href="#">All Shoes</a>
94+
<a href="#">Jordan Shoes</a>
95+
<a href="#">Running Shoes</a>
96+
<a href="#">Basketball Shoes</a>
97+
</div>
98+
<div class="footer-col">
99+
<h3>CLOTHING</h3>
100+
<a href="#">All Clothing</a>
101+
<a href="#">Tops & T-Shirts</a>
102+
<a href="#">Shorts</a>
103+
<a href="#">Hoodies & Pullovers</a>
104+
</div>
105+
<div class="footer-col">
106+
<h3>SOCCER</h3>
107+
<a href="#">Kids' Shoes</a>
108+
<a href="#">Running Shoes</a>
109+
<a href="#">Kids' Basketball Shoes</a>
110+
<a href="#">Infant Shoes</a>
111+
</div>
112+
</div>
113+
<p class="copyright">© 2025 <span>Your Brand</span> | All Rights Reserved</p>
114+
</footer>
115+
116+
</body>
117+
</html>
118+
119+
120+
<!-- style.css (place in separate file) -->
121+
<style>
122+
*{
123+
margin: 0;
124+
padding: 0;
125+
box-sizing: border-box;
126+
font-family: 'Roboto', sans-serif;
127+
}
128+
body{ background: #fff; }
129+
130+
/* HERO */
131+
.hero{
132+
width: 100%;
133+
display: flex;
134+
justify-content: space-between;
135+
align-items: center;
136+
padding: 60px 8%;
137+
}
138+
.hero-content h1{ font-size: 48px; font-weight: 700; }
139+
.hero-content p{ margin: 15px 0; font-size: 18px; }
140+
.hero-btn{
141+
padding: 12px 28px;
142+
background: #3064ff;
143+
color: #fff;
144+
border: none;
145+
font-size: 16px;
146+
border-radius: 8px;
147+
cursor: pointer;
148+
}
149+
.hero-img{
150+
width: 420px;
151+
height: 420px;
152+
background: #eee;
153+
border-radius: 20px;
154+
}
155+
156+
/* FEATURES */
157+
.features{
158+
width: 90%;
159+
margin: auto;
160+
display: flex;
161+
justify-content: space-between;
162+
padding: 60px 0;
163+
text-align: center;
164+
}
165+
.feature-item h3{ font-size: 20px; font-weight: 700; }
166+
.feature-item p{ margin-top: 8px; color: #444; }
167+
168+
/* PRODUCTS */
169+
.products{ width: 90%; margin: auto; padding: 50px 0; }
170+
.section-title{ font-size: 28px; margin-bottom: 30px; }
171+
.product-grid{
172+
display: grid;
173+
grid-template-columns: repeat(3,1fr);
174+
gap: 25px;
175+
}
176+
.product-card{
177+
padding: 20px;
178+
background: #fff;
179+
border-radius: 20px;
180+
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
181+
text-align: center;
182+
}
183+
.p-img{
184+
width: 100%;
185+
height: 200px;
186+
background: #eee;
187+
border-radius: 15px;
188+
margin-bottom: 15px;
189+
}
190+
191+
/* NEWSLETTER */
192+
.newsletter-box{
193+
width: 85%; margin: 40px auto; padding: 50px 0;
194+
background: #fff; text-align: center;
195+
border-radius: 20px;
196+
box-shadow: 0 10px 25px rgba(0,0,0,0.09);
197+
}
198+
.newsletter-box h2{ font-size: 24px; font-weight: 700; margin-bottom: 25px; }
199+
.newsletter-input{ display: flex; justify-content: center; width: 80%; margin: auto; }
200+
.newsletter-input input{
201+
width: 100%; padding: 18px; border: 1px solid #ddd; border-right: none;
202+
border-radius: 8px 0 0 8px;
203+
}
204+
.newsletter-input button{
205+
padding: 18px 40px; background: #3064ff; color: #fff; border-radius: 0 8px 8px 0;
206+
font-size: 16px; border: none;
207+
}
208+
209+
/* FOOTER */
210+
.footer{ padding: 60px 80px; background: #fff; }
211+
.footer-grid{
212+
display: grid; grid-template-columns: repeat(4,1fr); gap: 60px;
213+
}
214+
.footer-col h3{ font-size: 18px; font-weight: 700; margin-bottom: 20px; }
215+
.footer-col a{ display:block; margin: 8px 0; color:#333; text-decoration:none; }
216+
.footer-col a:hover{ text-decoration: underline; }
217+
.footer p{ text-align:center; margin-top:30px; }
218+
219+
/* RESPONSIVE */
220+
@media(max-width: 900px){
221+
.hero{ flex-direction: column; text-align: center; }
222+
.hero-img{ margin-top: 20px; width: 320px; height: 320px; }
223+
.features{ flex-direction: column; gap: 30px; }
224+
.product-grid{ grid-template-columns: repeat(2,1fr); }
225+
.footer-grid{ grid-template-columns: repeat(2,1fr); }
226+
}
227+
@media(max-width: 550px){
228+
.product-grid{ grid-template-columns: 1fr; }
229+
.footer-grid{ grid-template-columns: 1fr; }
230+
.newsletter-input{ flex-direction: column; }
231+
.newsletter-input input, .newsletter-input button{ border-radius: 8px; margin-bottom: 10px; }
232+
}
233+
.main-header{
234+
width:100%;
235+
padding:20px 8%;
236+
display:flex;
237+
justify-content:space-between;
238+
align-items:center;
239+
position:sticky;
240+
top:0;
241+
background:#fff;
242+
box-shadow:0 4px 15px rgba(0,0,0,0.08);
243+
z-index:100;
244+
}
245+
.logo{
246+
font-size:28px;
247+
font-weight:700;
248+
color:#3064ff;
249+
}
250+
.nav-links a{
251+
margin-left:25px;
252+
text-decoration:none;
253+
color:#333;
254+
font-size:16px;
255+
font-weight:500;
256+
}
257+
.nav-links a:hover{
258+
color:#3064ff;
259+
}
260+
261+
/* RESPONSIVE NAV */
262+
@media(max-width:700px){
263+
.nav-links{
264+
display:none;
265+
}
266+
}
267+
268+
</style>

‎style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)