-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
274 lines (258 loc) · 18.4 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
<!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="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<title>Microsoft – Cloud, Computers, Apps & Gaming</title>
</head>
<body>
<div class="container mx-auto">
<div class="navbar flex justify-between items-center p-4">
<div class="flex justify-center items-center md:order-2">
<div class="hamburger inline-block cursor-pointer p-4 md:hidden">
<div class="line w-6 my-1 bg-black h-0.5"></div>
<div class="line w-6 my-1 bg-black h-0.5"></div>
<div class="line w-6 my-1 bg-black h-0.5"></div>
</div>
<div class="search md:hidden"><img width="20px" src="assets/searchicon.svg" alt="" srcset=""></div>
</div>
<div class="logo text-center md:order-1 flex">
<div class="mslogo flex justify-start p-4 w-[50%]"><img
src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31"
alt="" srcset=""></div>
<div
class="features inset-0 w-fit md:w-auto md:items-center bg-gray-200 md:bg-white absolute md:static md:flex md:mx-4 md:space-x-6 -translate-x-96 md:translate-x-0">
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Microsoft 365</div>
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Office</div>
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Windows</div>
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Surface</div>
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Xbox</div>
<div class="fitem hidden md:block md:hover:underline md:cursor-pointer">Support</div>
</div>
</div>
<div class="cart text-center md:order-3 flex space-x-1">
<div class="search hidden md:block mr-6"> All Microsoft</div>
<img class="w-4 mr-4" src="assets/searchicon.svg" alt="" srcset="">
<div class="permanent flex md:mt-1">
<img class="w-4 mr-4 h-4" src="assets/icons8-shopping-cart-24.png" alt="" srcset="">
<img class="w-4 mr-4 h-4" src="assets/icons8-male-user-50.png" alt="" srcset="">
</div>
</div>
</div>
<div class="slider flex flex-col-reverse md:flex-row bg-[#e6e6e6] mx-5">
<div class="left flex flex-col justify-center items-center md:items-baseline py-12">
<h1 class="text-2xl font-medium md:text-4xl mx-5">
Surface Laptop 4
</h1>
<p class="w-3/4 mx-5 text-center md:text-left">Do it all with a perfect balance of sleek, ultra thin
design, multitasking speed and improved performance</p>
<button class="text-white bg-black my-5 font-bold px-4 py-2 mx-5">Shop Now </button>
</div>
<div class="right ">
<img class="md:w-auto md:h-[25rem]"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/SurfaceLaptop4playvideo_tbmnl_en-ae?scl=1"
alt="" srcset="">
</div>
</div>
<div class="promo space-y-6 flex flex-col md:flex-row md:justify-center">
<div class="item flex items-center mx-4 space-x-2 md:flex-col md:text-center mt-6">
<img src="assets/i2.webp" alt="">
<span class="font-medium underline text-blue-500 cursor-pointer">Choose your Microsoft 365</span>
</div>
<div class="item flex items-center mx-4 space-x-2 md:flex-col md:text-center">
<img src="assets/i3.webp" alt="">
<span class="font-medium underline text-blue-500 cursor-pointer">Explore Surface devices</span>
</div>
<div class="item flex items-center mx-4 space-x-2 md:flex-col md:text-center">
<img src="assets/i4.webp" alt="">
<span class="font-medium underline text-blue-500 cursor-pointer">Buy Xbox games</span>
</div>
<div class="item flex items-center mx-4 space-x-2 md:flex-col md:text-center">
<img src="assets/i5.webp" alt="">
<span class="font-medium underline text-blue-500 cursor-pointer">Get Windows 11</span>
</div>
</div>
<div class="first cards justify-center items-center flex flex-col md:flex-row md:space-x-5 md:mt-5 space-y-5">
<div class="citem mx-5 mt-6 md:w-[40rem] md:h-[40rem]">
<img class="md:h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Surface-Laptop-5-M1-Platinum-01-1?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Surface Laptop 4</h1>
<p>Sophisticated style and multitasking speed powered by 12th Gen Intel® Core, with Windows 11.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Learn More ➔</span>
</div>
<div class="citem mx-5 md:w-[40rem] md:h-[40rem] md:mt-4">
<img class="h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Surface-Laptop-Studio-01-CP?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Surface Laptop Studio</h1>
<p>Flex your creative muscle on the most powerful Surface Laptop. Now available with Windows 11.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Learn More ➔</span>
</div>
<div class="citem mx-5 mr-80 md:w-[40rem] md:h-[40rem]">
<img class="h-40 "
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-XSS-CP-Xbox-Series-S-Evergreen?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Xbox Series S</h1>
<p>Next-gen performance in the smallest Xbox ever.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Shop Now ➔</span>
</div>
<div class="citem mx-5 md:w-[40rem] md:h-[40rem]">
<img class="h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Bing-AI-No-Text?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Intorducing the new Bing</h1>
<p>Your AI-powered copilot for the web. Ask questions. Chat to refine results. Get comprehensive answers
and creative inspiration.</p>
<div class="flex flex-col space-y-4">
<span class="font-medium underline text-blue-500 cursor-pointer">Join the Bing preview ➔</span>
<span class="font-medium underline text-blue-500 cursor-pointer">Learn about Image Creator in Bing ➔</span>
</div>
</div>
</div>
<div class="xbox-image -mt-6 md:justify-center md:items-center md:-mt-44 md:bg-gray-100 sm:space-y-4 flex flex-col md:flex-row">
<div class="left md:w-3/4"><img
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Highlight-Xbox-Series-S-Light-Background:VP5-1596x600"
alt="" srcset=""></div>
<div class="right space-y-2 md:w-1/4 md:h-24 md:mr-20 md:align-middle">
<h1 class="text-2xl font-semibold">Xbox Series X</h1>
<p>The fastest, most powerful Xbox ever</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-2 rounded-sm cursor-pointer">Shop Now</button>
</div>
</div>
<div class="heading bold">
<h1 class="text-semibold font-medium text-3xl mt-5">For Buisness</h1>
</div>
<div class="second cards justify-center items-center flex flex-col md:flex-row md:space-x-5 md:mt-5 space-y-5">
<div class="citem mx-5 mt-6 md:w-[40rem] md:h-[40rem] space-y-4">
<img class="md:h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Surface-Family-2022-M2-1?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Surface for Buisness Family</h1>
<p>Surface for Business devices enable work on your team's terms with flexibility, built-in security and
the power they need to succeed.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Learn More ➔</span>
</div>
<div class="citem mx-5 mt-6 md:w-[40rem] md:h-[40rem] space-y-4">
<img class="md:h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Microsoft-365-For-Business-Woman-Teams-Call?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Try Microsoft 365 for free</h1>
<p>Get Microsoft Teams, secure cloud storage and premium apps across devices with a free one-month
Microsoft 365 Business Standard trial.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Start your free trial now ➔</span>
</div>
<div class="citem mx-5 mt-6 md:w-[40rem] md:h-[40rem] space-y-4">
<img class="md:h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Brand-Hybrid-Work?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Thrive in a hybrid world</h1>
<p>Discover tools, resources and strategies to help your employees succeed in the new world of flexible
work.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Learn More ➔</span>
</div>
<div class="citem mx-5 mt-6 md:w-[40rem] md:h-[40rem] space-y-4">
<img class="md:h-40"
src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Visual-Studio-Icon?wid=380&hei=213&fit=crop"
alt="" srcset="">
<h1 class="text-xl font-semibold">Visual Studio 2022</h1>
<p>Get the most comprehensive IDE for .NET and C++ developers on Windows for building web, cloud,
desktop, mobile apps, services and games.</p>
<span class="font-medium underline text-blue-500 cursor-pointer">Download Visual Studio 2022 ➔</span>
</div>
</div>
<div class="social media flex space-x-4 items-center mt-4 md:-mt-44 mx-5">
<h1 class="font-light text-2xl">Follow Microsoft </h1>
<a href="https://www.facebook.com/MicrosoftIndia" target="_blank"><img class="h-10 w-10" src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Facebook%202x?scl=1"
alt="" srcset=""></a>
<a href="https://twitter.com/microsoftindia" target="_blank"><img class="h-10 w-10" src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Twitter%202x?scl=1"
alt="" srcset=""></a>
<a href="https://www.youtube.com/user/IndiaMicrosoftVideos" target="_blank"><img class="h-10 w-10" src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/YouTube%202x?scl=1"
alt="" srcset=""></a>
</div>
<div class="list bg-gray-50 mx-5 justify-center space-x-16 mt-5 flex flex-col md:flex-row">
<div class="left flex flex-row">
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">What's New</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft 365</li>
<li class="hover:underline cursor-pointer hover:font-medium">Games</li>
<li class="hover:underline cursor-pointer hover:font-medium">Surface Pro 9</li>
<li class="hover:underline cursor-pointer hover:font-medium">Surface Laptop 5</li>
<li class="hover:underline cursor-pointer hover:font-medium">Surface Laptop Studio</li>
<li class="hover:underline cursor-pointer hover:font-medium">Surface Laptop Go 2</li>
<li class="hover:underline cursor-pointer hover:font-medium">Windows 11 apps</li>
</ul>
</div>
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">Microsoft Store</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Store</li>
<li class="hover:underline cursor-pointer hover:font-medium">Account profile</li>
<li class="hover:underline cursor-pointer hover:font-medium">Download Center</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Store Support</li>
<li class="hover:underline cursor-pointer hover:font-medium">Returns</li>
<li class="hover:underline cursor-pointer hover:font-medium">Order tracking</li>
</ul>
</div>
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">Education</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft in education</li>
<li class="hover:underline cursor-pointer hover:font-medium">Devices for education</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Teams for Education</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft 365 Education</li>
<li class="hover:underline cursor-pointer hover:font-medium">Office Education</li>
<li class="hover:underline cursor-pointer hover:font-medium">Educator training and development</li>
<li class="hover:underline cursor-pointer hover:font-medium">Deals for students and parents</li>
<li class="hover:underline cursor-pointer hover:font-medium">Azure for students</li>
</ul>
</div>
</div>
<div class="right flex flex-row">
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">Buisness</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Cloud</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Security</li>
<li class="hover:underline cursor-pointer hover:font-medium">Azure</li>
<li class="hover:underline cursor-pointer hover:font-medium">Dynamics 365</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft 365</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Advertising</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Industry</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Teams</li>
</ul>
</div>
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">Developer and IT</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Developer Center</li>
<li class="hover:underline cursor-pointer hover:font-medium">Documentation</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Learn</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Tech Community</li>
<li class="hover:underline cursor-pointer hover:font-medium">Azure Marketplace</li>
<li class="hover:underline cursor-pointer hover:font-medium">AppSource</li>
<li class="hover:underline cursor-pointer hover:font-medium">Microsoft Power Platform</li>
<li class="hover:underline cursor-pointer hover:font-medium">Visual Studio</li>
</ul>
</div>
<div class="listitem w-1/3 space-y-2">
<h4 class="font-normal text-base hover:underline cursor-pointer">Company</h4>
<ul class="space-y-2 font-light text-sm">
<li class="hover:underline cursor-pointer hover:font-medium">Careers</li>
<li class="hover:underline cursor-pointer hover:font-medium">About Microsoft</li>
<li class="hover:underline cursor-pointer hover:font-medium">Company news</li>
<li class="hover:underline cursor-pointer hover:font-medium">Privacy at Microsoft</li>
<li class="hover:underline cursor-pointer hover:font-medium">Investors</li>
<li class="hover:underline cursor-pointer hover:font-medium">Security</li>
<li class="hover:underline cursor-pointer hover:font-medium">Sustainability</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>