-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
244 lines (214 loc) · 14.1 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./image/Xiaomi_logo.svg.png">
<title>Xiaomi India</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/1efd8e9abd.js" crossorigin="anonymous"></script>
<style>
.images{
width:100%;
height:476px;
}
</style>
</head>
<body>
<div class="overflow-x-hidden">
<!-- Navigation Bar -->
<nav class=" bg-white flex justify-around w-full fixed z-10 text-base h-12 ">
<div class="flex space-x-10 mx-2 my-2 px-2 py-2 ">
<div><a href="/mi"><img src="./image/orange-logo.png" width="30px" height="20px"></a></div>
<div class="hover:underline decoration-solid"><a href="/store">Store</a></div>
<div class="hover:underline decoration-solid"><a href="/Phone">Phone</a></div>
<div class="hover:underline decoration-solid "><a href="TV & Smart Phone">TV & Smart Phone</a></div>
<div class="hover:underline decoration-solid"><a href="Laptop & Tablet">Laptop & Tablet</a></div>
<div class="hover:underline decoration-solid"><a href="Lifestyle">Lifestyle</a></div>
</div>
<div class="flex space-x-10 mx-2 my-2 px-2 py-2 ">
<div class="hover:underline decoration-solid"><a href="/Discover">Discover</a></div>
<div class="hover:underline decoration-solid"><a href="/Support">Support</a></div>
<div class="hover:underline decoration-solid"><a href="/search"><i class="fa-solid fa-magnifying-glass fa-xl"></i></a></div>
<div class="hover:underline decoration-solid"><a href="/cart"><i class="fa-solid fa-cart-shopping fa-xl"></i></a></div>
<div class="hover:underline decoration-solid"><a href="/user"> <i class="fa-regular fa-user fa-xl"></i></a></div>
</div>
</nav>
<!-- Main-Section -->
<section class="relative cursor-pointer">
<div><img src="./image/a5c8f0be1ff691f51c520d8fa0fb9481.webp"></div>
<div class="absolute top-40 left-[290px] text-white text-2xl">
<h1>200MP+OIS</h1><br>
<div ><span class="text-lg">From</span> <span class="text-4xl">₹17,999</span> <span class="text-base text-gray-500"> <del>₹19,999</del></span></div>
<div class="my-1 mx-1"><button class="bg-white text-black rounded-md text-xl px-1 py-1 w-40 h-23 transition ease-in-out delay-150 bg-white hover:-translate-y-1 hover:scale-110 hover:bg-orange-500 duration-300 ">Buy Now</button></div>
</div>
</section>
<div class="grid grid-cols-2 my-3 mx-2 gap-2 cursor-pointer">
<div class="relative">
<div class="flex flex-col gap-5 items-center absolute top-20 left-[230px] text-2xl">
<h1 class="font-bold text-2xl">Best of Smartphones</h1>
<p class="text-base">Engineered for speed</p>
<p class="text-xl text-orange-500 hover:underline">Buy Now</p>
</div>
<img src="./image/asset 1.jpeg" class="images"></div>
<div class="relative">
<div class="flex flex-col gap-5 items-center absolute top-20 left-[230px] text-2xl">
<h1 class="font-bold text-2xl">XIAOMI Smart TV Series</h1>
<p class="text-base">Vivid Picture Engine</p>
<p class="text-xl text-white hover:underline">Buy Now</p>
</div>
<img src="./image/asset 2.jpeg" class="images"></div>
<div><img src="./image/asset 3.jpeg" class="images"></div>
<div class="grid grid-cols-2 gap-2">
<div><img src="./image/asset 4.jpeg" class="images"></div>
<div class="flex flex-col items-center gap-4 p-10">
<h1 class="text-3xl font-bold">Stay In-Charge</h1>
<p class="text-lg">Power Banks & Cables</p>
<a class="text-lg text-red-500" href="#">Learn More</a>
<img src="./image/WhatsApp Image 2023-02-05 at 17.40.42.jpg"></div>
</div>
</div>
<div class="flex space-x-40 m-8 border-2 outline-none cursor-pointer bg-white">
<div class="m-3">
<img src="./image/asset 7.jpeg" width="650px">
</div>
<div class="my-14 space-y-5 text-center">
<p class="text-orange-600 text-lg font-bold">#Discovery</p>
<h1 class="text-black text-3xl font-bold">Redmi 11 Prime 5G</h1>
<p class="text-base">Get 5G Ready with the 5G All-Rounder </p>
<p class="text-base">Explore Now</p>
<p class="text-base hover:underline">Learn More</p>
</div>
</div>
<div class="grid grid-cols-2 max-w-[1400px] h-[512px] gap-5 pt-10 bg-white m-8">
<div class="flex flex-col items-center gap-10 border-2 cursor-pointer hover:shadow-lg">
<h1 class="text-4xl font-bold pt-10">XIAOMI CARE</h1>
<div class="flex flex-row gap-8 items-center">
<div class="flex flex-col gap-3 items-center">
<img src="./image/asset 8.png">
<p class="text-lg mt-7 hover:underline cursor-pointer">Mi Extended Warranty<i class="fa-solid fa-chevron-right"></i></p>
</div>
<div class="flex flex-col gap-3 items-center">
<img src="./image/asset 9.png">
<p class="text-lg mt-7 hover:underline cursor-pointer">Mi Screen Protect<i class="fa-solid fa-chevron-right"></i></p>
</div>
<div class="flex flex-col gap-3 items-center">
<img src="./image/asset 10.png">
<p class="text-lg mt-7 hover:underline cursor-pointer">Mi Complete Protect<i class="fa-solid fa-chevron-right"></i></p>
</div>
</div>
</div>
<div class="grid grid-rows-2 place-items-center gap-5 cursor-pointer border-2 hover:shadow-lg">
<div class="flex flex-col items-center ">
<h1 class="text-4xl font-bold pb-5">Service Centres</h1>
<p class="text-lg hover:underline">We'll guide you to the best solution <i class="fa-solid fa-chevron-right"></i></p>
</div>
<div class="flex flex-col items-center gap-5 ">
<h1 class="text-4xl font-bold">Mi Exchange</h1>
<p class="text-lg hover:underline">Renewed For Smoother Experience and Better value for Exchange <i class="fa-solid fa-chevron-right"></i></p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-[#191919]">
<div class="max-w-[1519px]">
<div class="flex flex-row gap-4">
<div class="flex flex-col gap-8 m-8 p-8 w-[180px]">
<p class="text-white">Support</p>
<div class="text-gray-400">
<p class="hover:underline hover:text-white cursor-pointer">Online Help</p>
<p class="hover:underline hover:text-white cursor-pointer">Customer Service</p>
<p class="hover:underline hover:text-white cursor-pointer">Shipping FAQ</p>
<p class="hover:underline hover:text-white cursor-pointer">Warranty</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Exchange</p>
<p class="hover:underline hover:text-white cursor-pointer">Bulk Orders</p>
<p class="hover:underline hover:text-white cursor-pointer">Users Guide</p>
<p class="hover:underline hover:text-white cursor-pointer">Laptop Drivers</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Screen Protect</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Extended Warranty</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Complete Protect</p>
<p class="hover:underline hover:text-white cursor-pointer">Certification</p>
</div>
</div>
<div class="flex flex-col gap-8 m-8 p-8 w-[350px]">
<p class="text-white">SHOP AND LEARN</p>
<div class="text-gray-400">
<p class="hover:underline hover:text-white cursor-pointer">Xiaomi Phones</p>
<p class="hover:underline hover:text-white cursor-pointer">Redmi Phones</p>
<p class="hover:underline hover:text-white cursor-pointer">TV's</p>
<p class="hover:underline hover:text-white cursor-pointer">Laptop and Tablets</p>
<p class="hover:underline hover:text-white cursor-pointer">Audio</p>
<p class="hover:underline hover:text-white cursor-pointer">Lifestyle</p>
<p class="hover:underline hover:text-white cursor-pointer">Smart Home</p>
</div>
</div>
<div class="flex flex-col gap-8 m-8 p-8 w-[280px]">
<p class="text-white">RETAIL STORE</p>
<div class="text-gray-400">
<p class="hover:underline hover:text-white cursor-pointer">Mi Home</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Authorized Store</p>
<p class="hover:underline hover:text-white cursor-pointer">Mi Store Franchise</p>
</div>
</div>
<div class="flex flex-col gap-8 m-8 p-8 w-[280px]">
<p class="text-white">ABOUT US</p>
<div class="text-gray-400">
<p class="hover:underline hover:text-white cursor-pointer">Xiaomi</p>
<p class="hover:underline hover:text-white cursor-pointer">Privacy Policy</p>
<p class="hover:underline hover:text-white cursor-pointer">User Agreement</p>
<p class="hover:underline hover:text-white cursor-pointer">Integrity & Compliance</p>
<p class="hover:underline hover:text-white cursor-pointer">Corporate Information</p>
<p class="hover:underline hover:text-white cursor-pointer">E-Waste Management</p>
<p class="hover:underline hover:text-white cursor-pointer">In The Press</p>
<p class="hover:underline hover:text-white cursor-pointer">Trust Center</p>
<p class="hover:underline hover:text-white cursor-pointer">Culture</p>
<p class="hover:underline hover:text-white cursor-pointer">SmartPhone Quality</p>
<p class="hover:underline hover:text-white cursor-pointer">TV Quality</p>
<p class="hover:underline hover:text-white cursor-pointer">Service Quality</p>
</div>
</div>
<div class="flex flex-col gap-8 m-8 p-8 ">
<h1 class="text-white">Follow Mi</h1>
<div class="flex flex-row gap-8">
<i class="fa-brands fa-square-facebook fa-xl text-gray-600 hover:text-white cursor-pointer"></i>
<i class="fa-brands fa-square-twitter fa-xl text-gray-600 hover:text-white cursor-pointer"></i>
<i class="fa-brands fa-square-instagram fa-xl text-gray-600 hover:text-white cursor-pointer"></i>
</div>
<div class="flex flex-col gap-3">
<h1 class="font-bold text-white">Let's stay in touch</h1>
<form action="">
<input type="email" placeholder="Enter email address" class="w-full rounded-xl p-3 bg-[#191919] border text-lg">
</form>
</div>
<div class="border rounded-xl">
<div class="flex flex-row gap-5 p-5 border rounded-md">
<img src="./image/asset 11.png" width="80px" class="rounded-md" alt="">
<div>
<h1 class="text-base font-bold text-white">Get mi store app</h1>
<p class="text-gray-400">Scan for our up-to-date information for better shopping experience</p>
</div>
</div>
<div class="flex flex-row justify-center p-4">
<img src="./image/google-play-icon-logo.svg" width="30px" alt="">
<h1 class="text-white">Download on Google play</h1>
</div>
</div>
</div>
</div>
<div class="border w-[1350px] ml-11 "></div>
<div class="flex flex-row justify-between mr-12 ml-12 mt-6 pb-6">
<div class="flex flex-row gap-8">
<h1 class="text-white">Copyright © 2010-2023 Xiaomi.All Rights Reserved</h1>
<h1 class="text-white">Cookie Policy</h1>
</div>
<div>
<h1 class="text-white">India / India</h1>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>