Table of Contents
Introduction:
The Redesign of Microsoft Website project aims to revamp the user interface of the Microsoft website, making it more visually appealing and accessible across various devices. By leveraging HTML for structure, CSS for styling, and JavaScript for interactivity, we can create a modern and responsive design that adapts seamlessly to different screen sizes.
Embark on a coding journey to redesign the Microsoft website with this comprehensive tutorial. Tailored for both seasoned coders and enthusiasts, it guides you through HTML, CSS, and JavaScript, unraveling essential techniques for modern web design. The step-by-step breakdown ensures you grasp front-end development intricacies, making this tutorial an exciting opportunity to enhance your skills and creativity.
Join Our Telegram Channel to Download the Project Source Code: Click Here
3 Steps to Redesign of Microsoft Website
Please follow this Step-by-Step Guide to redesign the Microsoft Website using HTML, CSS and JavaScript —
Create Project Files: Start by creating a project folder and naming it according to your preference. Inside the folder, create three files: index.html for the structure, style.css for styling, and script.js for interactivity. This foundational step establishes the framework for Redesign the Microsoft Website.
Step 1: Setting Up the HTML Structure:
Begin with structuring the HTML markup by paste the html code into your index.html file. Define the navigation bars, sections, and elements within the <body> tag. Ensure semantic HTML for better accessibility and SEO. Implement responsive design principles by incorporating viewport meta tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing File</title>
<style>
</style>
</head>
<body>
<nav id="RightNav">
<li>Microsoft 365</li>
<li>Office</li>
<li>Windows</li>
<li>Support</li>
<h3 onclick="ToggleDropdownMenu(0)">Software</h3>
<ul>
<li>Windows Apps</li>
<li>AI</li>
<li>OneDrive</li>
<li>Outlook</li>
<li>Skype</li>
<li>OneNote</li>
<li>Microsoft Teams</li>
</ul>
<h3 onclick="ToggleDropdownMenu(1)">Devices</h3>
<ul>
<li>Shop Xbox</li>
<li>Accessories</li>
</ul>
<h3 onclick="ToggleDropdownMenu(2)">Developer & IT</h3><ul>
<li>Developer Center</li>
<li>Documentation</li>
<li>Microsoft Learn</li>
<li>Microsoft Tech Community</li>
<li>Azure Marketplace</li>
<li>AppSource</li>
<li>Visual Studio</li>
</ul>
<h3 onclick="ToggleDropdownMenu(3)">Entertainment</h3>
<ul>
<li>Xbox games</li>
<li>PC games</li>
<li>Windows digital games</li>
</ul><h3 onclick="ToggleDropdownMenu(4)">Others</h3><ul>
<li>Free downloads security</li>
<li>Education</li>
<li>Gift cards</li>
</ul>
</nav>
<nav id="TopNav">
<li class="bars menubtn" onclick='toggleMenu("left","#RightNav",0,this,-(window.innerWidth)+"px")'>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</li>
<div id="logo">
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" alt="" srcset="">
</div>
<div id="NavLinks">
<li>Microsoft 365</li>
<li>Office</li>
<li>Windows</li>
<li>Support</li>
</div>
<div id="RightTray" >
<li class="dropdown" onclick='toggleMenu("top","#MicrosftProductMenu",55,this,"-434px")'>
All Microsoft
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
</li>
<li class="icon search-icon" onclick='toggleMenu("left",".searchForm",170,this,"-"+window.innerWidth+"px")'>
<div class="searchForm" ><input type="search" placeholder="Search Microsoft.com">
<div class="searchBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg></li>
<li class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg></li>
<li class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
</li>
</div>
</nav>
<div id="MicrosftProductMenu">
<ul>
<h3>Software</h3>
<li>Windows Apps</li>
<li>AI</li>
<li>OneDrive</li>
<li>Outlook</li>
<li>Skype</li>
<li>OneNote</li>
<li>Microsoft Teams</li>
</ul><ul>
<h3>Devices</h3>
<li>Shop Xbox</li>
<li>Accessories</li>
<h3>Developer & IT</h3>
<li>Developer Center</li>
<li>Documentation</li>
<li>Microsoft Learn</li>
<li>Microsoft Tech Community</li>
<li>Azure Marketplace</li>
<li>AppSource</li>
<li>Visual Studio</li>
</ul><ul>
<h3>Entertainment</h3>
<li>Xbox games</li>
<li>PC games</li>
<li>Windows digital games</li>
<h3>Others</h3>
<li>Free downloads security</li>
<li>Education</li>
<li>Gift cards</li>
</ul><ul>
<h3>Business</h3>
<li>Microsoft Cloud </li>
<li>Microsoft Security</li>
<li>Azure</li>
<li>Dynamics 365</li>
<li>Microsoft 365 for business</li>
<li>Microsoft Industry</li>
<li>Microsoft Power Platform</li>
<li>Windows 365</li>
</ul>
</div>
<div id="HomeSlider">
<div class="slide">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Highlight-M365-Icon-Bounce-Word-Merch:VP3-1083x600" alt="">
<div class="slideDescrp">
<h2>Microsoft 365</h2>
<p>Turn your ideas into reality, stay safer online and off, and focus on what matters most with Microsoft 365 apps</p>
<button>For one Person</button><a href="">For up to six people <svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
</div>
</div>
<div id="BestProductDetails">
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-CP-Windows11-GlobalLaunch?wid=517&hei=293&fit=crop" alt="">
<h3>Designed for life today – and tomorrow</h3>
<p>The next-generation of games. Your goals. Friends and family. Windows 11 was made to bring you closer to everything you love.</p>
<a href="">See if your PC is ready<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-MSFT-CP-Edge?wid=515&hei=293&fit=crop" alt="">
<h3>Microsoft Edge</h3>
<p>World-class performance with more privacy, more productivity and more value while you browse.</p><a href="">Download Now<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-Soft-CP-OneDriveCampaignRefresh-2?wid=517&hei=293&fit=crop" alt="">
<h3>Microsoft OneDrive</h3>
<p>Save your files and photos to OneDrive and access them from any device, anywhere.</p><a href="">Learn More<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-PC-SMB-OneNote?wid=517&hei=293&fit=crop" alt="">
<h3>OneNote</h3>
<p>Organise your notes and your life.</p><a href="">Learn More<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
</div>
<div id="OutlookPromotion">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-Hero-MSCOM-Outlook-iOS-Android:VP3-1083x600" alt="">
<div id="OutlookDescrp">
<h3>Outlook for iOS and Android</h3>
<p>Connect. Organise. Get things done.</p>
<button>Download Now</button>
</div>
</div>
<div id="BusinessProducts">
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-CP-Microsoft-Teams-Commercial?wid=517&hei=293&fit=crop" alt="">
<h3>Get Microsoft Teams for free</h3>
<p>Online meetings, chat and shared cloud storage – all in one place.</p>
<a href="">Sign up for free<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Microsoft-365-For-Business-Woman-Teams-Call?wid=517&hei=293&fit=crop" alt="">
<h3>Try Microsoft 365 for free</h3>
<p>Get Microsoft Teams, secure cloud storage and premium apps across devices with a free one-month Microsoft 365 Business Standard trial.</p>
<a href="">Start your free trial<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/JIC-DPS-CP01?wid=517&hei=293&fit=crop" alt="">
<h3>Welcome to your Windows 365 Cloud PC</h3>
<p>Securely stream your Windows experience from the Microsoft cloud to any device.</p>
<a href="">Get it today<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
<div class="product">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/Content-Card-Visual-Studio-Icon?wid=517&hei=293&fit=crop" alt="">
<h3>Visual Studio 2022</h3>
<p>Get the most comprehensive IDE for .NET and C++ developers on Windows for building web, cloud, desktop, mobile apps, services and games.</p>
<a href="">Download Now<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></a>
</div>
</div>
<footer>
<div id="footerLinks">
<ul>
<h3>Developer & IT</h3>
<li>Developer Center</li>
<li>Documentation</li>
<li>Microsoft Learn</li>
<li>Microsoft Tech Community</li>
<li>Azure Marketplace</li>
<li>AppSource</li>
<li>Microsoft Power Platform</li>
<li>Visual Studio</li>
</ul>
<ul>
<h3>Education</h3>
<li>Microsoft in education</li>
<li>Devices for education</li>
<li>Microsoft Teams for Education</li>
<li>Microsoft 365 Education</li>
<li>Office Education</li>
<li>Educator training and development</li>
<li>Deals for students and parents</li>
<li>Azure for students</li>
</ul>
<ul>
<h3>Business</h3>
<li>Microsoft Cloud</li>
<li>Microsoft Security</li>
<li>Azure</li>
<li>Dynamics 365</li>
<li>Microsoft 365</li>
<li>Microsoft Advertising</li>
<li>Microsoft Industry</li>
<li>Microsoft Teams</li>
</ul>
<ul>
<h3>Company</h3>
<li>Careers</li>
<li>About Microsoft</li>
<li>Company news</li>
<li>Privacy at Microsoft</li>
<li>Investors</li>
<li>Sustainability</li>
</ul>
<ul>
<h3>Microsoft Store</h3>
<li>Account profile</li>
<li>Download Center</li>
<li>Returns</li>
<li>Order tracking</li>
</ul>
</div>
<nav id="bottomNav">
<li class="lang"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M51.7 295.1l31.7 6.3c7.9 1.6 16-.9 21.7-6.6l15.4-15.4c11.6-11.6 31.1-8.4 38.4 6.2l9.3 18.5c4.8 9.6 14.6 15.7 25.4 15.7c15.2 0 26.1-14.6 21.7-29.2l-6-19.9c-4.6-15.4 6.9-30.9 23-30.9h2.3c13.4 0 25.9-6.7 33.3-17.8l10.7-16.1c5.6-8.5 5.3-19.6-.8-27.7l-16.1-21.5c-10.3-13.7-3.3-33.5 13.4-37.7l17-4.3c7.5-1.9 13.6-7.2 16.5-14.4l16.4-40.9C303.4 52.1 280.2 48 256 48C141.1 48 48 141.1 48 256c0 13.4 1.3 26.5 3.7 39.1zm407.7 4.6c-3-.3-6-.1-9 .8l-15.8 4.4c-6.7 1.9-13.8-.9-17.5-6.7l-2-3.1c-6-9.4-16.4-15.1-27.6-15.1s-21.6 5.7-27.6 15.1l-6.1 9.5c-1.4 2.2-3.4 4.1-5.7 5.3L312 330.1c-18.1 10.1-25.5 32.4-17 51.3l5.5 12.4c8.6 19.2 30.7 28.5 50.5 21.1l2.6-1c10-3.7 21.3-2.2 29.9 4.1l1.5 1.1c37.2-29.5 64.1-71.4 74.4-119.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm144.5 92.1c-2.1 8.6 3.1 17.3 11.6 19.4l32 8c8.6 2.1 17.3-3.1 19.4-11.6s-3.1-17.3-11.6-19.4l-32-8c-8.6-2.1-17.3 3.1-19.4 11.6zm92-20c-2.1 8.6 3.1 17.3 11.6 19.4s17.3-3.1 19.4-11.6l8-32c2.1-8.6-3.1-17.3-11.6-19.4s-17.3 3.1-19.4 11.6l-8 32zM343.2 113.7c-7.9-4-17.5-.7-21.5 7.2l-16 32c-4 7.9-.7 17.5 7.2 21.5s17.5 .7 21.5-7.2l16-32c4-7.9 .7-17.5-7.2-21.5z"/></svg>English(Pakistan)</li>
<div class="followLinks"><li> <svg class="FollowIco" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></li><li>
<svg class="FollowIco" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></li><li class="lasticonOfBottomNav">
<svg class="FollowIco" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></li></div>
<div class="footerLinks">
<li class="links">Contact Microsoft</li>
<li class="links">Privacy</li>
<li class="links">Terms of use</li>
<li class="links">Trademarks</li>
<li class="links">About our Ads</li>
<li class="links">©️ Microsoft 2023</li></div>
</nav>
</footer>
</body>
</html>
Step 2: Styling with CSS:
Insert the below CSS code into your style.css file to style the layout. Apply media queries to adjust styles based on screen size, ensuring a consistent experience across devices. Implement flexbox or grid for responsive layouts. Focus on typography, colors, and spacing to maintain visual hierarchy and readability.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
#TopNav{
width:100%;
height:50px;
display: flex;
background-color: white;
padding:10px;
position: sticky;
z-index: 50;
top:0px;
transition-duration: 0.3s;
}
#logo>img{
width:auto;
height:30px;
}
#NavLinks{
list-style-type: none;
display:flex;
padding:0px 20px;
}
#TopNav li:not(.menubtn){
padding:10px;
height:100%;
display:flex;
align-items: center;
justify-content: center;
font-size:0.85em;
font-family: Nunito;
position: relative;
cursor: pointer;
user-select: none;
}
.menuBtn{
transition-duration: 0.3s;
}
.closeBtn .bar:nth-of-type(1){
transform:rotate(-40deg);
transition-duration: 0.3s;
position: relative;
bottom:-7.5px;
width:70px;
}
.closeBtn .bar:nth-of-type(2){
opacity: 0;
transition-duration: 0.3s;
}
.closeBtn .bar:nth-of-type(3){
transform:rotate(40deg);
bottom:7.5px;
width:70px;
position: relative;
transition-duration: 0.3s;
}
#TopNav li:not(.icon,.bars)::after,#MicrosftProductMenu li::after{
content: "";
width:0%;
min-height: 2px;
display:block;
margin:auto;
position: absolute;
bottom:0px;
box-sizing: border-box;
transition-duration:0.3s ;
background-color: black;
}
#TopNav li:hover::after,#MicrosftProductMenu li:hover::after{
width:100%;
}
.bars{
width:40px;
height:auto;
padding:1px 10px;
list-style-type: none;
cursor: pointer;
transition-duration: 0.3s;
}
#TopNav .bars>.bar{
width:100%;
background-color: rgb(0, 0, 0);
margin:5px;
padding:0px;
height:3px;
border-radius: 20px;
transition-duration: 0.3s;
}
#RightTray{
margin-left:auto;
display: flex;
list-style-type: none;
}
.dropdown>svg{
position: relative;
top:-1px;
padding: 3px 1px;
}
#RightTray>li>svg{
width:20px;
height:20px;
}
#RightTray>li{
display: flex;
padding:0px 10px;
justify-content: center;
align-items: center;
}
#MicrosftProductMenu{
width:907px;
height:fit-content;
padding:20px;
border-radius: 10px;
right:5px;
top:-434px;
position: fixed;
box-shadow:0px 10px 10px 0px rgba(0,0,0,0.31);
background-color: white;
z-index:14;
display:grid;
transition: 0.3s;
grid-template-columns: 25% 25% 25% 25%;
font-family: Nunito;;
}
#MicrosftProductMenu>ul>li{
padding:8px;
display: flex;
width:fit-content;
user-select: none;
cursor:pointer;
position: relative;
list-style-type: none;
}
#RightTray .search-icon{
position: static !important;
}
.search-icon>.searchForm>.searchBtn>svg{
width: 30px;;
height:17px;
margin:0px;
}
.search-icon>.searchForm>.searchBtn{
transition: 0.3s;
}
.search-icon>.searchForm>.searchBtn:hover{
background-color: white;
border:1px solid black;
fill:black;
}
.searchForm{
height:fit-content;
width:fit-content;
position: absolute;
left:-100vw;
display:flex;
transition: 0.3s;
width:calc(100vw - 250px);
}
.searchBtn{
padding:10px;
overflow:hidden;
border-radius: 20px;
width: 50px;
height: 37px;
position: relative;
left:-30px;
z-index: 10;
fill:white;
background-color: rgb(0, 0, 0)
}
.search-icon>.searchForm>input{
width:calc(100% - 50px);
padding:10px;
border-radius: 20px;
border:0.5px solid black;
}
#HomeSlider{
display:flex;
width:100%;
height:fit-content;
overflow-x:hidden;
font-family: Nunito;
}
.slide{
position: relative;
transition-duration: 0.3s;
}
.slide>img{
width:100vw;
height:calc(100vh - 50px);
}
/* .slideDescrp:first-of-type{
left:c
} */
.slideDescrp,#OutlookPromotion>#OutlookDescrp{
position: relative;
bottom:50px;
background-color: white;
padding:50px;
padding-bottom:20px;
left:50px;
border-radius:10px;
width:calc(100% - 100px);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
}
.slideDescrp>button,#OutlookPromotion>#OutlookDescrp>button{
background-color: #0051ba;
padding:10px;
font-family: Nunito;
border:none;
color:white;
font-weight: 700;
transition: 0.3s;
border-radius:2px;
margin:20px;
}
.slideDescrp>button:hover,#OutlookPromotion>#OutlookDescrp>button:hover{
background-color: #005fdc;
}
a{
text-decoration: none;
font-weight:700;
color:#005fdc;
position: relative;
width:fit-content;
font-family: Nunito;
}
a>svg{
fill:#005fdc;
position: relative;
left:0px;
bottom:-5px;
transition-duration: 0.3s;
}
a::after{
content: "";
width:0%;
min-height: 2px;
display:block;
margin:auto;
left:0px;
position: absolute;
bottom:-10px;
box-sizing: border-box;
transition-duration:0.3s ;
background-color: #005fdc;
}
a:hover::after{
width:100%;
}
a:hover>svg{
left:10px;
}
#BestProductDetails,#BusinessProducts{
width:100%;
height:auto;
padding:20px;
display:grid;
grid-template-columns: calc(50% - 20px) calc(50% - 20px);
grid-template-rows: auto auto;
gap:10px;
font-family: nunito;
line-height: 1.6em;
}
.product{
margin:10px;
padding:10px;
}
.product>img{
width:100%;
height:auto;
margin:5px;
border-radius: 5px;
}
#OutlookPromotion{
margin:20px;
margin-bottom:100px;
height:calc(100vh - 100px);
position: relative;
}
#OutlookPromotion>img{
width:100%;
height:100%;
border-radius: 20px;
}
#OutlookPromotion>#OutlookDescrp{
font-family: Nunito;
}
#OutlookPromotion>#OutlookDescrp>button{
margin:10px 0px;
}
footer{
font-family: Nunito;
}
#footerLinks{
display:grid;
width: 100%;
grid-template-columns: 33% 33% 33%;
padding:20px;
}
#footerLinks>ul{
width: fit-content;
}
#footerLinks>ul>h3{
padding:5px;
}
#footerLinks>ul>li{
list-style-type: none;
padding:5px;
color:rgb(77, 77, 77);
cursor:pointer;
width:fit-content;
font-size:0.8em;
display: flex;
position: relative;
}
#footerLinks>ul>li::after{
content: "";
width:0%;
min-height: 2px;
display:block;
margin:auto;
left:0px;
position: absolute;
bottom:-3px;
box-sizing: border-box;
transition-duration:0.3s ;
background-color: rgb(77, 77, 77);;
}
#footerLinks>ul>li:hover::after{
width:100%;
}
#company{
grid-area: 2/2;
}
#bottomNav{
width:100%;
height: 50px;
font-size:0.75em;
display: flex;
}
.lasticonOfBottomNav{
margin-right:auto;
}
#bottomNav li{
list-style-type: none;
padding:10px;
cursor:pointer;
display: flex;
align-items: center;
position: relative;
}
.followLinks{
display:flex;
margin-right:auto;
}
.footerLinks{
display: flex;
}
#bottomNav li svg{
width:20px;
height:20px}
.lang>svg{
margin:5px;
}
#RightNav{
display:flex;
overflow: auto;
height:calc(100vh - 50px);
width:100%;
position: fixed;
top:50px;
left:-100vw;
transition: 0.3s;
flex-direction: column;
background-color: white;
z-index: 12;
padding:20px 10px;
font-family: Nunito;
}
#RightNav ul{
height:0px;
display: none;
transition-duration: 0.3s;
}
#RightNav li{
padding:10px;
list-style: none;
}
#RightNav h3{
display: flex;
cursor: pointer;
padding:10px;
}
#RightNav h3>svg{
width:20px;
height:20px;
margin-left:auto;
transition: 0.3s;}
@media (min-width:780px) {
.menubtn{
display:none;
}
}
@media (max-width:780px) {
#rightNav{
left:-100vw;
}
.slideDescrp,#OutlookDescrp{
width:100%;
left:0px;
right:none;
margin:0px;
display:flex;
flex-direction: column;
border-radius: 0px;
}
#OutlookPromotion{
padding:0px;
margin:0px;
}
#OutlookPromotion>#OutlookDescrp{
left:0px;
width:100%;
border-radius: 0px;
bottom:0px;
}
#OutlookPromotion>img{
border-radius: 0px;
height:auto;
}
.slideDescrp>button,#OutlookDescrp>button{
width:fit-content
}
#BestProductDetails,#BusinessProducts{
display:block;
}
#footerLinks{
display: grid;
grid-template-columns: 50% 50%;
}
#bottomNav{
height: auto;
display:grid;
grid-template-columns: auto auto auto auto auto auto;
}
#bottomNav>.lang{
grid-area: 1/span 5;
}
.footerLinks{
grid-area: 7/span 6;
flex-wrap: wrap;
justify-content: center;
}
#NavLinks,.dropdown{
display: none !important;
}
#logo{
margin:auto;
width:fit-content
}
#RightTray{
margin-left:0px;
}
/* .searchForm{
width:calc(100vw - 100px);
} */
}
@media (max-width:450px) {
#BestProductDetails,#BusinessProducts{
display:block;
padding:0px;
}
.product>img{
margin:0px;
}
#footerLinks{
display: block;
}
}Step 3: Enhancing with JavaScript:
To enhance the interactivity with JavaScript, paste the below code into your script.js file. Implement functionalities like dropdown menus, toggling navigation bars, and interactive elements. Utilize event listeners to handle user interactions efficiently. Ensure graceful degradation for browsers that don’t support JavaScript.
var RightNav=document.querySelector("#RightNav")
var h3InRightNav=Array.from(RightNav.querySelectorAll("h3"))
for(let i of h3InRightNav){
i.innerHTML+=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`
}
window.onscroll=function(){
var elem=document.querySelector(".slide>img")
console.log(elem.offsetTop+elem.offsetHeight,document.documentElement.scrollTop)
if(document.documentElement.scrollTop>(elem.offsetHeight)){
var nav=document.querySelector("#TopNav")
nav.style.boxShadow="0px 10px 10px 0px rgba(0,0,0,0.31)"
}else{
var nav=document.querySelector("#TopNav")
nav.style.boxShadow="none"
}
}
// window.onresize=func
function toggleMenu(dir,menuName,margin,button,displayNonePos){
if(menuName=="#RightNav"){
var e=document.querySelector(".menubtn")
e.classList.add("closeBtn")
}
var menu=document.querySelector(menuName)
var menuPos=window.getComputedStyle(menu)[dir]
console.log(displayNonePos,menuPos)
if(menuPos==displayNonePos){
button.removeAttribute("onclick")
menu.style[dir]=margin+"px"
setTimeout(function(){
OutsideClickFunc=function(event){
if (!(menu.contains(event.target))) {
if(menuName=="#RightNav"){
var e=document.querySelector(".menubtn")
e.classList.remove("closeBtn")
}
menu.style[dir] = displayNonePos;
document.removeEventListener('click',OutsideClickFunc)
button.setAttribute("onclick","toggleMenu('"+dir+"','"+menuName+"',"+margin+",this,'"+displayNonePos+"')")
}
}
document.addEventListener('click',OutsideClickFunc );
},300)
}}
function ToggleDropdownMenu(ContentId){
var content=Array.from(document.querySelectorAll("#RightNav>ul"))[ContentId]
if(window.getComputedStyle(content).display=='none'){
content.style.display="block"
Array.from(document.querySelector("#RightNav").querySelectorAll("h3"))[ContentId].querySelector("svg").style.transform="rotate(180deg)"
setTimeout(function(){
content.style.height="100%"
},1)}else{
content.style.height="0%"
Array.from(document.querySelector("#RightNav").querySelectorAll("h3"))[ContentId].querySelector("svg").style.transform="rotate(0deg)"
setTimeout(function(){
content.style.display="none"
},300)}
};Conclusion:
Redesign of Microsoft website to be responsive is a multifaceted process that requires meticulous attention to detail. By following these steps and leveraging HTML, CSS, and JavaScript, you can create a modern and user-friendly experience that caters to a diverse audience. Embrace the iterative nature of web development, continuously refining and optimizing your design to meet evolving user needs.
By incorporating responsive design principles and leveraging the power of HTML, CSS, and JavaScript, you can create a dynamic and engaging website that adapts seamlessly to various devices, ensuring a superior user experience for all visitors.
Code by – https://codepen.io/MuzammalAhmed/
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
