In this project, we will buid a best design Using HTML & CSS only. You Will Learn Many Things thorugh this project web project:
a web browser
a text editor
a desire to build things
HTML
<!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>Windows 11 | Complete Web Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="icon">
<div class="image"><img src="https://i.redd.it/hbxy0q8sbyf71.png" alt=""></div>
<div class="name">New Video</div>
</div>
<div class="icon">
<div class="image"> <img src="https://cdn2.steamgriddb.com/file/sgdb-cdn/icon/5aaa384f657cd101b3a1752998130672.png" alt=""></div>
<div class="name">OBS Studio</div>
</div>
<div class="icon">
<div class="image"><img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/brave-browser-icon.png" alt=""></div>
<div class="name">Brave</div>
</div>
</div>
<div class="footer-container">
<div class="footer">
<div class="weather">
<div class="icon"><img src="https://img.icons8.com/fluency/512/weather.png" alt=""></div>
<div class="texts">
<h3>85° F</h3>
<p>Haze</p>
</div>
</div>
<ul class="apps">
<div class="icon"><img
src="https://preview.redd.it/ne6ukkej06t71.png?auto=webp&s=fbdc1cb1d60306fba3098f7b75a8e01812a97ada"
alt=""></div>
<div class="icon"><img
src="https://www.freepnglogos.com/uploads/search-png/search-icons-icons-flat-jewels-icon-11.png"
alt=""></div>
<div class="icon"><img src="https://upload.wikimedia.org/wikipedia/en/0/08/Microsoft_Store_app_icon.png"
alt=""></div>
<div class="icon"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Microsoft_Edge_logo_%282019%29.svg/480px-Microsoft_Edge_logo_%282019%29.svg.png"
alt=""></div>
<div class="icon"><img
src="https://winaero.com/blog/wp-content/uploads/2020/07/Your-Phone-app-icon-2.png" alt="">
</div>
<div class="icon"><img
src="https://winaero.com/blog/wp-content/uploads/2018/12/file-explorer-folder-libraries-icon-18298.png"
alt=""></div>
<div class="icon"><img
src="https://blogs.windows.com/wp-content/uploads/prod/sites/44/2022/09/photos-newicon.png"
alt=""></div>
</ul>
<ul class="tools">
<ul>
<li><img src="upicon.png" alt=""></li>
<li><img src="cloud-computing.png" alt=""></li>
<li><img src="refresh.png" alt=""></li>
<li><img src="wifi.png" alt=""></li>
<li><img src="light volume.png" alt=""></li>
<li><img src="full-battery.png" alt=""></li>
<li class="time">
<h3>4:38 PM</h3>
<h3>2/18/2023</h3>
</li>
<li>
<div class="notification-count">2</div>
</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
CSS
/* css reset */
*{
margin: 0;
padding: 0;
}
body{
background-image:url('background.jpg');
background-size:cover;
overflow: hidden;
}
.container .icon{
height:80px;
width:80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border:1px solid rgba(128, 128, 128, 0);
margin:2%;
}
.container .icon:hover{
background-color:rgba(255, 255, 255, 0.085);
border:1px solid rgba(128, 128, 128, 0.136);
}
.container .icon .image{
width:80px;
width:80px;
display: flex;
justify-content: center;
align-items: center;
}
.container .icon .name{
color:white;
font-family:sans-serif;
font-size:0.8rem;
margin-top:2%;
}
.container .icon .image img{
width:50%;
}
.footer-container{
position:absolute;
width:100%;
bottom:0%;
display: flex;
justify-content: center;
background-color:rgba(0, 0, 0, 0.414);
border-top:1px solid rgba(128, 128, 128, 0.532);
}
.footer{
width:99%;
height:60px;
display: flex;
justify-content:space-between;
align-items: center;
}
@font-face {
font-family:ELMONO BOLD;
src: url(cloud.TTF);
}
.footer .weather{
display: flex;
align-items: center;
color:white;
font-family:ELMONO BOLD;
font-weight:lighter;
border:1px solid rgba(128, 128, 128, 0);
border-radius:5px;
width:18%;
}
.footer .weather h3{
font-size:0.8rem;
}
.footer .weather p{
font-size:0.7rem;
}
.footer .weather .icon{
height:50px;
display: flex;
justify-content: center;
align-items:center;
width:50px;
}
.footer .weather .icon img{
width:60%;
}
.footer .weather:hover{
background-color:rgba(255, 255, 255, 0.085);
border:1px solid rgba(128, 128, 128, 0.136);
transition-duration:0.3s;
}
.footer .apps{
display: flex;
justify-content:space-between;
width:25%;
}
.footer .apps .icon{
height:50px;
width:50px;
padding:2.5%;
box-sizing: border-box;
overflow: hidden;
border-radius:4px;
border:1px solid rgba(128, 128, 128, 0);
}
.footer .apps .icon:hover{
background-color:rgba(255, 255, 255, 0.085);
border:1px solid rgba(128, 128, 128, 0.136);
transition-duration:0.3s;
}
.footer .apps .icon img{
width:100%;
}
.footer .tools{
width:18%;
}
.footer .tools ul{
display: flex;
list-style:none;
justify-content:space-between;
align-items: center;
}
.footer .tools li{
height:60px;
width:30px;
padding:2%;
box-sizing:border-box;
display: flex;
align-items:center;
}
.footer .tools li:hover{
background-color:rgba(255, 255, 255, 0.085);;
}
.footer .tools li img{
width:80%;
filter:invert();
}
.footer .tools .time{
width:auto;
color:white;
font-family:ELMONO BOLD;
font-size:0.7rem;
flex-direction: column;
justify-content:center;
text-align:right;
}
.footer .tools .notification-count{
height:18px;
width:18px;
border-radius:50%;
background-color:pink;
display: flex;
justify-content: center;
align-items:center;
font-family:ELMONO BOLD;
font-size:0.6rem;
}