Create a blog template using HTML and CSS : the footer


in this chapter, we will see together how to create the website footer.
i will give you the full source code but if you didn't saw the previous chapter i advice you to visit theme to see the full source code

HTML



<footer>
            <div class="social">
                <h1>Follow us</h1>
                
                <ul>
                    <li><img src="img_ressource/facebook_circle_color-512.png"></li>
                    <li><img src="img_ressource/if_instagram_circle_color_107172.png"></li>
                    <li><img src="img_ressource/youtube_circle_color-512.png"></li>
                    <li><img src="img_ressource/twitter_circle_color-512.png"></li>
                </ul>
            </div>    
            <div class="copyright">
                <p>&copy; Made with &hearts; By Doctor Code</p>
            </div>
        </footer>

CSS



footer{
    position: relative;
    background-color: #2f2f2f;
    clear: both;
}
footer .social{
    position: relative;
    padding: 30px 0;
    
}
footer .social h1{
    text-align: center;
    color: #f2f2f2;
    margin-bottom: 15px;
}
footer .social ul{
    text-align: center;
    margin-bottom: 15px;
}
footer .social ul li{
    display: inline-block;
    margin-right: 15px;
}
footer img{
    width: 48px;
}
footer .copyright{
    background-color: #212121;
    padding: 5px 15px;
    text-align: center;
    color: #f2f2f2;
}


thank you for following us
Create a blog template using HTML and CSS : the footer Create a blog template using HTML and CSS :  the footer Reviewed by Medics on May 01, 2019 Rating: 5

No comments:

-->
Powered by Blogger.