How to create footer in pure Html & CSS?

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

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!

MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

How to create footer in pure Html & CSS?

Video tutorial of Responsive Footer Section

You may also like:

Responsive Footer Section [Source Codes]

HTML CODE

CSS CODE

SHARE

Leave a Reply Cancel reply

Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Copyright © 2023 MultiWebPress | All Rights Reserved

MultiWEBPress Wordpress & Shopify Experts

MultiWEBPress Wordpress & Shopify Experts

How to create footer in pure Html & CSS?

Video tutorial of Responsive Footer Section

You may also like:

Responsive Footer Section [Source Codes]

HTML CODE

CSS CODE

SHARE

Leave a Reply Cancel reply

Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Copyright © 2023 MultiWebPress | All Rights Reserved

MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts