-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (165 loc) · 9.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faazizpro Fashion</title>
<link rel="stylesheet" href="style.css">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- header -->
<header class="md:px-[240px] py-5 md:py-10 bg-[#FFFBF0]">
<nav class="flex flex-col justify-center md:flex-row md:justify-between items-center mb-12">
<div class="logo flex justify-center md:justify-start md:flex-none ">
<img src="./icons/logo.png" class="w-5/12" alt="">
</div>
<ul class="md:flex md:items-center gap-3 mt-5 md:mt-0 md:gap-12 menu-font grid grid-cols-2 justify-center items-center">
<li><a href="">Home</a></li>
<li><a href="">Product</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero flex flex-col md:flex-row justify-between items-center">
<div class="hero-info">
<h1 class="hero-title text-3xl md:text-7xl text-center md:text-left md:w-[450px] "><span class="text-[#fabe4c]">Be the Penguins</span>
of Winter</h1>
<p class="hero-p w-60 md:w-96 mb-5 ">
All your winter clothes are ready to go in the wild camping. Be prepare.
</p>
<button class="flex w-full md:w-auto gap-3 items-center bg-[#A4BC46] rounded-xl hero-button-text px-5 py-1">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/3"> BUY NOW
</button>
</div>
<div class="hero-img">
<img src="./images/faazizpro.png" alt="">
</div>
</section>
</header>
<section class="woman-jacket px-5 md:px-[240px] mb-24 woman-jacket-title mt-12 mb-10">
<h2 class="mb-10 text-center md:text-left">WOMAN JACKET</h2>
<div class="flex md:justify-between md:items-center flex-col gap-4 md:flex-row justify-center">
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-1.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Yellow Coat Jacket </h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-2.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Ladis Jacket </h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-3.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Woman Leather Jacket </h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
</div>
</section>
<section class="woman-jacket px-5 md:px-[240px] mb-24 woman-jacket-title mt-12 mb-10">
<h2 class="mb-10 text-center md:text-left">MAN JACKET</h2>
<div class="flex md:justify-between md:items-center flex-col gap-4 md:flex-row justify-center">
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-4.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Snowboard Jacket Mens</h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-5.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Man Leather Jackets</h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
<div class="women-jackets md:w-[370px] shadow-2xl p-7 rounded-3xl">
<img src="./images/jacket-6.png" class="bg-slate-500 p-8 rounded-2xl mb-4" alt="">
<h3 class="jacket-title mb-3">Man Casual Jackets</h3>
<p class="jacket-p mb-3">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</p>
<div class="prices flex justify-between">
<p class="text-amber-300 text-4xl">$234</p>
<button class="flex md:gap-3 justify-center items-center bg-[#A4BC46] rounded-xl hero-button-text ">
<img src="./icons/shopping-cart 1.png" alt="" class="w-1/4 "> BUY NOW
</button>
</div>
</div>
</div>
</section>
<section class="md:px-[240px] px-5 mb-24">
<div class="flex flex-col-reverse md:flex-row gap-10 md:justify-between md:items-center">
<div>
<div class="flex flex-col md:flex-row gap-5 items-center shadow-lg p-5 rounded-3xl md:w-[589px] mb-10">
<img src="./icons/house.png" class="w-16 md:w-16" alt="">
<div>
<h3 class="jacket-title">Find the Perfect Fit</h3>
<p class="jacket-p">Everybody is different, which is why we offer styles for every body.
</p>
</div>
</div>
<div class="flex flex-col md:flex-row gap-5 items-center shadow-lg p-5 rounded-3xl md:w-[589px] mb-10">
<img src="./icons/box.png" class="w-16 md:w-16" alt="">
<div>
<h3 class="jacket-title">Free Exchanges</h3>
<p class="jacket-p">One of the many reasons you can shop
with peace of mind.
</p>
</div>
</div>
<div class="flex flex-col md:flex-row gap-5 items-center shadow-lg p-5 rounded-3xl md:w-[589px] mb-10">
<img src="./icons/question.png" class="w-16 md:w-16" alt="">
<div>
<h3 class="jacket-title">Contact Our Seller</h3>
<p class="jacket-p">They are here to help you. That's quite
literally what we pay them for.</p>
</div>
</div>
</div>
<div class=" md:w-5/12">
<img src="./images/shopping.png" alt="">
</div>
</div>
</section>
</body>
</html>