-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
281 lines (262 loc) · 19.8 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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./output.css">
<link rel="icon" href="https://imgs.search.brave.com/LtLgYSigKFcfAriXcvdM5UkSD_lxVkmyI4W2D40xR4U/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9jZG4u/d2FsbHBhcGVyc2Fm/YXJpLmNvbS83NS82/Mi9VVFcwb2MuanBn">
<title>Xbox</title>
</head>
<body>
<div class="w-100% h-12 flex justify-between min-[858px]:px-14 min-[858px]:justify-start">
<div class="p-4 flex items-center gap-5 min-[858px]:hidden">
<div>
<div class="w-6 h-[0.15rem] bg-black rounded-md mb-1"></div>
<div class="w-6 h-[0.15rem] bg-black rounded-md mb-1"></div>
<div class="w-6 h-[0.15rem] bg-black rounded-md"></div>
</div>
<img src="images/search.png" alt="search bar" class="h-4">
</div>
<a href="https://www.microsoft.com/en-in/" class="h-5 min-[858px]:pr-3"><img src="https://imgs.search.brave.com/bfgHsLj8U9GCG1qucI77E-7FRPZVXoyDkZNEA8BIhbA/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/Y25ldC5jb20vYS9p/bWcvcmVzaXplLzhj/OWM3NWJmNmEzZTMw/MzEwYmZmMGNjNGM1/ZTViMGUxYzJlNmE1/ODIvaHViLzIwMTIv/MDgvMjMvYjAzMWEz/ZTQtZjBlNy0xMWUy/LThjN2MtZDRhZTUy/ZTYyYmNjL01pY3Jv/c29mdF9uZXdfbG9n/by5qcGc_YXV0bz13/ZWJwJndpZHRoPTEy/MDA" alt="Microsoft Logo" class="h-14" ></a>
<div class="flex items-center min-[858px]:justify-between min-[858px]:w-full">
<div class="border-l-2 border-black pl-6 hidden min-[858px]:block">
<div class="flex items-center gap-4">
<img src="images/xbox.png" alt="xbox" class="h-6">
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1"> <a href="./test.html">Game Pass ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Games ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Devices ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Play ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Store ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Community ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">Support ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1 hoi"><a href="./test.html">My Xbox ∨ </a></span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
<span class="text-[0.8rem] text-slate-800 cursor-pointer anime1">More ∨</span>
<!-- <div class="h-[2px] bg-black anime_d"></div> -->
</div>
</div>
<div class="flex items-center gap-3 p-4">
<div class=" hidden min-[858px]:flex gap-3">
<span class="text-[0.8rem] text-slate-800 hover:border-b-[2px] hover:border-black cursor-pointer">All Microsoft ∨</span>
<span class="text-[0.8rem] hover:border-b-[2px] hover:border-black cursor-pointer">Search</span>
<img src="images/search.png" alt="search bar" class="h-4">
</div>
<span class="text-[0.8rem] hidden min-[858px]:inline-block hover:border-b-[2px] hover:border-black cursor-pointer">Cart</span>
<img src="images/shopping-cart.png" alt="shopping-cart" class="h-4">
<span class="text-[0.8rem] hidden min-[858px]:inline-block hover:border-b-[2px] hover:border-black cursor-pointer">Sign in</span>
<img src="images/user.png" alt="user" class="h-6 ml-4">
</div>
</div>
</div>
<hr>
<div class="h-8 flex items-center p-4 min-[858px]:hidden">
<img src="images/xbox.png" alt="xbox" class="h-6 p-1 m-0">
</div>
<hr>
<div class="h-[56rem] bg-[url('./images/cod.webp')] bg-no-repeat bg-center bg-cover relative min-[858px]:h-[35rem]">
<div class="h-[56rem] bg-gradient-to-b from-transparent to-black opacity-1 min-[858px]:h-[35rem]">
<div class="flex justify-center max-[858px]:items-center flex-col w-[90%] text-white text-center absolute max-[858px]:top-[40%] left-[5%] min-[858px]:w-[35%] min-[858px]:left-[60%] min-[858px]:text-left min-[858px]:h-[35rem]">
<div><span class="px-2 text-sm font-bold text-black bg-yellow-400">PLAY DAY ONE WITH GAME PASS</span></div>
<h1 class="my-4 text-5xl font-bold ">Call of Duty®:<br>Black Ops 6
</h1>
<p class="text-4xl mb-7">Forced to go rogue. Hunted from within. This is Black Ops 6.</p>
<div class="flex gap-0 mt-2 flex-col min-[858px]:flex-row min-[858px]:justify-start">
<button class="bg-[#9bf00b] text-black px-5 py-1 font-extrabold">PRE-ORDER NOW ></button>
<button class="bg-transparent text-[#9bf00b] px-5 py-1 font-extrabold">JOIN GAME PASS ></button>
</div>
</div>
</div>
</div>
<div class="my-8 grid grid-rows-2 grid-cols-3 min-[858px]:flex min-[858px]:justify-evenly min-[858px]:px-12">
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/37/ec/37ec5a7a-08b4-466f-93e3-81fb5dd0b471.svg?n=Homepage-FY20_Home-Icons-0_XGP_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] "><a href="./test.html">GAME PASS</a></p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/e2/a8/e2a830ea-71e7-42fa-af94-7a07d66f150e.svg?n=Homepage-FY20_Home-Icons-0_Games_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] m-0 p-0"><a href="./test.html">GAMES</a></p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/12/74/12744081-03f9-42a4-87be-e869ddce3327.svg?n=Homepage-FY20_Home-Icons-0_Consoles_72x56-02.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10] "><a href="./test.html">CONSOLES</a></p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/29/ff/29ffa9b2-2d48-433b-abb7-99229bcbaa8b.svg?n=Homepage-FY20_Home-Icons-0_Accessories_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10]"><a href="./test.html">ACCESSORIES</a></p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/b0/5e/b05eb3af-fda3-481c-8edc-585eb33b864a.svg?n=Homepage-FY20_Home-Icons-0_Play_72x56_02.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10]"><a href="./test.html">PLAY</a></p>
<div class="h-[2px] anime_d"></div>
</div>
<div class="flex flex-col items-center cursor-pointer anime">
<img src="https://assets.xboxservices.com/assets/30/ab/30abec76-ab4c-4275-b0ca-725a6eb2f85f.svg?n=Homepage-FY20_Home-Icons-0_Sign-In_72x56-01.svg" alt="Game Pass" class="h-14">
<p class="font-medium text-[#107c10]"><a href="./test.html">GAME PASS</a></p>
<div class="h-[2px] anime_d"></div>
</div>
</div>
<div class="contain">
<div class="mb-1 grid1">
<div class="h-[50rem] bg-[url('./images/jungle.jpg')] bg-no-repeat bg-cover bg-center relative mb-1">
<div class="absolute pl-5 text-white bottom-12">
<h1 class="text-5xl font-bold">Diablo® IV: Vessel of Hatred</h1>
<p class="my-8 text-2xl">The next chapter of Diablo IV coming October 8</p>
<span class="font-extrabold">PRE-ORDER NOW ></span>
</div>
</div>
</div>
<div class="mb-1 min-[858px]:flex grid2 min-[858px]:h-[25rem] min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/96/b1/96b1ed72-925c-43ff-aada-34052d9330ec.jpg?n=XGP-2024_Small-tout-0_6-09-24_1067x600.jpg" class="w-full img">
<div class="h-[20rem] bg-green-700 flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<span class="px-2 text-sm font-bold bg-yellow-400">JOIN NOW FOR $1</span>
<h2 class="my-4 text-4xl font-bold text-white">Discover your next favorite game</h2>
<p class="text-lg text-white">Play new games on day one. Enjoy hundreds of high-quality games on console, PC, and cloud. Play together with friends.</p>
<div class="my-4"><span class="text-base font-extrabold text-white">JOIN NOW ></span></div>
</div>
</div>
</div>
<div class="h-[50rem] bg-[url('./images/Ps.jpg')] bg-no-repeat bg-center bg-cover relative mb-1 grid3 poo">
<div class="absolute pl-5 text-white bottom-12">
<h1 class="text-5xl font-bold">Elevate your game</h1>
<p class="my-8 text-2xl">Stay on target and play on console, PC, and mobile</p>
<span class="font-extrabold">LEARN MORE ></span>
</div>
</div>
<div class="mb-1 grid4 min-[858px]:h-[25rem] min-[858px]:flex poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/71/e5/71e599e6-48c2-4863-8bf3-a1e5baf181e8.jpg?n=Visions-of-Mana_Small-tout-0_1067x600.jpg" class="w-full img">
<div class="h-[18rem] bg-green-700 flex flex-col justify-center px-7 min min-[858px]:h-[25rem]">
<div>
<h2 class="my-4 text-4xl font-bold text-white">Visions of Mana</h2>
<p class="text-lg text-white">A new adventure begins August 29th, 2024.</p>
<div class="my-4"><span class="text-base font-extrabold text-white">JOIN NOW ></span></div>
</div>
</div>
</div>
<div class="mb-1 grid5 min-[858px]:h-[25rem] min-[858px]:flex min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/59/35/59350105-789a-41fc-bd7e-56810e3b8030.jpg?n=786214_Small-tout-0_1067x600_01.jpg" class="w-full img">
<div class="h-[18rem] bg-green-700 flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<h2 class="my-4 text-4xl font-bold text-white">EA SPORTS™ Madden NFL 25</h2>
<p class="text-lg text-white">Nothing Hits Like Madden</p>
<div class="my-4"><span class="text-base font-extrabold text-white">PRE-ORDER NOW ></span></div>
</div>
</div>
</div>
<div class="mb-1 grid6 min-[858px]:h-[25rem] min-[858px]:flex min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/e4/ad/e4add2b4-19af-494e-a3a0-6cf3ab3d8175.jpg?n=9999390003_Small-tout-0_1067x600_01.jpg" class="w-full min-[858px]:w-2/4 img">
<div class="h-[18rem] bg-green-700 flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<h2 class="my-4 text-4xl font-bold text-white">The Elder Scrolls Online: Gold Road coming June 18</h2>
<p class="text-lg text-white">Pre-order for access to a new mount now and bonus rewards at launch.</p>
<div class="my-4"><span class="text-base font-extrabold text-white">PRE-ORDER NOW ></span></div>
</div>
</div>
</div>
<div class="mb-1 grid7 min-[858px]:h-[37.5rem] min-[858px]:flex min-[858px]:flex-row-reverse poo">
<img src="https://assets.xboxservices.com/assets/b5/35/b535e0c6-e37c-4156-a686-efe8819b6a1b.jpg?n=036489_Home-Hero-0_1067x667_01.jpg" class="w-full ">
<div class="h-[18rem] bg-gray-800 flex flex-col justify-center px-7 min-[858px]:h-[37.5rem]">
<div>
<span class="px-2 text-sm font-bold bg-yellow-400">INTRODUCING</span>
<h2 class="my-4 text-4xl font-bold text-white">Three new Xbox Series X|S consoles</h2>
<p class="text-lg text-white">More storage and design options, coming Holiday 2024</p>
<div class="my-4"><button class="bg-[#9bf00b] text-black px-5 py-1 font-extrabold">EXPLORE CONSOLES ></button></div>
</div>
</div>
</div>
<div class="mb-1 grid8 min-[858px]:h-[25rem] min-[858px]:flex min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/59/49/59495ba7-5c9e-4dd9-a3c8-4216423f9044.jpg?n=343859994_Small-tout-0_1067x600_01.jpg%202" class="w-full min-[858px]:w-2/4 img">
<div class="h-[18rem] bg-green-700 flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<span class="px-2 text-sm font-bold bg-yellow-400">NEW TRAILER</span>
<h2 class="my-4 text-4xl font-bold text-white">Assassin's Creed Shadows</h2>
<p class="text-lg text-white">Experience an epic historical action-adventure set in feudal Japan</p>
<div class="my-4"><span class="text-base font-extrabold text-white">PRE-ORDER NOW ></span></div>
</div>
</div>
</div>
<div class="mb-1 grid9 min-[858px]:h-[25rem] min-[858px]:flex min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/75/fb/75fb09ac-cf55-46a4-b835-077e0b508ed9.jpg?n=5059999333_Large-tout-0_1083x1222_01.jpg" class="w-full min-[858px]:w-2/4 img">
<div class="h-[18rem] bg-green-700 flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<span class="px-2 text-sm font-bold bg-yellow-400">AVAILABLE WITH GAME PASS</span>
<h2 class="my-4 text-4xl font-bold text-white">Journey to Skyline Valley</h2>
<p class="text-lg text-white">Explore a brand-new region of Appalachia in Fallout 76</p>
<div class="my-4"><span class="text-base font-extrabold text-white">GET IT NOW ></span></div>
</div>
</div>
</div>
<div class="mb-1 grid10 min-[858px]:h-[25rem] min-[858px]:flex poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/8a/20/8a200eea-9cdf-4535-bc24-0b2455e68c7d.jpg?n=029877277721_Small-tout-0_1067x600.jpg" class="w-full min-[858px]:w-2/4 img">
<div class="h-[18rem] bg-white flex flex-col justify-center px-7 min-[858px]:h-[25rem]">
<div>
<span class="px-2 text-sm font-bold bg-yellow-400">AVAILABLE WITH GAME PASS</span>
<h2 class="my-4 text-4xl font-bold text-black">Coming soon: Sea of Thieves Season 13</h2>
<p class="text-lg text-black">Join Flameheart’s crew and sail the most powerful ship</p>
<div class="my-4"><span class="text-base font-extrabold text-black">LEARN MORE ></span></div>
</div>
</div>
</div>
<div class="flex flex-col grid11 poo">
<div class="h-[50rem] bg-[url('./images/god.jpg')] bg-no-repeat bg-cover bg-center relative mb-1">
<div class="absolute pl-5 text-white bottom-12">
<span class="px-2 text-sm font-bold text-black bg-yellow-400">XBOX SERIES X|S · PC · CLOUD</span>
<h1 class="my-8 text-5xl font-bold">Senua's Saga: Hellblade II</h1>
<p class="mb-8 text-2xl">Available now with PC Game Pass or Ultimate</p>
<span class="font-extrabold">GET IT NOW ></span>
</div>
</div>
</div>
<div class="flex flex-col grid12 poo">
<div class="h-[50rem] bg-[url('./images/gola.jpg')] bg-no-repeat bg-[length:100%_100%] bg-center relative mb-1">
<div class="absolute pl-5 text-white bottom-12">
<span class="px-2 text-sm font-bold text-black bg-yellow-400">EVENT RECAP</span>
<h1 class="my-8 text-5xl font-bold">Relive every moment</h1>
<p class="mb-8 text-2xl">Xbox Games Showcase & Call of Duty®: Black Ops 6 Direct</p>
<span class="font-extrabold">EXPLORE MORE ></span>
</div>
</div>
</div>
<div class="grid13 min-[858px]:h-[25rem] min-[858px]:flex min-[858px]:flex-row-reverse poo overflow-hidden">
<img src="https://assets.xboxservices.com/assets/b1/27/b1270a51-8e5b-4abe-9830-23a62142fe7b.jpg?n=2905468_Small-tout-0_1067x600.jpg" class="w-full min-[858px]:w-2/4 img">
<div class="h-[18rem] bg-white flex flex-col justify-center px-7 text-black min-[858px]:h-[25rem]">
<h2 class="my-4 text-4xl font-bold">Celebrate Pride with Xbox</h2>
<p class="text-lg">Be loud and proud with Xbox in celebrating Pride month</p>
<div class="my-4"><span class="text-base font-extrabold">LEARN MORE ></span></div>
</div>
</div>
<div class="grid14 min-[858px]:h-[37.5rem] min-[858px]:flex poo">
<img src="https://assets.xboxservices.com/assets/5f/2a/5f2a28b0-be52-436a-9842-fbce84e068c3.jpg?n=XOG_Home-Hero-0_4-8-24_1067x667_01.jpg" class="w-full min-[858px]:h-[37.5rem] min-[858px]:w-[70%]">
<div class="h-[18rem] bg-white flex flex-col justify-center px-7 min-[858px]:h-[37.5rem]">
<div class="text-black min-[858px]:flex min-[858px]:flex-col min-[858px]:items-center min-[858px]:justify-start">
<h2 class="my-4 text-4xl font-bold">Xbox Gear Shop</h2>
<p class="text-lg">Check out the latest gear</p>
<div class="my-4 text-left"><button class="bg-[#9bf00b] text-black px-5 py-1 font-extrabold text-left">SHOP NOW ></button></div>
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center h-60 bg-slate-500">
<span class="text-2xl font-medium text-white">~Chandraprakash Pandey</span>
<div class="flex gap-3 my-4">
<img src="images/email (1).png" alt="" class="h-[2rem]">
<a href="mailto: [email protected]" class="text-lg text-white">[email protected]</a>
</div>
<div class="flex gap-[1.5rem]">
<a href="https://www.linkedin.com/in/chandraprakash-pandey/"><img src="images/linkedin.png" class="h-[2rem]"></a>
<a href="https://github.com/chandraprakash-pandey"><img src="images/github.png" class="h-[2rem]"></a>
</div>
</div>
</body>
</html>