Footer using HTML & CSS

Create Responsive Footer Using Html And Css ( Source Code)

 Create Responsive Footer Using Html And Css ( Source Code)

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

 Create Responsive Footer Using Html And Css ( Source Code)

Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
Responsive Footer Table

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

50+ HTML, CSS & JavaScript Projects With Source Code

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>

Gym Website Using HTML and CSS With Source Code

In this HTML code, we have connected the stylesheet and made a row to separate the sections and prevent confusion. Then, using the href function, we linked the appropriate sites so that when a user taps on one, they are taken to that page.

We will use the footer> tag to add the framework of our footer. We’ve added the bootstrap classes to our footer project to add responsiveness and html components. The footer element is where all of this code is located.

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

ADVERTISEMENT

ADVERTISEMENT

Html output of Footer:

ADVERTISEMENT

ADVERTISEMENT

 Create Responsive Footer Using Html And Css ( Source Code)

Css Code for footer:-

ADVERTISEMENT

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;  
      }       
 }  

Responsive Resume/CV Website Using HTML & CSS

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.

First using the class selector we will select all the heading at once and add a common styling to all we will select the font color as “blue” and using the font-weight property we will set the font boldness as “500” and using the margin bottom property we will add a bottom margin of 0.5

Then using the class selector we will select the bootstrap classes and we will add the different styling inside the footer and using the media query we will add more responsiveness to our footer.

Let us see the output of this project.

CSS Output:

 Create Responsive Footer Using Html And Css ( Source Code)

 

Final output Of Responsive Footer Using Html and Css:

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.

10+ HTML CSS Projects For Beginners (Source Code)

Video Output Of Responsive Footer:

Happy coding

Written by @harsh_9 & himanshu singh

Which code editor do you use for this Responsive Footer Upload coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

What is the purpose of inserting a footer?

Footer are used to add additional information about the organisation and also used to provide contact details and social media links inside the footer so that visitor can easily reachout to the authod.



Leave a Reply