Skip to content

Commit 13c6776

Browse files
HuXn-WebDevHuXn-WebDev
committedJan 9, 2023
Hoodies Landing Page
1 parent a76ec44 commit 13c6776

12 files changed

+508
-0
lines changed
 

‎94. Hoodie/images/Product/1.png

403 KB
Loading

‎94. Hoodie/images/Product/2.png

155 KB
Loading

‎94. Hoodie/images/Product/3.png

222 KB
Loading

‎94. Hoodie/images/Product/4.png

344 KB
Loading

‎94. Hoodie/images/alireza-esmaeeli-BGSZ1t80rpM-unsplash.jpg

764 KB
Loading

‎94. Hoodie/images/gesphotoss-1i9K55ni5Dk-unsplash.jpg

644 KB
Loading

‎94. Hoodie/images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg

2.37 MB
Loading

‎94. Hoodie/images/milan-popovic-kOnmHdLJTNI-unsplash.jpg

527 KB
Loading

‎94. Hoodie/images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg

1.19 MB
Loading

‎94. Hoodie/images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg

2.95 MB
Loading

‎94. Hoodie/index.html

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hoodie</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<nav>
11+
<div class="logo">
12+
<h1>Logo</h1>
13+
</div>
14+
<div class="burger">
15+
<span></span>
16+
<span></span>
17+
<span></span>
18+
</div>
19+
</nav>
20+
21+
<header>
22+
<div class="header-content">
23+
<h1 class="main-headings">
24+
New Cocktail <br />
25+
<span>Hoodies</span>
26+
</h1>
27+
<p class="primary-headings">
28+
Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do
29+
eiusmod. Sit amet, constecture orem Ipsum dolor adipiscing elit, sed
30+
do eiusmod.
31+
</p>
32+
<div class="btns-container">
33+
<button class="btn-fill">Shop Now</button>
34+
<button class="btn-outline active">50% OFF</button>
35+
</div>
36+
</div>
37+
<div class="img-container">
38+
<div class="header-img"></div>
39+
</div>
40+
</header>
41+
42+
<section class="section-one">
43+
<div class="img-container">
44+
<div class="section-one-img header-img"></div>
45+
</div>
46+
47+
<div class="section-content">
48+
<h1 class="main-headings">
49+
Summer <span>Sell <br /> Offer</span>
50+
51+
</h1>
52+
<p class="primary-headings">
53+
Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do
54+
eiusmod.
55+
</p>
56+
<button class="btn-fill">Learn More</button>
57+
</div>
58+
</div>
59+
</section>
60+
61+
62+
<section class="products">
63+
<h1 class="products-heading">OUR PRODUCTS</h1>
64+
65+
<section class="product-categories">
66+
<button class="btn-outline active">NEW ARRIVALS</button>
67+
<button class="btn-outline">TOP RATING</button>
68+
<button class="btn-outline">BEST SELLER</button>
69+
</section>
70+
71+
<div class="product-items-container">
72+
<div class="item">
73+
<div class="item-layer">
74+
<img src="images/Product/1.png" >
75+
</div>
76+
<h4 class="item-name">Red Hoodie</h4>
77+
<p class="item-price">$52.99</p>
78+
<a href="#" class="view-product">View Product</a>
79+
</div>
80+
<div class="item">
81+
<div class="item-layer">
82+
<img src="images/Product/2.png" >
83+
</div>
84+
<h4 class="item-name">Black Luxurious Hoodie</h4>
85+
<p class="item-price">$52.99</p>
86+
<a href="#" class="view-product">View Product</a>
87+
</div>
88+
<div class="item">
89+
<div class="item-layer">
90+
<img src="images/Product/3.png" >
91+
</div>
92+
<h4 class="item-name">Teal Expensive Hoodie</h4>
93+
<p class="item-price">$52.99</p>
94+
<a href="#" class="view-product">View Product</a>
95+
</div>
96+
<div class="item">
97+
<div class="item-layer">
98+
<img src="images/Product/2.png" >
99+
</div>
100+
<h4 class="item-name">Red Hoodie</h4>
101+
<p class="item-price">$52.99</p>
102+
<a href="#" class="view-product">View Product</a>
103+
</div>
104+
<div class="item">
105+
<div class="item-layer">
106+
<img src="images/Product/3.png" >
107+
</div>
108+
<h4 class="item-name">Black Luxurious Hoodie</h4>
109+
<p class="item-price">$52.99</p>
110+
<a href="#" class="view-product">View Product</a>
111+
112+
</div>
113+
<div class="item">
114+
<div class="item-layer">
115+
<img src="images/Product/1.png" >
116+
</div>
117+
<h4 class="item-name">Teal Expensive Hoodie</h4>
118+
<p class="item-price">$52.99</p>
119+
<a href="#" class="view-product">View Product</a>
120+
</div>
121+
</div>
122+
</section>
123+
124+
125+
<h1 class="customers-heading">OUR CLIENT'S SAYS</h1>
126+
<section class="customers-reviews">
127+
128+
<div class="customer">
129+
<div class="customer-img">
130+
<div class="img img-one"></div>
131+
</div>
132+
133+
<h1 class="customer-name">Anna Maria</h1>
134+
135+
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed</p>
136+
</div>
137+
138+
<div class="customer">
139+
<div class="customer-img">
140+
<div class="img img-two"></div>
141+
</div>
142+
<h1 class="customer-name">Anna Maria</h1>
143+
144+
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed</p>
145+
</div>
146+
147+
<div class="customer">
148+
<div class="customer-img">
149+
<div class="img img-three"></div>
150+
</div>
151+
<h1 class="customer-name">Anna Maria</h1>
152+
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed.</p>
153+
</div>
154+
</section>
155+
156+
157+
<footer>
158+
<div class="container">
159+
<h1 class="footer-heading">Location</h1>
160+
<h2 class="footer-primary-heading">Start With Our Fresh shrimps</h2>
161+
<h2 class="footer-primary-heading">4213 Somewhere On Earth</h2>
162+
</div>
163+
<div class="container">
164+
<h1 class="footer-heading">Working Hours</h1>
165+
<h2 class="footer-primary-heading">Monday - Thursday - Friday</h2>
166+
<h2 class="footer-primary-heading">Saturday - Sunday</h2>
167+
</div>
168+
<div class="container">
169+
<h1 class="footer-heading">Contact Us</h1>
170+
<h2 class="footer-primary-heading">webdevacademy6@gmail.com</h2>
171+
</div>
172+
</footer>
173+
</body>
174+
</html>

‎94. Hoodie/style.css

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
/* Playfair Display */
2+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap");
3+
4+
/* Roboto */
5+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");
6+
7+
* {
8+
padding: 0;
9+
margin: 0;
10+
box-sizing: border-box;
11+
}
12+
13+
:root {
14+
--main-color: #239b7e;
15+
--main-font: "Playfair Display SC", serif;
16+
--primary-font: "Roboto", sans-serif;
17+
}
18+
19+
nav {
20+
display: flex;
21+
flex-wrap: wrap;
22+
justify-content: space-between;
23+
align-items: center;
24+
padding: 20px;
25+
font-family: var(--primary-font);
26+
font-weight: bold;
27+
}
28+
29+
.logo {
30+
margin-left: 5rem;
31+
}
32+
33+
.burger {
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
align-items: center;
38+
cursor: pointer;
39+
margin-right: 5rem;
40+
/* --- uncomment this code --- */
41+
/* border: 2px solid #000; */
42+
}
43+
44+
.burger span {
45+
border: 2px solid var(--main-color);
46+
width: 40px;
47+
height: 1px;
48+
margin: 2px;
49+
}
50+
51+
/* header */
52+
header {
53+
display: flex;
54+
flex-wrap: wrap;
55+
justify-content: space-around;
56+
align-items: center;
57+
height: 90vh;
58+
margin-top: 2rem;
59+
}
60+
61+
.main-headings {
62+
font-size: 4rem;
63+
font-family: var(--main-font);
64+
transform: translateY(-40px);
65+
color: #00000097;
66+
line-height: 5rem;
67+
}
68+
69+
.main-headings span {
70+
color: #000;
71+
}
72+
73+
.primary-headings {
74+
max-width: 500px;
75+
font-family: var(--primary-font);
76+
line-height: 25px;
77+
margin-bottom: 1rem;
78+
color: #716d6d;
79+
}
80+
81+
.btn-fill {
82+
background: var(--main-color);
83+
color: #fff;
84+
border: none;
85+
padding: 12px 20px;
86+
margin-right: 10px;
87+
cursor: pointer;
88+
transition: all 0.5s ease-out;
89+
}
90+
91+
.btn-fill:hover {
92+
background-color: #fff;
93+
border: 1px solid var(--main-color);
94+
color: var(--main-color);
95+
}
96+
97+
.btn-outline.active {
98+
border: 2px solid var(--main-color);
99+
color: var(--main-color);
100+
background: transparent;
101+
padding: 10px 20px;
102+
cursor: pointer;
103+
transition: all 0.5s ease-out;
104+
}
105+
106+
.btn-outline.active:hover {
107+
background: var(--main-color);
108+
color: #fff;
109+
}
110+
111+
.btn-outline {
112+
border: 2px solid #ccc;
113+
color: #ccc;
114+
background: transparent;
115+
padding: 10px 20px;
116+
cursor: pointer;
117+
transition: all 0.5s ease-out;
118+
}
119+
120+
.btn-outline:hover {
121+
border-color: var(--main-color);
122+
color: var(--main-color);
123+
}
124+
125+
.img-container {
126+
border-radius: 50%;
127+
box-shadow: 4px 7px 5px 2px #bcbaba;
128+
}
129+
130+
.header-img {
131+
border-radius: 100%;
132+
background: url(images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg);
133+
background-position: top;
134+
background-size: cover;
135+
width: 400px;
136+
height: 400px;
137+
}
138+
139+
/* Section 1 */
140+
.section-one {
141+
display: flex;
142+
flex-wrap: wrap;
143+
justify-content: space-around;
144+
align-items: center;
145+
margin-top: 7rem;
146+
}
147+
148+
.img-container {
149+
border-radius: 50%;
150+
box-shadow: 4px 7px 5px 2px #bcbaba;
151+
}
152+
153+
.section-one-img {
154+
background: url(images/gesphotoss-1i9K55ni5Dk-unsplash.jpg);
155+
background-position: top;
156+
background-size: cover;
157+
}
158+
159+
.primary-headings {
160+
max-width: 500px;
161+
font-family: var(--primary-font);
162+
line-height: 25px;
163+
margin-bottom: 1rem;
164+
color: #716d6d;
165+
}
166+
167+
/* Products */
168+
.products {
169+
margin-top: 10rem;
170+
display: flex;
171+
flex-wrap: wrap;
172+
flex-direction: column;
173+
justify-content: center;
174+
align-items: center;
175+
}
176+
177+
.products .products-heading {
178+
font-family: var(--primary-font);
179+
font-size: 2rem;
180+
margin-bottom: 3rem;
181+
}
182+
183+
.products .product-categories button {
184+
margin-right: 20px;
185+
margin-bottom: 2rem;
186+
}
187+
188+
.products .product-items-container {
189+
display: flex;
190+
flex-wrap: wrap;
191+
justify-content: center;
192+
align-items: center;
193+
margin: 20px;
194+
max-width: 60rem;
195+
}
196+
197+
.products .product-items-container .item {
198+
margin: 20px;
199+
}
200+
201+
.products .product-items-container .item-layer {
202+
background: #ebf1f0;
203+
padding: 40px;
204+
margin-right: 20px;
205+
margin: 0 auto;
206+
margin-bottom: 20px;
207+
}
208+
209+
.products .product-items-container .item-layer img {
210+
width: 150px;
211+
height: 200px;
212+
}
213+
214+
.products .product-items-container .item .item-name {
215+
font-family: var(--primary-font);
216+
margin-bottom: 10px;
217+
}
218+
219+
.products .product-items-container .item .item-price {
220+
font-family: var(--primary-font);
221+
margin-bottom: 10px;
222+
}
223+
224+
.products .product-items-container .item .view-product {
225+
font-family: var(--primary-font);
226+
margin-bottom: 10px;
227+
text-decoration: none;
228+
color: var(--main-color);
229+
border-bottom: 1px solid var(--main-color);
230+
}
231+
232+
/* Customers */
233+
.customers-reviews {
234+
margin-top: 7rem;
235+
display: flex;
236+
flex-wrap: wrap;
237+
justify-content: space-around;
238+
align-items: center;
239+
}
240+
241+
.customer {
242+
text-align: center;
243+
}
244+
245+
.customers-heading {
246+
font-family: var(--primary-font);
247+
font-size: 2rem;
248+
margin-bottom: 20px;
249+
text-align: center;
250+
margin-top: 10rem;
251+
}
252+
253+
.customers-reviews .customer-description {
254+
font-size: 12px;
255+
margin-top: 20px;
256+
max-width: 200px;
257+
text-align: center;
258+
margin: 10px;
259+
font-family: var(--primary-font);
260+
}
261+
262+
.customer .customer-img .img {
263+
width: 200px;
264+
height: 200px;
265+
border-radius: 100%;
266+
background-size: cover;
267+
background-position: center;
268+
margin: 0 auto;
269+
margin-bottom: 20px;
270+
}
271+
272+
.customer-img .img-one {
273+
background: url(images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg);
274+
}
275+
.customer-img .img-two {
276+
background: url(images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg);
277+
}
278+
.customer-img .img-three {
279+
background: url(images/milan-popovic-kOnmHdLJTNI-unsplash.jpg);
280+
}
281+
282+
footer {
283+
background: #1f1e1e;
284+
margin-top: 10rem;
285+
color: #fff;
286+
display: flex;
287+
flex-wrap: wrap;
288+
justify-content: space-around;
289+
align-items: center;
290+
height: 100vh;
291+
font-family: var(--primary-font);
292+
}
293+
294+
footer .container .footer-heading {
295+
margin-bottom: 3rem;
296+
}
297+
298+
footer .container .footer-primary-heading {
299+
font-weight: normal;
300+
font-size: 15px;
301+
margin-bottom: 20px;
302+
}
303+
304+
/* You can make it responsive for your own screen if you wanna to, but for now this is good enough. */
305+
@media only screen and (max-width: 900px) {
306+
header {
307+
height: 120vh;
308+
text-align: center;
309+
}
310+
311+
.section-one {
312+
height: 120vh;
313+
text-align: center;
314+
}
315+
316+
.header-img {
317+
width: 250px;
318+
height: 250px;
319+
}
320+
321+
.main-headings {
322+
font-size: 3rem;
323+
margin-top: 2rem;
324+
}
325+
326+
.primary-headings {
327+
width: 400px;
328+
}
329+
330+
.customer .customer-img .img {
331+
width: 150px;
332+
height: 150px;
333+
}
334+
}

0 commit comments

Comments
 (0)
Please sign in to comment.