Header and footer design in Html and CSS with code

By /

The header and footer both are the main parts of the website and today our main focus is to create header and footer designs in Html and CSS. Last time we discussed how to create a Html login form validation.

The header is the main part of the website and it represents the website and type of the website. It presents at the bottom of the website with some extra information or links.

This header has a logo on the left side. Then it has menu buttons that are available with some links. In the end, it has a dropdown button. After the menu buttons, you can also put a search button or login/signup button.

This footer has a link of three pages. Also declares the ownership of the website using @copyright text in the footer.

So it is very simple to create this type of sticky header and footer. After following these steps you will be able to create this type of header and footer.

You might like it:

First, you have to download an IDE. VS CODE is recommended.

Source code of Html:

First, create an Html file and save it using the .html extension. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Header & Footer || Fantacy Designs</title>
  </head>
  <body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="sticky-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.7/js/bootstrap.min.js"></script>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
          <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#"> <img src="images/logo-1.png" alt="Logo Solodev"></a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                   <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li role="separator" class="divider"></li>
                      <li class="dropdown-header">Nav header</li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                   </ul>
                </li>
             </ul>
          </div>
          <!--/.nav-collapse -->
       </div>
    </nav>
    <!-- Begin page content -->
    <div class="container">
       <div class="page-header">
          <h1>Sticky Header & Footer </h1>
       </div>
       <p class="lead">This is the Sticky Header and Footer with dropdown Menu<br><br>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
    </div>
    <footer class="footer">
       <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&#169; 2021 FantacyDesign.&nbsp;<a href="">Privacy Policy</a>
                </p>
                <p>
                   <a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by <b>JD KHAN</b> </a>
                </p>
             </div>
          </div>
       </div>
    </footer>

  </body>
</html>

Source code of CSS:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;

}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
    margin-right: 20px;
}
.navbar {
background: #1BAAC2;
}
.navbar-default .navbar-nav > .active > a {
  padding: 8px 19px 9px !important;
}
.navbar-nav > li.active {
  padding: 8px 0px 9px 0;
}
.navbar-right {
  padding-top: 0;
}
.navbar-default .navbar-nav > li > a::after {
  background-color: transparent;
  border-bottom: 3px solid #d2282e;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    background-color: #2FC2DA;
}
.ct-footer {
    background-color: #111;
    padding-top: 70px;
    margin-top: 20px;
    position: relative;
}
.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: #00bff3;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.btn.btn-motive:hover {
    background-color: #00bff3;
}

.btn.btn-motive:hover:active {
    background-color: #00bff3
}

.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
    }
}
.ct-u-paddingTop10 {
    padding-top: 10px !important
}

.ct-footer {
    background-color: #111;
    padding-top: 70px;
    margin-top: 20px;
    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 #00bff3;
    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: #00bff3;
    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, #0c4f5b, #155864, #1d616d, #256b77, #2c7480);
    padding: 30px 0;
}

.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
    padding: 20px 0
}

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

We have created a .zip file and in that file, there are both Html and CSS files are present. You have to download it from the below button. Then you will find all the files and then run the main file.

Task:

The header and footer are the main components of the website. It helps the users to move across the website and all pages easily. Now add some extra features in the header and footer. Change the color of the header and buttons. In the footer, we don’t have enough information present in it. Add some text in the footer. In the footer, we use to add the information of contact and social media icons. Add all these things to make it awesome. Below the header add a full-length picture and do not apply further properties to it.

If you have any type of problem then must share it with us. We will try to answer your question ASAP. So, try to stay with us for more premium templates. Don’t forget to follow us because we will provide you with the link to newly created content in your inbox.

Thanks for reading this article.

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

[su_button url=”https://mega.nz/file/k4tGSZja#BLm4nuhr0sFcK_kowSQvAWx4TAHiw399s0ZN8pQBdXA” 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