Skip to content

Commit 30c00a4

Browse files
SyedImtiyaz-1SyedImtiyaz-1
authored
Merge pull request SyedImtiyaz-1#189 from hsayvaidya23/addproject/microsoft-clone
added project microsoft-clone
2 parents ffc5d04 + fb6a876 commit 30c00a4

21 files changed

+2842
-0
lines changed

‎Projects/Microsoft Clone/.gitignore

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*

‎Projects/Microsoft Clone/assets/account icon.svg

+1
Loading

‎Projects/Microsoft Clone/assets/cart.svg

+1
Loading

‎Projects/Microsoft Clone/assets/ic1.png

150 Bytes
Loading

‎Projects/Microsoft Clone/assets/ic2.webp

512 Bytes
Binary file not shown.

‎Projects/Microsoft Clone/assets/ic3.webp

588 Bytes
Binary file not shown.

‎Projects/Microsoft Clone/assets/ic4.png

150 Bytes
Loading

‎Projects/Microsoft Clone/assets/ms.webp

2.3 KB
Binary file not shown.

‎Projects/Microsoft Clone/assets/mslogo.png

3.96 KB
Loading

‎Projects/Microsoft Clone/assets/search.svg

+1
Loading

‎Projects/Microsoft Clone/favicon.ico

16.8 KB
Binary file not shown.

‎Projects/Microsoft Clone/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎Projects/Microsoft Clone/index.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>Microsoft - Cloud, Computers, Apps &amp; Gaming</title>
7+
<meta name="description" content="" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="./index.css" />
10+
</head>
11+
12+
<body>
13+
<div class="container mx-auto">
14+
<div class="navbar flex justify-between items-center p-4">
15+
<div class="flex justify-center items-center md:order-2">
16+
<div class="hamburger inline-block p-4 cursor-pointer md:hidden">
17+
<div class="line h-0.5 w-6 my-1 bg-black"></div>
18+
<div class="line h-0.5 w-6 my-1 bg-black"></div>
19+
<div class="line h-0.5 w-6 my-1 bg-black"></div>
20+
</div>
21+
<div class="search md:hidden w-5 mr-6">
22+
<img src="assets/search.svg" alt="" />
23+
</div>
24+
</div>
25+
<div class="logo text-center md:order-1 flex">
26+
<div class=" flex justify-start">
27+
<img class="w-[60%]" src="assets/mslogo.png" alt="" />
28+
</div>
29+
<div
30+
class="features absolute md:static w-fit md:w-auto bg-gray-200 md:bg-white inset-0 md:flex md:mx-4 md:items-center md:space-x-6 -translate-x-96 md:-translate-x-0"
31+
>
32+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Microsoft 365</div>
33+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Office</div>
34+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Windows</div>
35+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Surface</div>
36+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Xbox</div>
37+
<div class="fitem hover:underline hover:underline-offset-8 cursor-pointer">Support</div>
38+
</div>
39+
</div>
40+
<div class="cart text-center md:order-3 flex">
41+
<div class="search hidden md:block mr-6">All Microsoft</div>
42+
<div class="mx-2">Search</div>
43+
<img class="w-5 mr-6" src="assets/search.svg" alt="" />
44+
<div class="flex pt-1">
45+
<img class="w-5 h-5 mr-6" src="assets/cart.svg" alt="" />
46+
<img class="w-5 h-5 mr-6" src="assets/account icon.svg" alt="" />
47+
</div>
48+
</div>
49+
</div>
50+
51+
<div class="slider flex flex-col-reverse md:flex-row bg-[#f2f2f2]">
52+
<div
53+
class="left flex flex-col justify-center items-center md:items-baseline py-12 ml-32 space-y-5"
54+
>
55+
<h1 class="text-2xl font-medium md:text-4xl mx-5">
56+
Surface Laptop 4
57+
</h1>
58+
<p class="w-3/4 mx-5 text-center md:text-left">
59+
Do it all with a perfect balance of sleek, ultra-thin design,
60+
multitasking speed and improved performance
61+
</p>
62+
<button class="text-white bg-black px-4 py-2 my-6 font-bold mx-5">
63+
Shop Now >
64+
</button>
65+
</div>
66+
<div class="right flex justify-center">
67+
<img class="w-[60rem] md:w-[64rem]" src="./assets/ms.webp" alt="" />
68+
</div>
69+
</div>
70+
71+
<div class="promo space-y-6 flex flex-col md:flex-row justify-center">
72+
<div class="item flex md:flex-col items-center mx-4 mt-6 space-x-2">
73+
<img src="assets/ic1.png" alt="" />
74+
<span class="font-medium md:w-[8rem] text-sm my-4 md:text-center">Choose your Microsoft 365</span>
75+
</div>
76+
<div class="item flex md:flex-col items-center mx-4 space-x-2">
77+
<img src="assets/ic2.webp" alt="" />
78+
<span class="font-medium md:w-[8rem] text-sm my-4 md:text-center">Explore Surfaces Devices</span>
79+
</div>
80+
<div class="item flex md:flex-col items-center mx-4 space-x-2">
81+
<img src="assets/ic3.webp" alt="" />
82+
<span class="font-medium md:w-[8rem] text-sm my-4 md:text-center">But Xbox Games</span>
83+
</div>
84+
<div class="item flex md:flex-col items-center mx-4 space-x-2">
85+
<img src="assets/ic4.png" alt="" />
86+
<span class="font-medium md:w-[8rem] text-sm my-4 md:text-center">Get Windows 11</span>
87+
</div>
88+
</div>
89+
</div>
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)