Hello, learner In this article, we are going to create a Footer design using HTML and CSS. In the past post, we have created a Sun Reflection Animation Using HTML & CSS3. Now it is time to create a list of items hover effect.

If you visit any website you will find the footer but the footer is not compulsory for the website. The footer is always at the last or bottom of the website. In HTML5 the there is a footer tag inside the body <footer></footer> inside this tag you have to put footer content.

A few years ago footers are used only to give copyright information but now footers are used for giving social media icons and Quick links to the page and copyright information Footer section is a big trend in website development.

As you see in the above preview image of the footer, In our footer section there are two sections upper one content about, categories, and Quick link and after that, there is a line and below the line, there is copyright information and social media icons. our footer is responsive for all devices. On the pc, these footer categories are aligned horizontally but when you open it on small devices like mobile phones, each category of footer is aligned vertically and it’ll automatically adjust its height and width according to the device height and width.

Table of Contents

Footer design using HTML and CSS [Source code]

To create a Footer design using HTML and CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code.

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html>
    <head>
        <title> Hover effect</title>
        <link rel="Stylesheet" href="style.css">
    </head>
    <body>
          <!-- Site footer -->
    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6">
            <h6><span class="ez-toc-section" id="About"></span>About<span class="ez-toc-section-end"></span></h6>
            <p class="text-justify">codingthai.com <i>CODE WANTS TO BE SIMPLE </i> is an initiative  to help the upcoming programmers with the code. codingthai focuses on providing the most efficient code or snippets as the code wants to be simple. We will help programmers build up concepts in different programming languages that include C, C++, Java, HTML, CSS, Bootstrap, JavaScript, PHP, Android, SQL and Algorithm.</p>
          </div>

          <div class="col-xs-6 col-md-3">
            <h6><span class="ez-toc-section" id="Categories"></span>Categories<span class="ez-toc-section-end"></span></h6>
            <ul class="footer-links">
              <li><a href="http://codingthai.com/category/c-language/" target="_blank" rel="noopener">C</a></li>
              <li><a href="http://codingthai.com/category/front-end-development/" target="_blank" rel="noopener">UI Design</a></li>
              <li><a href="http://codingthai.com/category/back-end-development/" target="_blank" rel="noopener">PHP</a></li>
              <li><a href="http://codingthai.com/category/java-programming-language/" target="_blank" rel="noopener">Java</a></li>
              <li><a href="http://codingthai.com/category/android/" target="_blank" rel="noopener">Android</a></li>
              <li><a href="http://codingthai.com/category/templates/" target="_blank" rel="noopener">Templates</a></li>
            </ul>
          </div>

          <div class="col-xs-6 col-md-3">
            <h6><span class="ez-toc-section" id="Quick_Links"></span>Quick Links<span class="ez-toc-section-end"></span></h6>
            <ul class="footer-links">
              <li><a href="http://codingthai.com/about/" target="_blank" rel="noopener">About Us</a></li>
              <li><a href="http://codingthai.com/contact/" target="_blank" rel="noopener">Contact Us</a></li>
              <li><a href="http://codingthai.com/contribute/" target="_blank" rel="noopener">Contribute</a></li>
              <li><a href="http://codingthai.com/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a></li>
              <li><a href="http://codingthai.com/sitemap/" target="_blank" rel="noopener">Sitemap</a></li>
            </ul>
          </div>
        </div>
        <hr>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-sm-6 col-xs-12">
            <p class="copyright-text">Copyright © 2017 All Rights Reserved by 
         <a href="#">codingthai</a>.
            </p>
          </div>

          <div class="col-md-4 col-sm-6 col-xs-12">
            <ul class="social-icons">
              <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
              <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>   
            </ul>
          </div>
        </div>
      </div>
</footer>
    </body>
</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Footer design using HTML and CSS [Source code]

You might like this

Share this:

Related Posts

Create a Stunning Background Video effect with HTML and CSS

10 Navigation Bar Design using HTML and CSS

Learn Coding Fast: 5 Languages to Jumpstart Your Tech Skills in 15 Days!