Create Responsive Footer In Html And Css ( Source Code)

Create Responsive Footer In Html And Css ( Source Code)

Hello coders,  a very warm welcome to code with random’s today’s blog in which we are going to create a footer using html & css. Footer is basically the bottom page of a webpage or website, which has an all the social media handle links to content which are important such as learning, resources, general which contains the license so that user can be tension free and trust the website about the copyrights, etc.

Let us see the coding part of the making of the footer:

Html code for footer:

In html we create the basic layout of the webpage. Here we are using bootstrap 5 for styling.

What is bootstrap?

Bootstrap is a free and open-source css framework directed at responsive, mobile-first front-end web development. It contains html, css, and javascript-based design templates for typography, forms, buttons, navigation, and other interface components.

For icons we are using cdn(content-delivery-network)  of fontawesome

<link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<footer class="footer block-dark mt-n15 mt-lg-n30">
    <div
        class="h-150px h-lg-225px bgi-no-repeat bgi-position-x-center bgi-position-y-top bgi-size-cover dark-top-curved-bg"
    ></div>
    <div class="container mt-n15">
        <div class="row">
            <div class="col-6 col-lg">
                <div class="pb-10">
                    <h3 class="text-muted mb-5 mb-lg-7 font-size-4">
                        Products
                    </h3>
                    <div
                        class="d-flex flex-column font-size-3 font-weight-bold"
                    >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Pro Templates</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Free Templates</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Developer6669</a
                        >
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg">
                <div class="pb-10">
                    <h3 class="text-muted mb-5 mb-lg-7 font-size-4">Learn</h3>
                    <div
                        class="d-flex flex-column font-size-3 font-weight-bold"
                    >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >All Tutorials</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Metronic Tutorials</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Keen Tutorials</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Blog &amp; News</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Hire Experts</a
                        >
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg">
                <div class="pb-10">
                    <h3 class="text-muted mb-5 mb-lg-7 font-size-4">
                        Resources
                    </h3>
                    <div
                        class="d-flex flex-column font-size-3 font-weight-bold"
                    >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >FAQs</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Support</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Contact Us</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Affiliate Program</a
                        >
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg">
                <div class="pb-10">
                    <h3 class="text-muted mb-5 mb-lg-7 font-size-4">General</h3>
                    <div
                        class="d-flex flex-column font-size-3 font-weight-bold"
                    >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >License Terms</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Privacy Policy</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Terms &amp; Conditions</a
                        >
                        <a
                            href="https://developer6669.com"
                            class="text-dark-60 text-hover-primary py-2 py-lg-3"
                            >Refund Policy</a
                        >
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg">
                <div class="pb-10">
                    <h3 class="text-muted mb-5 mb-lg-7 font-size-4">
                        Stay Connected
                    </h3>
                    <div
                        class="d-flex flex-column font-size-3 font-weight-bold"
                    >
                        <a
                            href="https://developer6669.com"
                            class="d-flex align-items-center text-center text-dark-60 text-hover-primary py-2 py-lg-3"
                        >
                            <img
                                src="https://developer6669.com/Projects/assets/images/icons/social-media/facebook.svg"
                                data-lazy-src="https://developer6669.com/Projects/assets/images/icons/social-media/facebook.svg"
                                class="w-20px mr-4 loaded"
                                alt=""
                            />
                            Facebook
                        </a>
                        <a
                            href="https://developer6669.com"
                            class="d-flex align-items-center text-center text-dark-60 text-hover-primary py-2 py-lg-3"
                        >
                            <img
                                src="https://developer6669.com/Projects/assets/images/icons/social-media/twitter.svg"
                                data-lazy-src="https://developer6669.com/Projects/assets/images/icons/social-media/twitter.svg"
                                class="w-20px mr-4 loaded"
                                alt=""
                            />
                            Twitter
                        </a>
                        <a
                            href="https://developer6669.com"
                            class="d-flex align-items-center text-center text-dark-60 text-hover-primary py-2 py-lg-3"
                        >
                            <img
                                src="https://developer6669.com/Projects/assets/images/icons/social-media/dribbble.svg"
                                data-lazy-src="https://developer6669.com/Projects/assets/images/icons/social-media/dribbble.svg"
                                class="w-20px mr-4 loaded"
                                alt=""
                            />
                            Dribbble
                        </a>
                        <a
                            href="https://developer6669.com"
                            class="d-flex align-items-center text-center text-dark-60 text-hover-primary py-2 py-lg-3"
                        >
                            <img
                                src="https://developer6669.com/Projects/assets/images/icons/social-media/instagram.svg"
                                class="w-20px mr-4 loaded"
                                data-lazy-src="https://developer6669.com/Projects/assets/images/icons/social-media/instagram.svg"
                                alt=""
                            />
                            Instagram
                        </a>
                        <a
                            href="https://developer6669.com"
                            class="d-flex align-items-center text-center text-dark-60 text-hover-primary py-2 py-lg-3"
                        >
                            <img
                                src="https://developer6669.com/Projects/assets/images/icons/social-media/github.svg"
                                class="w-20px mr-4 loaded"
                                data-lazy-src="https://developer6669.com/Projects/assets/images/icons/social-media/github.svg"
                                alt=""
                            />
                            Github
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_speed_247610277"></div>
    <div class="container py-5 py-lg-10">
        <div
            class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between"
        >
            <div class="d-flex align-items-center mr-md-2 order-2 order-md-1">
                <a href="https://developer6669.com" class="mr-3 mr-md-6">
                    <img
                        alt="logo"
                        src="https://developer6669.com/Projects/assets/images/logo/developer6669.png"
                        class="h-20px h-md-25px"
                    />
                </a>
                <span
                    class="font-size-2 font-weight-bold text-dark-60 pt-1"
                    href="https://developer6669.com"
                >
                    © 2022 Developer6669.com
                </span>
            </div>
            <div
                class="d-flex flex-column flex-md-row align-items-center justify-content-center order-1 order-md-2 mb-5 mb-md-0"
            >
                <div
                    class="font-size-2 font-weight-bold text-dark-60 mb-5 mb-md-0"
                >
                    Secured Payment by
                    <a
                        href="https://developer6669.com"
                        target="_blank"
                        class="text-dark-50 text-hover-primary"
                        >2Checkout</a
                    >
                    with:
                </div>
                <div class="ml-4">
                    <img
                        src="https://developer6669.com/Projects/assets/images/icons/credit/paypal.svg"
                        data-lazy-src="https://developer6669.com/Projects/assets/images/icons/credit/paypal.svg"
                        alt=""
                        class="h-20px mr-2 rounded-sm loaded"
                    />
                    <img
                        src="https://developer6669.com/Projects/assets/images/icons/credit/visa.svg"
                        data-lazy-src="https://keenthemes.com/images/payment-methods/light/visa.svg"
                        alt=""
                        class="h-20px mr-2 rounded-sm loaded"
                    />
                    <img
                        src="https://developer6669.com/Projects/assets/images/icons/credit/mastercard.svg"
                        data-lazy-src="https://developer6669.com/Projects/assets/images/icons/credit/mastercard.svg"
                        alt=""
                        class="h-20px mr-2 rounded-sm loaded"
                    />
                    <img
                        src="https://developer6669.com/Projects/assets/images/icons/credit/americanexpress.svg"
                        data-lazy-src="https://developer6669.com/Projects/assets/images/icons/credit/americanexpress.svg"
                        alt=""
                        class="h-20px rounded-sm loaded"
                    />
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

In this html code we have linked the stylesheet and created the row so that everything can’t get mix and every thing is divided in the section wise. Then we have linked the suitable pages with the help of href function so that user clicks it and redirect to that page. All this we have code under the footer tag.

100+ Front-end Projects for Web developers (Source Code)

Let us see the html output before writing css for footer.

Html output of Footer:

 

 
 
 
 
 
 
 
 

Css code footer:-

For styling, we are already using bootstrap but there are a little bit more custom css needs to be added so we add an external css file and write this css code.
We are using some basic properties of css like border-box,flex-box,css class, ids selectors, and media query for responsiveness.

Navbar Using Html, Css And, And Javascript ( Source Code)

What is a media query?

Media query is a css technique introduced in css3.

It uses the @media rule to include a block of css properties only if a certain condition is true.

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {  
   color: #2f3044;  
   font-weight: 500;  
   line-height: 1.2;  
   margin-bottom: 0.5rem;  
 }  
 .row {  
   display: flex;  
   flex-wrap: wrap;  
   margin-left: -10px;  
   margin-right: -10px;  
 }  
 .col-6 {  
   flex: 0 0 50%;  
   max-width: 50%;  
   padding-left: 10px;  
   padding-right: 10px;  
   position: relative;  
   width: 100%;       
 }  
 .d-flex {  
      display: flex!important;  
 }            
 .flex-column {  
   flex-direction: column!important;  
 }  
 .bgi-position-y-top {  
   background-position-y: top;  
 }  
 .bgi-position-x-center {  
   background-position-x: center;  
 }  
 .bgi-no-repeat {  
   background-repeat: no-repeat;  
 }  
 .bgi-size-cover {  
   background-size: cover;  
 }  
 .h-150px {  
   height: 150px!important;  
 }  
 .font-size-4 {  
   font-size: 1.8rem!important;  
 }  
 .font-size-3 {  
   font-size: 1.4rem!important;  
 }  
 .block-dark {  
      background-color: #0d151e;  
 }  
 .dark-top-curved-bg {  
      background-image: url('https://keenthemes.com/images/misc/curve-dark-top-bg.png');  
 }            
 .text-muted, .text-muted i {  
      color: #b5b5c3!important;  
 }            
 .text-dark-60 {  
      color: #7e8299!important;  
 }            
 .page_speed_560018307 {  
      border-top: 1px solid #152231;  
 }            
 .h-20px {  
      height: 20px!important;  
 }            
 .mr-2, .mx-2 {  
      margin-right: 0.5rem!important;  
 }  
 .rounded-sm {  
      border-radius: 0.25rem!important;  
 }       
 .w-20px {  
      width: 20px!important;  
 }       
 .mr-4, .mx-4 {  
   margin-right: 1rem!important;  
 }  
 @media (min-width: 992px)  
 {  
      .col-lg {  
           flex-basis: 0;  
           flex-grow: 1;  
           max-width: 100%;  
      }       
      .pb-lg-3, .py-lg-3 {  
        padding-bottom: 0.75rem!important;  
      }       
      .h-lg-225px {  
           height: 225px!important;  
      }       
 }  

In this external css we have styled the footer with bgcolor and the the text which we have labelled in at the bottom. Setting the width & height of the footer so that it can’t get expand than the actual size of footer.

Let us see the output of this project.

Final output footer:

Summary:

We have created the footer using our tools html & css. We created our html file and then in that we called and defined all the necessary attributes in it. Then we created css file and styled all the tags present in html code and set the size of the footer and the contents which are included in it. If you loved it do comment as it boosts our motivation to bring new projects for you guys. If you face any difficulty while performing you can reach out to us with the help of a comment section.

Happy coding

Written by @harsh_9 & himanshu singh

Share on:

Leave a Comment