Vertical Icon Bar Using HTML & CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale:1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
body{
background-image: url(space.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
ul{
list-style-type: none;
overflow:hidden
}
li a{
padding:25px;
max-width:fit-content;
display:block;
color:red;
}
li a:hover{
background-color:beige;
color:greenyellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-thumbs-up"></i></a></li>
<li><a href="#"><i class="fa fa-thumbs-down"></i></a></li>
</ul>
</body>
</html>
No comments :
Post a Comment