-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
294 lines (255 loc) · 10.7 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
<!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="style.css">
<script src="https://kit.fontawesome.com/fc5ab9652a.js" crossorigin="anonymous"></script>
<title>Microsoft Landing Page</title>
</head>
<body>
<div class="container">
<div class="menu-btn">
<i class="fas fa-bars fa-2x"></i>
</div>
<!-- navbar -->
<nav class="nav-main">
<img src="./images/logo.png" alt="logo" class="logo">
<ul class="main-menu">
<li><a href="#">Microsoft 365</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Surface</a></li>
<li><a href="#">Xbox</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul class="right-menu">
<li><a href="/"><i class="fas fa-search"></i></a></li>
<li><a href="/"><i class="fas fa-shopping-cart"></i></a></li>
</ul>
</nav>
<!-- showcase -->
<header class="hero">
<div class="hero-content">
<h2>Save up to $200 on Surface Laptop 3</h2>
<p>Rise above the ordinary with the ultimate in speed and style</p>
<a href="/" class="btn">Shop now <i class="fas fa-chevron-right"></i></a>
</div>
</header>
<!-- products -->
<section class="product-container">
<div>
<a href="/">
<i class="fas fa-th-large fa-2x"></i>
<p>Choose you Microsoft 365</p>
</a>
</div>
<div>
<a href="/">
<i class="fas fa-laptop fa-2x"></i>
<p>Shop Surface devices</p>
</a>
</div>
<div>
<a href="/">
<i class="fab fa-xbox fa-2x"></i>
<p>Buy Xbox games and consoles</p>
</a>
</div>
<div>
<a href="/">
<i class="fab fa-windows fa-2x"></i>
<p>Shop Windows 10</p>
</a>
</div>
<div>
<a href="/">
<i class="fas fa-laptop-code fa-2x"></i>
<p>Find your next PC</p>
</a>
</div>
</section>
<!-- first cards -->
<section class="card-container">
<div class="card-items">
<a href="/">
<img src="./images/1 office package.png" alt="">
<h2>This is your 365</h2>
<p>Discover what's possible every day with Microsoft 365.</p>
<p class="more-info">For up to 6 people <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/2 surface.png" alt="">
<h2>Surface Pro 7</h2>
<p>Ultra-light and versatile, with faster processing and all-day batter life.</p>
<p class="more-info">Starting at $749.99 <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/3 xbox.jpg" alt="">
<h2>Xbox Game Pass Ultimate</h2>
<p>Xbox Live Gold and over 100 high-quality console and PC games. Play together with friends and
discover your next favorite game.</p>
<p class="more-info">Join now <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/4 build.png" alt="">
<h2>Microsoft Build</h2>
<p>Join Microsoft experts and developers around the world on May 19th-20th to learn, connect, and
code together</p>
<p class="more-info">Register today <i class="fas fa-chevron-right"></i></p>
</a>
</div>
</section>
<!-- showcase two -->
<section class="edge-container">
<a href="/">
<h2>Introducing the new Microsoft Edge</h2>
<p>World-class performance with more privacy, more productivity, and more value while you browse</p>
<a href="/" class="btn">Download now <i class="fas fa-chevron-right"></i></a>
</a>
</section>
<!-- second cards -->
<section class="card-container">
<div class="card-items">
<a href="/">
<img src="./images/6 business.jpg" alt="">
<h2>Microsoft 365 for business</h2>
<p>Microsoft 365 for business provides powerful services that can help you run and grow your
business.</p>
<p class="more-info">Shop now <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/7 laptop.png" alt="">
<h2>Windows 10 Enterprise</h2>
<p>Download the free 90-day evualuation for It professionals</p>
<p class="more-info">Download now <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/8 online.png" alt="">
<h2>Create an online classroom</h2>
<p>Get expert tips on how to use Microsoft Teams--free to educators and students--to create
assignments, collaborate virtually, and more.</p>
<p class="more-info">Learn now <i class="fas fa-chevron-right"></i></p>
</a>
</div>
<div class="card-items">
<a href="/">
<img src="./images/9 kuber.png" alt="">
<h2>Explore Kunernetes</h2>
<p>Learn how Kubernetes works and get started with cloud native app development today.</p>
<p class="more-info">Get started <i class="fas fa-chevron-right"></i></p>
</a>
</div>
</section>
<!-- explore -->
<section class="forest">
<div class="forest-content">
<h2>Conserving our forests</h2>
<p>Nature is vital to us all. Hear what forests mean to people, and how we can protect them.</p>
<a href="/" class="btn-inverse">Read the stories <i class="fas fa-chevron-right"></i></a>
</div>
</section>
<!-- socials -->
<section class="socials">
<p>Follow Microsoft </p>
<img src="./images/social-fb.png" alt="">
<img src="./images/social-twitter.png" alt="">
<img src="./images/social-linkedin.png" alt="">
</section>
</div>
<!-- links -->
<section class="links">
<div class="links-inner">
<ul>
<li>
<h3>Whats new</h3>
</li>
<li><a href="">Microsoft 365</a></li>
<li><a href="">Surface Pro X</a></li>
<li><a href="">Surface Laptop 3</a></li>
<li><a href="">Surface Pro 7</a></li>
<li><a href="">Windows 10 apps</a></li>
</ul>
<ul>
<li>
<h3>Microsoft Store</h3>
</li>
<li><a href="">Account profile</a></li>
<li><a href="">Download Center</a></li>
<li><a href="">Microsoft Store support</a></li>
<li><a href="">Returns</a></li>
<li><a href="">Order tracking</a></li>
<li><a href="">Store locations</a></li>
<li><a href="">Buy online, pick up in store</a></li>
<li><a href="">In-store events</a></li>
</ul>
<ul>
<li>
<h3>Education</h3>
</li>
<li><a href="">Microsoft in education</a></li>
<li><a href="">Office for students</a></li>
<li><a href="">Office 365 for schools</a></li>
<li><a href="">Deals for students & parents</a></li>
<li><a href="">Microsoft Azure in education</a>
</li>
</ul>
<ul>
<li>
<h3>Enterprise</h3>
</li>
<li><a href="">Azure</a></li>
<li><a href="">AppSource </a></li>
<li><a href="">Automotive</a></li>
<li><a href="">Government</a></li>
<li><a href="">Healthcare</a></li>
<li><a href="">Manufacturing</a></li>
<li><a href="">Financial services</a></li>
<li><a href="">Retail</a></li>
</ul>
<ul>
<li>
<h3>Developer</h3>
</li>
<li><a href="">Microsoft Visual Studio</a></li>
<li><a href="">Windows Dev Center</a></li>
<li><a href="">Developer Network</a></li>
<li><a href="">TechNet</a></li>
<li><a href="">Microsoft developer program</a></li>
<li><a href="">Channel 9</a></li>
<li><a href="">Office Dev Center</a></li>
<li><a href="">Microsoft Garage</a></li>
</ul>
<ul>
<li>
<h3>Company</h3>
</li>
<li><a href="">Careers</a></li>
<li><a href="">About Microsoft</a></li>
<li><a href="">Company news</a></li>
<li><a href="">Privacy at Microsoft</a></li>
<li><a href="">Investors</a></li>
<li><a href="">Diversity and inclusion</a></li>
<li><a href="">Accessibility</a></li>
<li><a href="">Security</a></li>
</ul>
</div>
<!-- </section> -->
<!-- footer -->
<!-- <footer class="footer"> -->
<!-- </footer> -->
<!-- footer main -->
<script>document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('.main-menu').classList.toggle('show'))</script>
</body>
</html>