MicrosoftClone/micro.htm at main · DevAta515/MicrosoftClone · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/46cd246def.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style1.css">
    <title>Document</title>
</head>
<body class="box-border m-0 p-0">
    <div class="nav bg-[#fff] flex justify-between">
        <ul class="list-none flex h-[54px] items-center text-center pl-16 space-x-5 text-sm cursor-pointer">
            <li><img class="w-[108px] h-[23]" src="logo.png" alt=""></li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">Microsoft 360</li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">Teams</li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">Windows</li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">Surface</li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">X Box</li>
            <li class="hover:underline hover:underline-offset-4 decoration-2">Support</li>
        </ul>
        <ul class="flex list-none h-[54px] items-center text-center mr-16 space-x-5 text-sm cursor-pointer">
            <li class="hover:underline hover:underline-offset-4 decoration-2 ">All Microsoft</li>
            <span class="absolute right-[158px] ">^</span>
            <li ><i class="fa-sharp fa-solid fa-magnifying-glass fa-flip-horizontal"></i></li>
            <li ><i class="fa-sharp fa-solid fa-cart-shopping"></i></li>
            <li ><i class="fa-regular fa-circle-user"></i></li>
        </ul>
    </div>
    <div class="check w-full h-[565px] flex items-center justify-center relative pl-[700px] ">
        <div class="text w-[400px] h-[200px] flex flex-col relative pl-10 justify-center space-y-5">
            <p class="text-3xl font-semibold">Surface Pro 9</p>
            <p class="2">Tablet versatility and laptop power — all in one ultra-portable device</p>
            <p><button class="text-white text-md font-semibold px-4 py-2 border-1 border-sky-700 rounded-sm bg-sky-600 hover:cursor-pointer hover:bg-sky-700">Learn More</button></p>
        </div>
    </div>
    <div class="buttons flex justify-center space-x-6 mt-4">
        <span><i class="fa-solid fa-pause hover:cursor-pointer"></i></span>
        <span><i class="fa-solid fa-angle-left hover:cursor-pointer"></i></span>
        <span><i class="fa-regular fa-circle"></i></span>
        <span><i class="fa-solid fa-circle"></i></span>
        <span><i class="fa-solid fa-angle-left fa-flip-horizontal hover:cursor-pointer"></i></span>
    </div>
    <div class="options">
        <ul class="list-none flex justify-center space-x-2 mt-16">
            <li class="flex flex-col w-[195px] h-[90px] items-center leading-none"><img class="w-10 h-10 justify-center" src="windows.webp" alt="cloud"><br><a class="font-semibold text-md hover:cursor-pointer text-blue-700 underline tracking-tighter" href="#">Choose your Microsoft 365</a></li>
            <li  class="flex flex-col w-[195px] h-[90px] items-center leading-none"><img class="" src="surface.webp" alt="cloud"><br><a class="font-semibold text-md hover:cursor-pointer text-blue-700 underline tracking-tighter" href="#">Explore Surface Devices</a></li>
            <li  class="flex flex-col w-[195px] h-[90px] items-center leading-none"><img class="" src="xbox.webp" alt="cloud"><br><a class="font-semibold text-md hover:cursor-pointer text-blue-700 underline tracking-tighter" href="#">Buy Xbox Games</a></li>
            <li  class="flex flex-col w-[195px] h-[90px] items-center leading-none"><img class="" src="windows.webp" alt="cloud"><br><a class="font-semibold text-md hover:cursor-pointer text-blue-700 underline tracking-tighter" href="#">Get Windows 11</a></li>
        </ul>
    </div>
    <div class="bar flex justify-between ml-16 mt-20">
        <div class="bar1 flex-col w-[282px] space-y-4">
            <img class="" src="pro.jpeg" alt="cloud">
            <h1 class="head text-2xl font-semibold">Surface Laptop 5</h1>
            <p class="font-[450]">
                Sophisticated style and multitasking speed powered by 12th Gen Intel® Core, with Windows 11.
            </p>
            <br>
            <a class="text-blue-700 font-semibold hover:cursor-pointer hover:underline">Learn more</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span>
        </div>
        <div class="bar1 flex-col w-[282px] space-y-4">
            <img class="" src="x.webp" alt="cloud">
            <h1 class="head text-2xl font-semibold">Xbox Series S</h1>
            <p class="font-[450]">
                Next-gen performance in the smallest Xbox ever.
            </p>
            <br>
            <a class="text-blue-700 font-semibold hover:cursor-pointer hover:underline">Shop Xbox Series S</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span>
        </div>
        <div class="bar1 flex-col w-[282px] space-y-4">
            <img class="" src="ai.avif" alt="cloud">
            <h1 class="head text-2xl font-semibold">Announcing the next wave of AI innovation</h1>
            <p class="font-[450]">
                The new Microsoft Bing and Edge will soon feature more visual search responses, chat history, and persistent chat within Edge. We’re also adding actions to help people complete tasks.
            </p>
            <br>
            <a class="text-blue-700 font-semibold hover:cursor-pointer hover:underline">Learn more about it</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span>
        </div>
        <div class="bar1 flex-col w-[282px] space-y-4">
            <img class="" src="game.avif" alt="cloud">
            <h1 class="head text-2xl font-semibold">Xbox Game Pass Ultimate</h1>
            <p class="font-[450]">
                Xbox Live Gold and hundreds of high-quality console and PC games. Play together with friends and discover your next favourite game.
            </p>
            <br>
            <a class="text-blue-700 font-semibold hover:cursor-pointer hover:underline">Join now</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd"></i></span>
        </div>
    </div>
    <div class="big mt-28 flex items-center">
        <div class="text-white w-[353px] h-[230px] flex-col space-y-5 ml-28">
            <h1 class="h text-3xl font-semibold">
                Designed for life today – and tomorrow
            </h1>
            <p class="text-[15px] mb-2">
                The next-generation of games. Your goals. Friends and family. Windows 11 was made to bring you closer to everything you love.
            </p>
            <p class="text-white font-[500] text-[15px] bg-blue-700 border-2 border-blue-700 rounded-sm hover:cursor-pointer hover:bg-blue-900  hover:border-blue-900 px-4 py-2 w-48 mt-4">
                See if your PC is ready
            </p>
        </div>
    </div>
    <h1 class="text-3xl font-semibold ml-[66.2px] mt-24">For Business</h1>
    <div class="bars flex ml-[62px] mt-6 space-x-4">
        <div class="first w-[305px] h-[368px] flex-col space-y-6">
            <img class="" src="b1.avif" alt="cloud">
            <h1 class="text-2xl font-semibold">Surface for Business</h1>
            <p class="text-lg ">No matter what you do, there’s a Surface to help you do it.</p>
            <p> <a class="pt-1 text-blue-600 hover:cursor-pointer hover:underline font-semibold">Shop now</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span></p>
        </div>
        <div class="first w-[305px] h-[368px] flex-col space-y-6">
            <img class="" src="b2.webp" alt="cloud">
            <h1 class="text-2xl font-semibold">Get Microsoft Teams for free</h1>
            <p class="text-lg ">Online meetings, chat and shared cloud storage – all in one place.</p>
            <p> <a class="pt-1 text-blue-600 hover:cursor-pointer hover:underline font-semibold">Sign up for free</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span></p>
        </div>
        <div class="first w-[305px] h-[368px] flex-col space-y-6">
            <img class="" src="b3.jpeg" alt="cloud">
            <h1 class="text-2xl font-semibold">Windows 11 for business</h1>
            <p class="text-lg ">Designed for hybrid work. Powerful for employees. Consistent for IT. Secure for all.</p>
            <p> <a class="pt-1 text-blue-600 hover:cursor-pointer hover:underline font-semibold">Learn more</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span></p>
        </div>
        <div class="first w-[305px] h-[368px] flex-col space-y-6">
            <img class="" src="b4.webp" alt="cloud">
            <h1 class="text-2xl font-semibold">Try Microsoft 365 for free</h1>
            <p class="text-lg ">Get Microsoft Teams, secure cloud storage and premium apps across devices with a free one-month Microsoft 365 Business Standard trial.</p>
            <p> <a class="pt-1 text-blue-600 hover:cursor-pointer hover:underline font-semibold">Start your free trial</a>
            <span><i class="fa-solid fa-chevron-right hover:pl-2 hover:cursor-pointer h-2" style="color: #4084dd;"></i></span></p>
        </div>
    </div>
    <div class="social flex space-x-9 ml-[66px] mt-32">
        <span>Follow Microsoft</span>
        <span><i class="fa-brands fa-facebook-f fa-xl" style="color: #050505;"></i></span>
        <span><i class="fa-brands fa-twitter fa-xl" style="color: #0a0a0a;"></i></span>
        <span><i class="fa-brands fa-youtube fa-xl" style="color: #0a0a0a;"></i></i></span>
    </div>
    <div class="last flex justify-between pl-24 mt-32 text-[#616161] bg-gray-100 pt-10 w-full pr-24">
        <div class="last1 flex flex-col">
            <ul class="list-none text-[11px] space-y-3 text-left tracking-tight">
                <h1 class="text-lg font-[550]">What's new</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft 365</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Games</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Surface Pro 9</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Surface Laptop 5</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Surface Laptop Studio</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Surface Laptop Go 2</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Windows 11 apps</li>
            </ul>
        </div>
        <div class="last1 flex flex-col">
            <ul class="list-none text-xs space-y-3 text-left tracking-tighter">
                <h1 class="text-lg font-[550]">Microsoft Store</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Account Profile</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Download Center</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Store Support</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Returns</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Order tracking</li>
            </ul>
        </div>
        <div class="last1 flex flex-col">
            <ul class="list-none text-xs space-y-3 text-left tracking-tighter">
                <h1 class="text-lg font-[550]">Education</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft in education</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Devices for education</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Teams for Education</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft 365 Education</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Office Education</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Educator training and development</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Deals for students and parents</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Azure for students</li>
            </ul>
        </div>
        <div class="last1 flex flex-col">
            <ul class="list-none text-xs space-y-3 text-left tracking-tighter">
                <h1 class="text-lg font-[550]">Business</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Cloud</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Security</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Azure</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Dynamics 365</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft 365</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Advertising</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Industry</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Teams</li>
            </ul>
        </div>
        <div class="last1 flex flex-col">
            <ul class="list-none text-xs space-y-3 text-left tracking-tighter">
                <h1 class="text-lg font-[550]">Developer & IT</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Developer Center</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Documentation</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Learn</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Tech Community</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Azure Marketplace</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">AppSource</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Microsoft Power Platform</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Visual Studio</li>
            </ul>
        </div>
        <div class="last1 flex flex-col">
            <ul class="list-none text-xs space-y-3 text-left tracking-tighter">
                <h1 class="text-lg font-[550]">Company</h1>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Careers</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">About Microsoft</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Company news</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Privacy at Microsoft</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Investors</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Security</li>
                <li class="hover:underline hover:text-black hover:cursor-pointer">Sustainability</li>
            </ul>
        </div>
    </div>
    <div class="barlast flex justify-between bg-gray-100 pt-20 text-[11px] pb-8 w-full">
        <ul class="flex space-x-6 pl-12">
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]"><span class="pr-2"><i class="fa-solid fa-earth-asia" style="color: #3e3f41;"></i></span>English(India)</li>
            <li class="hover:cursor-pointer hover:underline text-black"><span><i class="fa-sharp fa-light fa-shield-check"></i></span>Your Privacy Choices</li>
        </ul>
        <ul class="flex space-x-3 pr-12">
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]">Content Microsoft</li>
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]">Privacy</li>
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]">Terms of use</li>
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]">Trademarks</li>
            <li class="hover:cursor-pointer hover:underline hover:text-black text-[#616161]">About our ads</li>
            <li class=" text-[#616161]">© Microsoft 2023</li>
        </ul>
    </div>
</body>
</html>