Make a Windows 11 themed Website - HTML, CSS Windows 11 design

January 19, 2022

Idea

This article will teach you how you can make a Windows 11 themed website design. In this article, you will learn about HTML and CSS. There will be more parts on this idea in the upcoming days.

Prerequisites

Basic knowleddge of HTML and CSS.

Code

HTML part

<div class="desktop">
        <div class="taskbar">
            <div class="icons">
                <!-- start -->
                <div class="icon_img">
                    <img src="https://static.techspot.com/images2/downloads/topdownload/2021/08/2021-08-12-ts3_thumbs-9cf.png">
                </div>
                <!-- search -->
                <div class="icon_img search">
                    <img src="https://www.freeiconspng.com/thumbs/search-icon-png/search-icon-png-5.png">
                </div>
                <!-- file -->
                <div class="icon_img">
                    <img src="https://winaero.com/blog/wp-content/uploads/2019/09/File-Explorer-fluent-icon.png">
                </div>
                <!-- ie -->
                <div class="icon_img">
                    <img src="https://1000logos.net/wp-content/uploads/2020/09/Edge-logo.png">
                </div>
                <!-- chrome -->
                <div class="icon_img">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Chrome_icon_%28September_2014%29.svg/2048px-Google_Chrome_icon_%28September_2014%29.svg.png">
                </div>
            </div>
        </div>
    </div>

CSS part

        * {
            box-sizing: border-box;
        }
        body {
            margin: 0%;
            padding: 0%;
            height: 100vh;
            width: 100vw;
        }
        .desktop {
            background: url("https://mspoweruser.com/wp-content/uploads/2021/06/Microsoft-Windows-11-Wallpaper.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 100%;
        }
        .taskbar {
            display: flex;
            position: fixed;
            bottom: 0%;
            justify-content: center;
            align-items: center;
            background: #D4D9E8;
            height: 5.8vh;
            width: 100%;
            padding: 0.5rem;
            box-sizing: border-box;
        }
        .icons {
            display: flex;
            height: 100%;
        }
        .icon_img img {
            height: 1.7rem;
            width: 100%;
            padding-right: 0.9rem;
        }

Complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0%;
            padding: 0%;
            height: 100vh;
            width: 100vw;
        }
        .desktop {
            background: url("https://mspoweruser.com/wp-content/uploads/2021/06/Microsoft-Windows-11-Wallpaper.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 100%;
        }
        .taskbar {
            display: flex;
            position: fixed;
            bottom: 0%;
            justify-content: center;
            align-items: center;
            background: #D4D9E8;
            height: 5.8vh;
            width: 100%;
            padding: 0.5rem;
            box-sizing: border-box;
        }
        .icons {
            display: flex;
            height: 100%;
        }
        .icon_img img {
            height: 1.7rem;
            width: 100%;
            padding-right: 0.9rem;
        }
    </style>

</head>
<body>
    <div class="desktop">
        <div class="taskbar">
            <div class="icons">
                <!-- start -->
                <div class="icon_img">
                    <img src="https://static.techspot.com/images2/downloads/topdownload/2021/08/2021-08-12-ts3_thumbs-9cf.png">
                </div>
                <!-- search -->
                <div class="icon_img search">
                    <img src="https://www.freeiconspng.com/thumbs/search-icon-png/search-icon-png-5.png">
                </div>
                <!-- file -->
                <div class="icon_img">
                    <img src="https://winaero.com/blog/wp-content/uploads/2019/09/File-Explorer-fluent-icon.png">
                </div>
                <!-- ie -->
                <div class="icon_img">
                    <img src="https://1000logos.net/wp-content/uploads/2020/09/Edge-logo.png">
                </div>
                <!-- chrome -->
                <div class="icon_img">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Chrome_icon_%28September_2014%29.svg/2048px-Google_Chrome_icon_%28September_2014%29.svg.png">
                </div>
            </div>
        </div>
    </div>
</body>
</html>