<footer>
<h1>Footer with 4 Cols</h1>
<div class="container">
<div class="row">
<div class="col">Contact</div>
<div class="col">Posts</div>
<div class="col">Trending</div>
<div class="col">Movies</div>
<div class="col">Privacy</div>
<div class="col">Disclaimer</div>
</div>
<div class="row">
<div class="col">Contact</div>
<div class="col">Posts</div>
<div class="col">Trending</div>
<div class="col">Movies</div>
<div class="col">Privacy</div>
<div class="col">Disclaimer</div>
</div>
<div class="row">
<div class="col">Contact</div>
<div class="col">Posts</div>
<div class="col">Trending</div>
<div class="col">Movies</div>
<div class="col">Privacy</div>
<div class="col">Disclaimer</div>
</div>
<div class="row">
<div class="col">Contact</div>
<div class="col">Posts</div>
<div class="col">Trending</div>
<div class="col">Movies</div>
<div class="col">Privacy</div>
<div class="col">Disclaimer</div>
</div>
</div>
</footer>
footer{
background-color:yellow;
}
h1{
text-align:center;
padding:1rem;
margin-bottom:0;
border-bottom:2px solid
}
.container{
display:grid;
padding:1rem;
text-transform:capitalize;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.row{
padding:1rem;
font-size:1.2rem;
}
.col{
background-color:#ffff;
color:rgba(0,0,0,.7);
cursor:pointer;
text-align:center;
padding:.7rem;
box-shadow: 0 1px 10px black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.