How to Create Windows 11 Interface using HTML5 ?

Last Updated : 16 Jun, 2023

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 parts creating the structure, styling the structure, and adding 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 is used to add images and links to structure the website. It doesn’t have any CSS properties. We will create various div using the <div> tag and give them respective class names.

Example: In this example, we will create Windows 11 interface using HTML5.

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 created the structure of the Windows 11 interface. Now we will add some CSS properties to it. Different classes will have different properties.

The 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)

The 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).

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).

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.

Javascript

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"
    }
})