https://github.com/ackwolver335/msclone

An HTML & Tailwind Project of Microsoft Site in order to gather experience over to our UI using CSS Framework.
https://github.com/ackwolver335/msclone

tailwind tailwindcss webdeveloper webdevelopment

Last synced: 5 months ago
JSON representation

An HTML & Tailwind Project of Microsoft Site in order to gather experience over to our UI using CSS Framework.

• Host: GitHub
• URL: https://github.com/ackwolver335/msclone
• Owner: ackwolver335
• License: mit
• Created: 2025-02-01T05:53:54.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-06-09T03:46:40.000Z (7 months ago)
• Last Synced: 2025-07-11T15:32:59.780Z (6 months ago)
• Topics: tailwind, tailwindcss, webdeveloper, webdevelopment
• Language: HTML
• Homepage: https://ms-clone-taupe.vercel.app
• Size: 245 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# 🖥️ Microsoft Clone - TailwindCSS Project

✒️ MSClone is a front-end web project that replicates the official Microsoft homepage using HTML, Tailwind CSS, and a touch of JavaScript. The aim of this project is to practice responsive web design and modern layout techniques while paying close attention to pixel-perfect UI replication.

▶️ So, this repository only contains the **Home Page** or the clone of it taken as a reference from the Microsoft from its official sites without gathering the changable data like specific links and all. Further necessary details is been provided below.

## 📑 About the Project

🔖 The MSClone project is a static clone of the Microsoft landing page, built for educational and skill-enhancement purposes. It showcases a professional, responsive layout that adapts seamlessly to different screen sizes. 

- The use of Tailwind CSS allows rapid development with utility classes, and JavaScript adds small but meaningful interactivity, mimicking a real-world homepage experience. This clone can serve as a foundation for learning UI/UX principles, responsive behavior, and component-based structuring in front-end development.

## 📝 Table of Content

- **[Features](#-features)**

- **[Tech Stack](#️-tech-stack-used-️-languages-)**

- **[Contributions](#-contribution)**

- **[License](#-license)**

- **[Contact Me](#-contact-me---for-any-query)**

## 🌟 Features

✅ Responsive Design → Adapts seamlessly across mobile, tablet, and desktop devices using Tailwind's mobile-first utilities.

🎨 Modern UI/UX Layout → Clean and professional layout closely resembling Microsoft's official homepage.

⚡ Fast Load Time → Lightweight static build without heavy frameworks ensures fast performance and minimal page load time.

🧱 Tailwind CSS Utility Classes → Built entirely with utility-first classes for rapid styling and easier layout management.

🧩 Interactive Elements → Basic interactions like dropdowns or toggles handled via vanilla JavaScript.

📱 Mobile-Friendly Navigation → Menu and layout shift smoothly to match mobile standards and user expectations.

🛠️ Easy to Customize & Extend → Modular and clean HTML + CSS structure allows developers to build upon it easily.

## 🏷️ Tech Stack Used 🖥️ [Languages] ✌🏻

🕹️ **Basic HTML & CSS** 👉🏻 **[Checkout](https://html.com/html5/)**

🕹️ 🖥️ **TailwindCSS CDN at Initial Level** 👉🏻 **[Checkout](https://tailwindcss.com/docs/installation/play-cdn)**

🕹️ **Proper Guideline** 👉🏻 **[Checkout](https://youtube.com/playlist?list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&si=gl2kumGPCX59OMmg)**

🕹️ ⌨️ **Code Editor 👉🏻 *Visual Studio Code*** **[Download](https://code.visualstudio.com/Download)**

✐ Note : These are all the mentioned requirements but most of you surely have **90%** of these already done here.

## 🤝 Contribution

😉 **Contributions**, **issues** and **features** requests are Welcome !

1. Fork the repo.

2. Create your feature branch → **git checkout -b feature/MyFeature**

3. Commit changes → **git commit -m 'Add feature'**

4. Push to branch → **git push origin feature/MyFeature**

5. Open a Pull Request.

## 📰 License 

Distributed under the MIT License. See **[LICENSE](https://github.com/ackwolver335/MSClone?tab=MIT-1-ov-file)** for full details.

## 📩 Contact Me - For any Query

▶️ **GitHub ID** → **[@ackwolver335](https://www.github.com/ackwolver335)**

▶️ **LinkDIn** → **[@abhaych335](https://www.linkedin.com/in/abhaychaudhary335/)**

▶️ **EmailID** → **abhaych335@gmail.com**