How to create footer in pure Html & CSS?

Responsive Footer section | MultiWebPress

Hello readers, today in this blog you’ll learn how to create a Responsive Footer section using pure HTML & CSS This task is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to create Header in Htm, CSS & Javascript?. 

 Now it’s time to create a Website footer section with mobile responsive using Hypertext Preprocessor Language (HTML) and CSS

The Footer section is at the bottom of every website page (below the main body section) containing a quick view to connect with other pages. 

The information included under the footer section is about a company, creation date, copyrights, subscription form, contact form, quick links, etc. Footer design elements are consistent or the same across all the other pages. 

Responsive design element automatically scales its content to match the screen size on which it is viewed. 

In the above images, there is a Footer section containing company information with social links as well as contact us details such as place, calling number, email address. There is also a subscriber form, where a customer can subscribe by entering an email id. 

You can also be able to see a footer section for the mobile version. The footer is used to navigate from one page to another. There are different ways to create a footer section, one of which is the way we have designed it.

Watch out the full video, if you’re finding difficulty understanding what is written in this blog.

Video tutorial of Responsive Footer Section

You may also like:

You may like this Footer bar (Footer example). If you like this footer in HTML and want to use it in your project you can freely copy the code and use it.

Also, I want you to take this footer section to next level with your creativity. Also, I want you all to comment below if you have any questions in your mind.

Responsive Footer Section [Source Codes]

To create this small task (Responsive Footer Section). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!--Coding by Multiwebpress-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="stylesheet" href="css/style.css">
    <title>Footer Section | MutliWebpress</title>
</head>
<body>
        <footer>
            <div class="container">
                <div class="left section">
                    <h2>About Us</h2>
                    <div class="content">
                        <p>MultiWebPress is a educational blog where we post blogs related to Website Development, Technology, Tips & Hacks and much more creative coding stuff.</p>
                    <div class="social">
                        <a href="https://multiwebpress.com"><span class="fab fa-facebook-f"></span></a>
                        <a href="https://instagram.com/multiwebpress"><span class="fab fa-instagram"></span></a>
                        <a href="https://www.youtube.com/channel/UCvB-4cVzkhvu4TkTy1hs9zA"><span class="fab fa-youtube"></span></a>
                    </div>
                    </div>
                </div>

                <div class="center section">
                    <h2>Contact Us</h2>
                    <div class="content">
                        <div class="place">
                            <span class="fas fa-map-marker-alt"></span>
                            <span class="text"> New York, USA</span>
                        </div>
                        <div class="phone">
                            <span class="fas fa-phone-alt"></span>
                            <span class="text"> +98-76543210</span>
                        </div>
                        <div class="email">
                            <span class="fas fa-envelope"></span>
                            <span class="text"> contact@example.com</span>
                        </div>
                    </div>
                </div>

                <div class="right section">
                    <h2>Subscribe</h2>
                    <div class="content">
                        <form action="#">
                            <div class="email">
                                <div class="text">Email*</div>
                            </div>
                            <input type="email" required>
                            <div class="btn">
                                <button type="submit">SUBSCRIBE</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <center>
                    <div><span>Powered By <a href="https://multiwebpress.com">© 2021 | All Rights Reserved | Made By Multiwebpress</a></span></div>
                </center>
            </div>
        </footer>
</body>
</html>
				
			

CSS CODE

Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension

				
					@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

*{
    padding:0; margin:0;
    box-sizing: border-box;
    color:#d9d9d9;
    font-family: 'Open Sans', sans-serif;
}

footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #053742;
}

.container{
    display: flex;
    padding: 3rem;
}

.container .section{
    flex-basis: 50%;
    padding: 0 20px;
}

.section h2{
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.section .content{
    margin:20px 0 0 0;
    position: relative;
}

.section .content::before{
    position: absolute;
    content: '';
    top: -10px;
    height: 2px;
    width: 100%;
}

.section .content::after{
    position: absolute;
    content: '';
    height: 2px;
    width: 15%;
    background-color: #dd5f24;
    top: -10px;
}

.left .content .social{
    margin: 20px 0 0 0;
}

.left .content .social a{
    padding: 0 2px; 
}

.left .content .social a span{
    height: 40px;
    width: 40px;
    background: transparent;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 50px;
    transition: 0.4s;
    border:1px solid #656565;
}


.left .content .social a span:hover{
    background: #dd5f24;
}

.center .content .fas{
    font-size: 1.1rem;
    background: transparent;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50px;
    transition: 0.3s;
    cursor: pointer;
    border:1px solid #656565;
}

.center .content .fas:hover{
    background: #dd5f24;
    border:1px solid #dd5f24;
}

.center .content .text{
    font-size: 1.0.6rem;
    font-weight: 500;
    padding-left: 10px;
}

.center .content .phone{
    margin: 15px 0;
}

.right form .text{
    font-size: 1.0625rem;
    margin-bottom: 2px;
    color: #656565;
}

.right form input{
    width: 100%;
    font-size: 1.0625rem;
    background: transparent;
    border: 1px solid #656565;
}

.right form input{
    height: 35px;
}

.right form .btn{
    margin-top: 10px;
}

.right form .btn button{
    height: 40px;
    width: 100%;
    border:none;
    outline: none;
    background: #dd5f24;
    font-size: 1.0625rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}


.right form .btn button:hover{
    background: #000;
}

.footer-bottom center{
    padding: 5px;
    font-size: 0.9375rem;
    background: #151515;
}

.footer-bottom center span{
    color: #656565;
}

.footer-bottom center a{
    text-decoration: none;
}

.footer-bottom center a:hover{
    text-decoration: underline;
}

@media screen and (max-width:700px){
    footer{
        position: relative;
        bottom: 0px;
    }

    .left .content{
        padding-right:0px;
        padding-bottom: 30px;
    }

    .container{
        flex-wrap: wrap;
        flex-direction: column;
        padding:0.5rem;
    }

    .container .section{
        margin:5px 0;
    }
}
				
			

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created a Responsive footer section using HTML & CSS.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

SHARE

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on facebook
Share on whatsapp
Share on telegram
Share on email
Share on twitter
Share on pinterest
Share on linkedin