<footer>
<div class="footer-content">
<h3>Ground Tutorial</h3>
<p>Ground Tutorial is a blog website where you will find great tutorials on web design and development. Here each tutorial is beautifully described step by step with the required source code.</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
</ul>
<div class="footer-menu">
<ul class="f-menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Articles</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>Design By - <a href="https://www.aweywashk.xyz/">aweywashk</a> </p>
</div>
</footer>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #fcfcfc;
font-family: sans-serif;
}
footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
padding-top: 40px;
color: #fff;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 2.1rem;
font-weight: 500;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
color: #cacdd2;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: #fff;
border: 1.1px solid white;
padding: 5px;
border-radius: 50%;
}
.socials a i{
font-size: 1.1rem;
width: 20px;
transition: color .4s ease;
}
.socials a:hover i{
color: aqua;
}
.footer-bottom{
background: #000;
width: 100vw;
padding: 20px;
text-align: center;
}
.footer-bottom p{
text-align: center;
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom p a{
color:#44bae8;
font-size: 16px;
text-decoration: none;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
.footer-menu{
margin-bottom: 20px;
}
.footer-menu ul{
display: flex;
}
.footer-menu ul li{
padding-right: 10px;
display: block;
}
.footer-menu ul li a{
color: #cfd2d6;
border: 1.3px solid white;
padding: 6px 15px;
border-radius: 50px;
text-decoration: none;
}
.footer-menu ul li a:hover{
color: #27bcda;
}
@media (max-width:500px) {
.footer-menu ul{
display: inline;
}
.footer-menu ul li{
margin-bottom: 20px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.