Create A Responsive Footer Section in HTML and CSS

0































Hello Developers, We provide you with a dynamic and eye-catching responsive footer design using HTML and CSS that presents your information in an easy-to-read format. The footer of your website is one of the most important areas for displaying important information and enhancing the user experience. With a well designed HTML and CSS combination, you can create a visually appealing and informative footer. This footer usually contains information such as copyright details, links to relevant pages, social media icons, etc. A well designed footer helps to create a cohesive and professional web presence, and provides a smooth and informative conclusion to the user's browsing experience. This footer design snippet is fully responsive so it can be displayed on any device including desktop, laptop, tablet, or smartphone. By using this HTML & CSS footer design snippet, you're not only sharing information but also showing your dedication to professionalism & contemporary web design.

How to Create A Responsive Footer Section in HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Footer UI design - learningrobo</title> <meta name="description" content="Footer UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="footer,responsive,learningrobo.com,html & css projects"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="sub-container"> <div class="sub-container-1"> <div class="inner-container1"> <h1>LOGO</h1> <h3>Slogan of the company</h3> </div> <div class="inner-container2"> <h2>Info</h2> <h4>Services</h4> <h4>Pricing</h4> <h4>Community</h4> </div> <div class="inner-container3"> <h2>Resource</h2> <h4>Blog</h4> <h4>Learn more</h4> <h4>Projects</h4> </div> <div class="inner-container4"> <h2>Social</h2> <h4>Facebook</h4> <h4>Instagram</h4> <h4>LinkedIn</h4> </div> <div class="inner-container5"> <h2>Company</h2> <h4>About Us</h4> <h4>Contact Us</h4> <h4>FAQ</h4> </div> </div> <hr> <div class="sub-container-2"> <i class="fa-brands fa-facebook"></i> <i class="fa-brands fa-twitter"></i> <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-linkedin"></i> <i class="fa-brands fa-github"></i> <i class="fa-brands fa-google"></i> <i class="fa-brands fa-youtube"></i> </div> <div class="sub-container-3"> <h5>&#169 Copyright. All rights reserved</h5> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@1,300&family=Fira+Sans:wght@200;400&family=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&family=Satisfy&display=swap');
*{
    box-sizing: border-box;
}
body{
    background-color:#A7727D;
    font-family: 'Fira Sans Condensed', sans-serif;
    margin:0%;
}
.container{
    min-height:100vh;
    max-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:end;
    align-items:center;
}
.sub-container{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius: 10px;
    width:95%;
    height:auto;
    background-color: #EDDBC7;
    box-shadow: rgba(128,128,128,0.6) 0px 7px 19px 0px;
}
.sub-container-1{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding: 0px 50px;
    width:100%;
    height:fit-content;
}
hr{
    width:95%;
    border: 1px solid #000;
}
.sub-container-2{
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    height:fit-content;
    margin-top:20px;
}
.sub-container-2 i{
    display:flex;
    justify-content:center;
    align-items:center;
    height:40px;
    width:40px;
    font-size:16px;
    border-radius: 50%;
    border:2px solid #A7727D;
    margin-left:5px;
}
.sub-container-2 i:hover{
    cursor: pointer;
    background-color:#A7727D;
    transition:.5s;
    border:2px solid #000;
}
@media only screen and (max-width: 630px){
    .sub-container-1{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 800;
}
.credit{
    color: #000;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Footer Section Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Footer Section Using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome