USharinghtml:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link href="./login-form.css" rel="stylesheet">
<title></title>
<style>
.assort-list {
width:100%;
position: fixed;
bottom: 0;
left: 0;
height: 280px;
background-color: #525252;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
.assort-list-item {
width: 33.33%;
text-align: center;
box-sizing: border-box;
}
.assort-list-item i {
color: #FFFFFF;
font-size: 32px;
}
</style>
</head>
<body>
<button>Click me</button>
<div class="assort-list">
<a href="" class="assort-list-item">
<i class="fab fa-canadian-maple-leaf"></i>
</a>
<a href="" class="assort-list-item">
<i class="fas fa-headphones-alt"></i>
</a>
<a href="" class="assort-list-item">
<i class="far fa-play-circle"></i>
</a>
<a href="" class="assort-list-item">
<i class="fas fa-chart-line"></i>
</a>
<a href="" class="assort-list-item">
<i class="fas fa-circle-notch"></i>
</a>
<a href="" class="assort-list-item">
<i class="fas fa-house-damage"></i>
</a>
</div>
</body>
</html>
