How to Create Windows 11 Interface using HTML5 ?

30 Sep, 2021
In this article, we will see how to create a windows 11 interface using HTML5.
Approach: To create Windows 11 interface we will use HTML, CSS, and JavaScript. If you want to change to design you can add more functionality to it. In this article, we will divide the whole thing into three different part creating the structure, styling the structure and add functionality.
Below is the step-by-step implementation of the above approach.
Step 1: In this section we will create the basic structure using HTML for the Windows 11 interface. We will give the title as “Try Windows 11” and add necessary images using <img> tag. Also add the necessary links using the <link> tag.
HTML Code: This code used add the images and links to structure the website. It doesn’t have any CSS property. We will create various div  using the <div> tag and give them respective class name.
 
HTML
<!DOCTYPE html><html>  <head>    <title>Try Windows 11</title>      <link rel="shortcut icon"        href="https://media.geeksforgeeks.org/wp-content/uploads/20210914203818/faviconWindows.png"        type="image/x-icon">      <!-- Linking the CSS stylesheet -->    <link rel="stylesheet" href="styles.css"></head>  <body>    <div class="taskbar">        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210914203932/icons-300x37.PNG" alt="">        <img class="right" src="https://media.geeksforgeeks.org/wp-content/uploads/20210914204052/taskbar-200x37.PNG"            alt="">    </div>      <div class="startmenu">        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210914204232/startmenu-289x300.PNG" alt="">    </div>      <div class="wallpaper">        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210914204725/windows11-300x169.jpg" alt="">    </div>          <!-- Linking the external JavaScript -->    <script src="script.js"></script></body>  </html>
Step 2: Styling the Structure: In the previous section, we HAVE created the structure of the windows 11 interface. Now we will add some CSS properties on it. Different classes will have different properties.
Class named taskbar will have CSS properties such as:
background-color: #f3f3f3; (sets the background color of an element).width: 100%; (sets the width of the element)position: absolute; (sets the position of the element and specifies the positioning method used for the element)bottom: 0; (affects the vertical position of the positioned element).display: flex; (specifies the display behavior (the type of rendering box) of an element).z-index: 110; (specifies the stack order of an element).justify-content: center; (aligns the flexible container’s items when the items do not use all available space on the main-axis horizontally)
background-color: #f3f3f3; (sets the background color of an element).
width: 100%; (sets the width of the element)
position: absolute; (sets the position of the element and specifies the positioning method used for the element)
bottom: 0; (affects the vertical position of the positioned element).
display: flex; (specifies the display behavior (the type of rendering box) of an element).
z-index: 110; (specifies the stack order of an element).
justify-content: center; (aligns the flexible container’s items when the items do not use all available space on the main-axis horizontally)
Class named right will have  CSS properties such as:
justify-self: flex-end; (sets the way a box is justified inside its alignment container along the appropriate axis).position: absolute; (sets the position of the element and specifies the positioning method used for the element).right: 0; (affects the horizontal position of the given elements).margin: 6px 0; (creates spacing around the elements).height: 85%; (sets the height of an element).
justify-self: flex-end; (sets the way a box is justified inside its alignment container along the appropriate axis).
position: absolute; (sets the position of the element and specifies the positioning method used for the element).
right: 0; (affects the horizontal position of the given elements).
margin: 6px 0; (creates spacing around the elements).
height: 85%; (sets the height of an element).
Class named startmenu will have CSS properties such as:
position: absolute; (specifies the type of positioning method used for an element).bottom: -655px; (affects the vertical position of a positioned element).width: 100%; (sets the width of an element).text-align: center; (specifies the horizontal alignment of text in an element).transition: all 0.3s ease-in; (allows to change property values smoothly, over a given duration).
position: absolute; (specifies the type of positioning method used for an element).
bottom: -655px; (affects the vertical position of a positioned element).
width: 100%; (sets the width of an element).
text-align: center; (specifies the horizontal alignment of text in an element).
transition: all 0.3s ease-in; (allows to change property values smoothly, over a given duration).
styles.css
body{    overflow: hidden;    height: 100vh;}.taskbar{    background-color: #F3F3F3;    width: 100%;    position: absolute;    bottom: 0;    display: flex;    z-index: 110;    justify-content: center;}.right{    justify-self: flex-end;    position: absolute;    right: 0;    margin: 6px 0;    height: 85%;}  .startmenu{    position: absolute;    bottom: -655px;    width: 100%;    text-align: center;    transition: all 0.3s ease-in; }.startmenu img{    border-radius: 8px;}.wallpaper img{    height: 900px;}
Step 3: Add functionality to the website: We will write the JavaScript for the start menu and taskbar. First we will create two variables named taskbar and startmenu then inside this variable we will use the document.getElementsByClassName() method which returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.
Now in the taskbar, we will add an event listener for a click that attaches an event handler to the document, and inside it, we will create an if-else statement such as if the bottom property of startmenu is 50px then update it into -655px else if it is not 50px update it into 50px. This will make the taskbar responsive.
script.js
let taskbar = document.getElementsByClassName("taskbar")[0]let startmenu = document.getElementsByClassName("startmenu")[0]   taskbar.addEventListener("click", ()=>{    console.log("clicked");    if(startmenu.style.bottom == "50px"){        startmenu.style.bottom = "-655px"    }    else{        startmenu.style.bottom = "50px"    }})
Output:
CSS-Properties
CSS-Questions
HTML-Questions
HTML5
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.