Footer design in Html free download with code

By /

Today, in this lesson we will learn how to create a footer design in Html for free download. A footer is the part of a website that is present at the bottom of the website with some links and social share buttons. In the last lesson, we have Navigation bar in Html code. But, at this moment let us see how to create a responsive footer of the website.

A footer is present at the bottom of the website. It is a necessary part of the website because it shows the ending point of the page. It may contain different links and social share buttons. Subscribe to our email and payment system information.

This footer has a background colour that matches the colour of the font. Then at the top, it has a text to subscribe to the website by entering your email. For email, it has a field and then a submit button to join the website membership for free.

Then it has five headings and all the headings have the same colour, font family and size. At the bottom of every heading, there are also some links present. By clicking on these links you will be redirected to other pages or sections of the website. Every link has a hover effect. It will show hover when you will point to that text.

At the bottom, it has a logo of the website/brand/company. The footer must have social share buttons and this footer also has buttons for social accounts. You will be redirected to social accounts of the website like Facebook, Instagram, Twitter, Youtube and Pinterest. So, let’s see how to create this type of footer for our website using Html and CSS.

You might like it:

We can create it by following the below steps. It will help you to create a responsive footer for your website.


Download an IDE:

Download an IDE on your computer like VS code and sublime text 3 etc.

Source code of Html:

Create a file of Html in your IDE with the extension of .html and save it.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="footer.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <title>Footer Design - FantacyDesign</title>
  </head>
  <body>



    <footer class="ct-footer">
                    <div class="container">
                        <form name="contentForm" enctype="multipart/form-data" method="post" action="">
                            <div class="ct-footer-pre text-center-lg">
                                <div class="inner">
                                    <span>Join FantacyDesign to receive updates  &amp; news!</span>
                                </div>
                                <div class="inner">
                                    <div class="form-group">
                                        <input name="formfields[nl_email]" id="nl_email" class="validate[required]" placeholder="Enter your email address" type="text" value=""> <label for="nl_email" class="sr-only">Email Address</label> <button type="submit" class="btn btn-motive">Join</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <ul class="ct-footer-list text-center-sm">
                            <li>
                                <h2 class="ct-footer-list-header">
                                    About Site
                                </h2>
                                <ul>
                                    <li>
                                        <a href="">Company</a>
                                    </li>
                                    <li>
                                        <a href="">Clients</a>
                                    </li>
                                    <li>
                                        <a href="">News</a>
                                    </li>
                                    <li>
                                        <a href="">Careers</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h2 class="ct-footer-list-header">
                                    Services
                                </h2>
                                <ul>
                                    <li>
                                        <a href="">Design</a>
                                    </li>
                                    <li>
                                        <a href="">Marketing</a>
                                    </li>
                                    <li>
                                        <a href="">Sales</a>
                                    </li>
                                    <li>
                                        <a href="">Programming</a>
                                    </li>
                                    <li>
                                        <a href="">Support</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h2 class="ct-footer-list-header">
                                    The Industry
                                </h2>
                                <ul>
                                    <li>
                                        <a href="">Thought Leadership</a>
                                    </li>
                                    <li>
                                        <a href="">Webinars</a>
                                    </li>
                                    <li>
                                        <a href="">Events</a>
                                    </li>
                                    <li>
                                        <a href="">Sponsorships</a>
                                    </li>
                                    <li>
                                        <a href="">Advisors</a>
                                    </li>
                                    <li>
                                        <a href="">Training Program</a>
                                    </li>
                                    <li>
                                        <a href="">Activities &amp; Campaigns</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h2 class="ct-footer-list-header">
                                    Public Relations
                                </h2>
                                <ul>
                                    <li>
                                        <a href="">Fantacy Blog</a>
                                    </li>
                                    <li>
                                        <a href="">Hackathons</a>
                                    </li>
                                    <li>
                                        <a href="">Videos</a>
                                    </li>
                                    <li>
                                        <a href="">News Releases</a>
                                    </li>
                                    <li>
                                        <a href="">Newsletters</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h2 class="ct-footer-list-header">
                                    About
                                </h2>
                                <ul>
                                    <li>
                                        <a href="">FAQ</a>
                                    </li>
                                    <li>
                                        <a href="">Our Board</a>
                                    </li>
                                    <li>
                                        <a href="">Our Staff</a>
                                    </li>
                                    <li>
                                        <a href="">Contact Us</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <div class="ct-footer-meta text-center-sm">
                            <div class="row">
                                <div class="col-sm-6 col-md-2">
                                    <img alt="logo" src="images/logo.png">
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <address>
                                        <span>FantacyDesign<br></span>103 Califona Street<br>
                                        Orlando, Florida, 0012<br>
                                        <span>Phone: <a href="tel:333333333">(032) 333-0000</a></span>
                                    </address>
                                </div>
                                <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
                                    <a href="" target="_blank"><img alt="app store" src="images/appstore.png"></a>
                                </div>
                                <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
                                    <a href="" target="_blank"><img alt="google play store" src="images/androidstore.png"></a>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <ul class="ct-socials list-unstyled list-inline">
                                        <li>
                                            <a href="" target="_blank"><img alt="facebook" src="images/facebook-white.png"></a>
                                        </li>
                                        <li>
                                            <a href="" target="_blank"><img alt="twitter" src="images/twitter-white.png"></a>
                                        </li>
                                        <li>
                                            <a href="" target="_blank"><img alt="youtube" src="images/youtube-white.png"></a>
                                        </li>
                                        <li>
                                            <a href="" target="_blank"><img alt="instagram" src="images/instagram-white.png"></a>
                                        </li>
                                        <li>
                                            <a href="" target="_blank"><img alt="pinterest" src="images/pinterest-white.png"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ct-footer-post">
                        <div class="container">
                            <div class="inner-left">
                                <ul>
                                    <li>
                                        <a href="">FAQ</a>
                                    </li>
                                    <li>
                                        <a href="">News</a>
                                    </li>
                                    <li>
                                        <a href="">Contact Us</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="inner-right">
                                <p>
                                    Copyright © 2021 FatacyDesign.&nbsp;<a href="">Privacy Policy</a>
                                </p>
                                <p>
                                    <a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </footer>

  </body>
</html>

Source code of CSS:

Again create a file of CSS with the extension of .css and save it in your device folder where you have saved the .Html file. CSS is used for designing website pages and the footer is the part of the website, So, we will also design it using CSS.

html,
body,
img,
figure {
    max-width: 100%
}

html,
body {
    overflow-x: hidden;
    color: #000;
    -ms-overflow-style: scrollbar;
    -webkit-font-smoothing: antialiased;
margin:0;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit
}

a {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.ct-u-paddingTop10 {
    padding-top: 10px !important
}

.ct-footer {
 background-image: linear-gradient(to right top, #2c3136, #2c3239, #2c333d, #2c3340, #2d3443);
    padding-top: 70px;
    position: relative;
}

.ct-footer-pre {
    width: 100%;
    padding-bottom: 55px;
    border-bottom: 1px solid #555;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width:1200px) {
    .ct-footer-pre {
        display: table
    }
    .ct-footer-pre > .inner {
        display: table-cell;
        vertical-align: middle
    }
}

@media (max-width:1199px) {
    .ct-footer-pre .form-group {
        padding-top: 15px
    }
}

.ct-footer-pre span {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #ebebeb;
    font-size: 30px
}

.ct-footer-pre .form-group {
    position: relative;
    margin: 0;
}

.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
    content: '';
    display: table
}

.ct-footer-pre .form-group:after {
    clear: both
}

.ct-footer-pre .form-group input {
    border: 1px solid #21D1B2;
    background-color: #333;
    color: #fff;
    height: 50px;
    padding: 0 30px;
    margin: 0 5px;
    border-radius: 0 !important;
}

@media (min-width:480px) {
    .ct-footer-pre .form-group input {
        width: 331px
    }
}

.ct-footer-pre .form-group button {
    height: 50px;
    position: relative;
    width: 80px;
    padding: 0
}

@media (min-width:480px) {
    .ct-footer-pre .form-group button {
        top: -1px
    }
}

@media (max-width:479px) {
    .ct-footer-pre .form-group input {
        float: left;
        width: 70%;
        margin: 0
    }
    .ct-footer-pre .form-group button {
        float: left;
        width: 30%
    }
}

.ct-footer-list {
    padding: 50px 0;
    list-style: none;
    padding-left: 0;
    display: table;
    width: 100%;
    border-bottom: 1px solid #555;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width:479px) {
    .ct-footer-list {
        padding: 20px 0
    }
}

@media (min-width:1200px) {
    .ct-footer-list > li {
        width: 20%;
        display: table-cell;
        vertical-align: top
    }
    .ct-footer-list > li:last-child {
        width: 7%
    }
}

@media (min-width:768px) and (max-width:1199px) {
    .ct-footer-list > li {
        width: 33.3333%
    }
}

@media (min-width:480px) and (max-width:767px) {
    .ct-footer-list > li {
        width: 50%
    }
}

@media (max-width:479px) {
    .ct-footer-list > li {
        width: 100%;
        text-align: center
    }
}

@media (max-width:1199px) {
    .ct-footer-list > li {
        display: inline-block;
        float: left
    }
}

.ct-footer-list > li .ct-footer-list-header {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #21D1B2;
    font-size: 30px
}

.ct-footer-list > li ul {
    list-style: none;
    padding-left: 0;
}

.ct-footer-list > li ul li a {
    color: #fff;
}

.ct-footer-list > li ul li a:hover {
    text-decoration: underline
}

.ct-footer-post {
background-image: linear-gradient(to right top, #1fd5a5, #19d1ab, #1acdb0, #22c8b4, #2dc4b7);
    padding: 30px 0;
}

.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
    padding: 20px 0;
    font-weight: 600px;
    font-size: 18px
}

.ct-footer-post ul {
    list-style: none;
    padding-left: 0;
    margin: 0 -20px;
}

.ct-footer-post ul li {
    display: inline-block;
    margin: 0 20px
}

.ct-footer-post a {
    color: #fff;
}

.ct-footer-post a:hover {
    text-decoration: underline
}

.ct-footer-post p {
    color: #fff;
}

@media (min-width:768px) {
    .ct-footer-post p {
        display: inline-block
    }
    .ct-footer-post p + p {
        padding-left: 50px
    }
}

@media (min-width:992px) {
    .ct-footer-post .inner-left {
        float: left
    }
    .ct-footer-post .inner-right {
        float: right
    }
}

@media (max-width:991px) {
    .ct-footer-post {
        text-align: center
    }
}

.ct-footer-meta {
    padding-top: 30px;
}

.ct-footer-meta .ct-socials {
    padding: 20px 0;
}

.ct-footer-meta .ct-socials li {
    padding: 0 3px
}

.ct-footer--with-button {
    padding-top: 150px
}

address {
    color: #fff;
    display: inline-block;
}

address span {
    font-weight: 600
}

address a {
    color: #fff;
}

address a:hover {
    text-decoration: underline
}

@media (max-width:767px) {
    address {
        padding-top: 30px
    }
}

.btn {
    font-family: 'Open Sans Condensed', sans-serif;
    border-radius: 0;
    border: none;
    text-transform: uppercase;
    color: #111;
    font-size: 26px;
    padding: 12px 30px;
}

.btn.btn-motive {
    background-color: #21D1B2;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-motive:hover {
    background-color: #21D1B2;
}

.btn.btn-motive:hover:active {
    background-color: #21D1B2
}

.btn.btn-violet {
    color: #fff;
    background-color: #4f4f99;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-violet:hover {
    background-color: #37376b;
}

.btn.btn-violet:hover:active {
    background-color: #2f2f5b
}

.btn.btn-green {
    color: #fff;
    background-color: #43670f;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-green:hover {
    background-color: #36520c;
}

.btn.btn-green:hover:active {
    background-color: #314a0b
}

.btn.btn-red {
    color: #fff;
    background-color: #da2229;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-red:hover {
    background-color: #ae1b21;
}

.btn.btn-red:hover:active {
    background-color: #9d181e
}

.btn.btn-white {
    background-color: #fff;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-white:hover {
    background-color: #d9d9d9;
}

.btn.btn-white:hover:active {
    background-color: #c9c9c9
}

.btn.btn-large {
    padding: 20px 50px;
    font-size: 30px;
    white-space: normal;
}

@media (max-width:479px) {
    .btn.btn-large {
        padding: 20px 10px;
        line-height: .9;
        font-size: 26px;
        letter-spacing: -.2px
    }
}
.ct-mediaSection {
    background-attachment: fixed
}

.ct-section_header--type1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #000;
    font-size: 115px;
    text-transform: uppercase;
}

@media (max-width:479px) {
    .ct-section_header--type1 {
        font-size: 60px;
        line-height: .8
    }
}

.ct-section_header--type2 small {
    font-family: 'coquette', fantasy;
    font-size: 58px;
    line-height: .7;
    display: block;
    font-weight: 700;
    position: relative;
    left: -12px
}

.ct-section_header--type2 span {
    font-family: 'Bebas Neue';
    font-size: 115px;
    line-height: .8
}

.ct-section_header--type2 img {
    display: inline-block;
    float: left;
    position: relative;
    top: 15px;
    padding-right: 3px
}

.ct-section_header--type3 {
    text-align: center;
}

.ct-section_header--type3 small {
    font-family: 'coquette', fantasy;
    font-size: 50px;
    padding: 15px 0;
    font-weight: 700;
    color: #fff;
    background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block
}

.ct-section_header--type3 span {
    font-family: 'Bebas Neue';
    font-size: 150px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .85
}

@media (max-width:479px) {
    .ct-section_header--type3 small {
        font-size: 25px
    }
    .ct-section_header--type3 span {
        font-size: 90px
    }
}

.ct-section_header--type4 {
    text-align: center;
}

.ct-section_header--type4:before,
.ct-section_header--type4:after {
    content: '';
    display: table
}

.ct-section_header--type4:after {
    clear: both
}

.ct-section_header--type4 small {
    font-family: 'coquette', fantasy;
    font-size: 50px;
    color: inherit;
    font-weight: 700;
    display: block
}

.ct-section_header--type4 span {
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: 400;
    font-weight: bold;
    font-size: 150px;
    text-transform: uppercase;
    display: block;
    line-height: .7
}

@media (max-width:479px) {
    .ct-section_header--type4 small {
        font-size: 40px
    }
    .ct-section_header--type4 span {
        font-size: 80px
    }
}

.ct-section_header + p {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
    text-align: center;
}

@media (max-width:479px) {
    .ct-section_header + p {
        font-size: 22px
    }
}

.ct-section_header--type4 + p {
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: 400;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width:479px) {
    .ct-section_header--type4 + p {
        font-size: 28px
    }
}

So, using this method you will be able to create a responsive footer of the website. If you are still facing the same errors then we have a solution for our followers. These files have all the code of the website.

Task:

This footer has almost all the text and functionalities that a professional footer have. Now it’s modification and task time. Add the icons and text of phone, email, Facebook, Instagram, and Pinterest along with links in them using <href> tag. Change the green color to a light color.

If you find this footer post helpful then don’t forget to subscribe and share with us. We will bring more and more premium templates for you every day. So, try to stay with us.

Thanks for reading this article.

[su_divider divider_color=”#1dbf73″ link_color=”#ffffff”]

[su_button url=”https://mega.nz/file/kwtUhCrL#ZLZGdNbd9ixzpyA3FxZYwpDkj-zOcDnui1gAKkGYjsY” target=”blank” style=”3d” background=”#1DBF73″ size=”6″ desc=”Click to Download” id=”download”]Download Source Code[/su_button]

Related Posts

Leave a Comment

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

Scroll to Top