-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
428 lines (412 loc) · 25.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
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
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
<!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="input.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Microsoft - Cloud, Computers, Apps & Gaming</title>
</head>
<body>
<div class="container mx-auto max-w-[90%]">
<div class="navbar mx-auto flex justify-between items-center py-4">
<div class="flex justify-center items-center md:hidden">
<div class="hamburger inline-block p-4 cursor-pointer md:hidden">
<div class="line h-0.5 w-6 my-1 bg-black "></div>
<div class="line h-0.5 w-6 my-1 bg-black "></div>
<div class="line h-0.5 w-6 my-1 bg-black "></div>
</div>
<div class="search md:hidden w-5 scale-x-[-1]"><img src="./assets/search.svg" alt=""></div>
</div>
<div class="logo text-center md:order-1 flex">
<div class="w-[120px] mx-2 ml-12 md:ml-0 py-4 px-1">
<img src="./assets/mslogo.png" alt="Microsoft">
</div>
<div
class="featues absolute w-fit md:w-auto inset-0 md:flex md:mx-4 md:space-x-4 -translate-x-96 md:bg-white md:translate-x-0 md:relative bg-gray-200 justify-center items-center">
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Microsoft 365</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Teams
</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Copilot
</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Windows
</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Surface
</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Xbox
</div>
<div
class="fitems hover:underline cursor-pointer hover:underline-offset-2 hover:decoration-2 hover:text-gray-800">
Support
</div>
</div>
</div>
<div class="account text-center flex justify-between space-x-7 items-center md:order-3">
<div class="search hidden md:flex md:relative space-x-2">
<span
class="text-[14px] hover:underline hover:underline-offset-2 hover:cursor-pointer hover:decoration-2">All
Microsoft</span>
<img class="w-2 my-2 mx-10 scale-x-[-1]" src="./assets/down-arrow-svgrepo-com.svg" alt="">
</div>
<div class="search hidden md:flex md:relative space-x-2">
<span
class="text-[14px] hover:underline hover:underline-offset-2 hover:cursor-pointer hover:decoration-2">Search</span>
<img class="w-5 mx-10 scale-x-[-1]" src="./assets/search.svg" alt="">
</div>
<div class="search hidden md:flex md:relative space-x-2">
<span
class="text-[14px] hover:underline hover:underline-offset-2 hover:cursor-pointer hover:decoration-2">Cart</span>
<img class="w-5 mx-10 scale-x-[-1]" src="./assets/cart icon.svg" alt="">
</div>
<div class="search hidden md:flex md:relative space-x-3 cursor-pointer">
<span class="text-[14px]">Sign In</span>
<img class="w-5 mx-10 scale-x-[-1]" src="./assets/account icon.svg" alt="">
</div>
<div class="search md:hidden flex relative space-x-1">
<img class="w-5 my-2 scale-x-[-1]" src="./assets/cart icon.svg" alt="">
</div>
<div class="search md:hidden flex relative space-x-1">
<img class="w-5 my-2 mx-1 scale-x-[-1]" src="./assets/account icon.svg" alt="">
</div>
</div>
</div>
<div
class="slider mx-auto flex items-center space-x-[20px] flex-col-reverse justify-between md:flex-row bg-[#f2f2f2]">
<div class="left flex flex-col justify-center items-center md:items-baseline md:mx-[130px] py-12">
<h1 class="text-3xl font-medium mx-5"> Surface Laptop 4</h1>
<p class="w-[100%] mx-5 md:text-left my-3 text-center">Do it all with a perfect balance of sleek,
ultra-thin design, multitasking speed and improved performance.</p>
<button class="text-white bg-black px-4 py-2 my-2 mx-5 font-bold hover:bg-gray-800">Shop Now ></button>
</div>
<div class="right w-48 md:w-[60rem]">
<img src="./assets/ms.webp" alt="">
</div>
</div>
<div class="promo md:flex md:flex-row mx-auto space-y-3 my-7 justify-between">
<div class="item flex items-center mx-4 space-x-2">
<img src="assets/ic1.png" alt="Windows">
<span class="font-medium">Choose your Microsoft 365</span>
</div>
<div class="item flex items-center mx-4 space-x-2">
<img src="assets/ic2.webp" alt="Windows">
<span class="font-medium">Explore Surface Devices</span>
</div>
<div class="item flex items-center mx-4 space-x-2">
<img src="assets/ic3.webp" alt="Windows">
<span class="font-medium">Buy Xbox games</span>
</div>
<div class="item flex items-center mx-4 space-x-2">
<img src="assets/ic4.png" alt="Windows">
<span class="font-medium">Get Windows 11</span>
</div>
</div>
<div class="4ads w-[100%] flex-wrap m-auto items-center mx-auto md:space-x-8 flex flex-col md:flex-row">
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[440px]">
<img src="./assets/item1.webp" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Xbox Series X</span>
<span class="ml-6 text-[16px] mt-2 mb-[110px]">The fastest, most powerful Xbox ever.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Shop Xbox Series
X</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[440px]">
<img src="./assets/item2.webp" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Xbox Series S</span>
<span class="ml-6 text-[16px] mt-2 mb-[89px]">Next-gen performance in the smallest Xbox ever.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Shop Xbox Series
S</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[440px]">
<img src="./assets/item3.avif" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Copilot is your AI companion</span>
<span class="ml-6 mr-4 text-[16px] mt-2 mb-[20px]">Always by your side, ready to support you whenever
and wherever you need it.</span>
<button class="ml-6 mb-6 w-[220px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Download the
Copilot app</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[440px]">
<img src="./assets/item4.avif" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Xbox Series X</span>
<span class="ml-6 mr-5 text-[16px] mt-2 mb-[39px]">Play new games on day one. Plus, enjoy hundreds of
high-quality games with friends on console and PC.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Join
Now</button>
</div>
<div class="item1 shadow-glow m-4 md:hidden flex flex-col w-[309px] h-[450px]">
<img src="./assets/thonk.png" alt="">
<span class="text-[26px] font-medium mx-3 mt-4">Maximise the everyday with Microsoft 365</span>
<span class="ml-3 mr-3 text-[16px] mt-2 mb-[19px]">Get online protection, secure cloud
storage and innovative apps designed to fit your needs – all in one plan.</span>
<div class="butlow flex flex-row items-center ml-3 mb-6 space-x-5">
<button class="w-[115px] text-[14px] font-medium text-white p-2 bg-[#0067b8]">For one
person</button>
<span
class="text-[14px] text-[#0067b8] font-medium hover:underline hover:decoration-2 hover:cursor-pointer">For
up to six people ></span>
</div>
</div>
</div>
<div
class=" w-[99%] mx-4 mt-10 hidden slider md:flex items-center space-x-[20px] justify-between flex-row bg-[#c2e1fe]">
<div class="left flex flex-col justify-cente items-baseline mx-[110px] py-12">
<h1 class="text-[37px] font-medium mx-1">Maximise the everyday with Microsoft 365</h1>
<p class="w-[100%] text-[16px] mx-1 md:text-left my-3 text-center">Get online protection, secure cloud
storage and innovative apps designed to fit your needs – all in one plan.</p>
<button class="text-white bg-[#0067b8] px-4 py-2 my-2 mx-5 font-medium hover:bg-gray-800">For one
person</button>
<div class="search">
<span
class="mt-[400px] text-[16px] text-[rgb(0,0,0,)] font-medium hover:text-[#000000] hover:underline hover:cursor-pointer">For
up to six people ></span>
</div>
</div>
<div class="right w-[1900px]">
<img src="./assets/thonk.png" alt="">
</div>
</div>
<div class="for text-[37px] mt-[80px] mx-4 font-medium">For business</div>
<div
class="4ads w-[100%] flex-wrap m-auto items-center mx-auto md:space-x-8 flex flex-col mt-[5px] md:flex-row">
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[450px]">
<img src="./assets/bi1.avif" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Surface for Business</span>
<span class="ml-6 text-[16px] mt-2 mb-[95px]">No matter what you do, there’s a Surface to help you do
it.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Shop
Now</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[450px]">
<img src="./assets/bi2.avif" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Microsoft 365 Copilot</span>
<span class="ml-6 mr-[4px] text-[16px] mt-2 mb-[29px]">Save time and focus on the things that matter
most with AI in Microsoft 365 for business.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Learn
More</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[450px]">
<img src="./assets/bi3.avif" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Get Microsoft Teams for your business</span>
<span class="ml-6 mr-4 text-[16px] mt-2 mb-[20px]">Online meetings, chat, real-time collaboration, and
shared cloud storage – all in one place.</span>
<button
class="ml-6 mb-6 w-[260px] text-[16px] text-left font-medium text-white p-2 leading-4 bg-[#0067b8]">Find
the right plan for your business</button>
</div>
<div class="item1 shadow-glow m-4 flex flex-col w-[309px] h-[450px]">
<img src="./assets/bi4.jpeg" alt="">
<span class="text-[28px] font-medium mx-6 mt-4">Windows 11 for business</span>
<span class="ml-6 mr-5 text-[16px] mt-2 mb-[28px]">Designed for hybrid work. Powerful for employees.
Consistent for IT. Secure for all.</span>
<button class="ml-6 mb-6 w-[170px] text-[16px] font-medium text-white p-2 bg-[#0067b8]">Learn
More</button>
</div>
</div>
</div>
<div class="footer h-[100%] w-[100%] mt-10 mb-0 pl-[50px] pb-4 bg-[#f2f2f2]">
<div class="list flex flex-col md:flex-row md:space-x-[80px] mb-3">
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4">What's new</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Surface Pro</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Surface Laptop</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Copilot</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft 365</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Explore Microsoft products</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 mb-0 hover:text-[#000000] hover:underline hover:cursor-pointer">
Windows 11 apps</div>
</div>
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4">Microsoft Store</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Account profile</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Download Center</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Store Support</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Returns</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Order tracking</div>
</div>
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4">Education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft in education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Devices for education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Teams for Education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft 365 Education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Office Education</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Educator training and development</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Deals for students and parents</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Azure for students</div>
</div>
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4">Business</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Cloud</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Security</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Azure</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Dynamics 365</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft 365</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Advertising</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft 365 Copilot</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Teams</div>
</div>
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4">Developer & IT</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Developer Center</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Documentation</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Learn</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Tech Community</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Azure Marketplace</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
AppSource</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Microsoft Power Platform</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Visual Studio</div>
</div>
<div class="l1">
<div class="l1 text-[15px] pt-[25px] text-[rgb(97,97,97)] font-medium m-4"> Company </div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Careers</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
About Microsoft</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Company news</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Privacy at Microsoft</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Investors</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Security</div>
<div
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Sustainability</div>
</div>
</div>
<div class="flex justify-between flex-col md:flex-row w-[95%] md:mr-[50px] md:ml-[0px]">
<div class="3logo flex md:items-center mb-4 md:mb-0 flex-col md:flex-row md:space-x-6">
<div class="search items-center flex relative space-x-2 mb-[-10px] md:mb-0">
<img class="w-6 h-6 opacity-60" src="../assets/world.svg" alt="">
<span
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">English
(India)</span>
</div>
<div class="search items-center flex relative space-x-2 mb-[-10px] md:mb-0">
<img class="w-8 h-7" src="./assets/privacy-removebg-preview.png" alt="">
<span
class="l1 text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">Your
Privacy Choices</span>
</div>
<div
class="l1 text-[11px] ml-[3px] md:ml-0 text-[rgba(0,0,0,0.7)] my-4 hover:text-[#000000] hover:underline hover:cursor-pointer">
Consumer Health Policy</div>
</div>
<div class="right-0 account text-center flex flex-wrap justify-center items-center space-x-1 md:order-3">
<div class="search">
<span
class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">Contact
Microsoft</span>
</div>
<div class="search">
<span
class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">Privacy</span>
</div>
<div class="search">
<span
class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">Terms
of Use</span>
</div>
<div class="search">
<span
class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">Trademarks</span>
</div>
<div class="search">
<span
class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4 hover:text-[#000000] hover:underline hover:cursor-pointer">About
our Ads</span>
</div>
<div class="search">
<span class=" text-[11px] text-[rgba(0,0,0,0.7)] m-4">Microsoft 2024</span>
</div>
</div>
</div>
</div>
</body>
</html>