<footer>
<div><i class="fas fa-calendar-alt"></i>today</div>
<div><i class="fab fa-reddit-alien"></i>clients</div>
<div><i class="fas fa-comments"></i>messages</div>
<div><i class="fas fa-history"></i>history</div>
<div><i class="fas fa-ellipsis-h"></i>more</div>
</footer>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
$lists: #DD310E #01A59C #006AB5 #F29105 #3A3A3A;
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: linear-gradient(to bottom, #c91cde 0%, #2d4271 100%), url(https://images.pexels.com/photos/1064566/pexels-photo-1064566.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1920&w=1260) no-repeat, linear-gradient(-180deg, #140ecc 0%, #1c74f7 100%);
background-size: cover;
background-blend-mode: hard-light;
}
footer {
width: 750px;
display: grid;
grid-template-columns: repeat(5, 1fr);
background-color: orange;
> div {
min-height: 88px;
border-top: 5px solid transparent;
background: #fff;
color: #969696;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: capitalize;
cursor: pointer;
font-weight: bold;
&:hover {
color: #DC310E;
background: #FCF0EE;
}
@for $i from 1 through length($lists) {
&:nth-child(#{$i}) {
border-color: nth($lists, $i);
}
}
}
i{
font-size: 1.5rem;
margin-bottom: 5px;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.