Simple Website Footer Design HTML

Simple website footer design HTML is created by using Bootstrap but if we want to use it without bootstrap so we can use it. The footer is basically designed for the bottom of the web page where we can show social media links and copywriter text.

HTML

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="social-links">
                    <a class="social-btn" href="#">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a class="social-btn" href="#">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a class="social-btn" href="#">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a class="social-btn" href="#">
                        <i class="fab fa-google"></i>
                    </a>
                    <a class="social-btn" href="#">
                        <i class="fab fa-twitter"></i>
                    </a>
                </div>

                <p class="text-center">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry <a href="#">Terms of Service</a> and <a href="#"> Privacy Policy</a> Copyright © 2019 - 2020. <a href="https://www.markuptag.com/">markuptag.com</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<!-- End Footer -->

CSS

footer {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0px;
    margin-top: 50px;
    background-color: #fafafa;
}
footer .social-links {
    text-align: center;
    margin: 20px 0px;
}
footer .social-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #2f4f4f;
    margin: 10px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 5px 10px 0px #909090;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    border: 1px dotted #fff;
}
footer .social-btn i {
    line-height: 50px;
    font-size: 22px;
    transition: 0.2s linear;
}
footer .social-btn:hover i {
    transform: scale(1.3);
    color: #ff5722;
}
footer .social-btn::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: #ffffff;
    transform: rotate(45deg);
    left: -110%;
    top: 90%;
}
footer .social-btn:hover::before {
    animation: effect 0.6s 1;
    top: -10%;
    left: -10%;
}
footer p a {
    color: #ff5722;
}

/*-- Hover Animation Effect --*/
@keyframes effect {
    0% {
        left: -120%;
        top: 100%;
    }
    50% {
        left: 10%;
        top: -30%;
    }
    100% {
        top: -10%;
        left: -10%;
    }
}


/*-- Footer Responsive CSS --*/
@media (max-width: 576px){
footer .social-btn {
    width: 40px;
    height: 40px;
    margin: 5px;
}
footer .social-btn i {
    line-height: 40px;
    font-size: 18px;
}
}
/*-- Footer CSS --*/