How to create footer with navigation bar design using html and css

footer design

Hello friends today in this blog you will learn how to create footer and footer navigation bars using html and CSS. If you are a beginner in this field and you are learning html and CSS then you have come to the right place in this blog. You will learn about footer design with a navigation bar which is very interesting for you.

Before this footer design, we have shared another footer which is designed with footer contact form. If you want to read that footer design or get the source code, then you can click on this link and get the source code of that footer. Can do
Like you see in this image or there is a footer and footer navigation bar created with the help of html and CSS which looks beautiful and attractive to see what is the use of the image in the background of this footer and the four box of this footer The line is divided and the four are placed in equal size and height, and in this footer a search box is designed in the left side which you can see. Along with this, the text on the right side of the footer is written in the copy right and the most important is that the navigation bar is designed in the bottom right side of this footer which you are seeing in this image.
 Footer With Navigation Bar Source Codes

First of all we know about the html tag of footer with navigation bar. We took a div tag inside the body tag whose class name is written wrapper. Undar two div of this wrapper is taken, whose class is named footer and sub-footder Another div is taken inside the class fotter, whose class name is sub-f, four div is taken inside this class Sub-f Is named class sub-f-box

Inside the first div of these four div, we have taken the h4 tag, h4 tag means heading four. Within this tag, Recent Posts text has written four p tag below h4 which is used for paragraphs.

Inside the second div of the class sub-f-box, we have taken two divs whose class name is sub-ffb, inside these two divs, two divs are taken, whose class name is box-tff fl and t-ff-box. The p tag is taken inside the t-ff-box with some text written inside it.

We know about the stealing of css of all these tags. First of all we styled * margin padding box-sizing and font-family. And after that, wrapping the wrapper class with width height and background image and also giving width and height to background to the footer, brought down the footer from firm margin-top which is undar styled the div and class in css which you Looking in the image above

Under the class footer, take a sub-footder class which is designed to be the navigation menu bar of the footer. The sub-footder is first steeled by width and background-color, which has several menus inside it by styling them all with css. Brought as a navigation that you can see

If you want to styling this footer in responsive then you can style it by styling this @media screen. We have not styled this footer as @media. Can be used in the device, so you have good knowledge of JavaScript or paython, then you can use this footer in your blog or website.

If you are having difficulty in understanding this footer design or footer navigation bar, then you can understand this by looking at the tutorial of this footer design, whose link is below which you can easily see by clicking on it.

Video Tutorial of footer with navigation bar design  

I hope that you have understood by looking at the tutorials of this footer and footer navigation bar design, and you have easily come to know about the code of this footer, which tag and style is required for designing this footer which you can see. Taxes must have understood.
If you want to get the source code of this footer and footer navigation bar then you can easily get the source code of this footer is given in two files, one html code file and second CSS code file by scrolling both these files below. Copy it and paste it in your file, which will help you to understand.

HTML CODE FILE :


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="foot.css" rel="stylesheet">
  <link href="css/all.min.css" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <div class="footer fl">
      <div class="sub-f">
        <div class="sub-f-box fl">
          <h4>
            Recent Posts</h4>
          <p class="ad">
            <i class="fa fa-angle-double-right"></i>Lorem Ipsum is simply dummy.
          </p>
          <p class="ad">
            <i class="fa fa-angle-double-right"></i>Lorem Ipsum is simply dummy.
          </p>
          <p class="ad">
            <i class="fa fa-angle-double-right"></i> Lorem Ipsum is simply dummy.
          </p>
          <p class="ad">
            <i class="fa fa-angle-double-right"></i>Lorem Ipsum is simply dummy.
          </p>
        </div>
        <div class="sub-f-box mfl">
          <h4>
            Recent Posts</h4>
          <div class="sub-f-f-b">
            <div class="box-t-f-f fl">
            </div>
            <div class="t-ff-box fr">
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <div class="sub-f-f-b">
            <div class="box-t-f-f fl">
            </div>
            <div class="t-ff-box fr">
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
        </div>
        <div class="sub-f-box mfl">
          <h4>
            Recent Posts</h4>
          <p class="mai">
            <i class="fa fa-envelope">  rranjan5896@gamil.com</i>
          </p>
          <p class="mai">
            <i class="fa fa-phone-alt">   P: 3333 222 1111<br>        F: 3333 222 1111</i>
          </p>
          <p class="mai">
            <i class="fa fa-map-marker-alt"></i>  A156 Delhi India - pin 235489<br>        India - ABCD 22222
          </p>
        </div>
        <div class="sub-f-box fr">
          <h4>
            Recent Posts</h4>
          <p class="a">
            Enter your email address for our mailing list to keep yourself updated.</p>
          <p class="a">
          <form method="POST">
            <div class="inp fl">
              <p>
                <input type="email" name="uld" placeholder="email addreas" class="emailf">
              </p>
            </div>
            <p>
              <input type="submit" name="sub" value="Search" class="infb fl">
            </p>
          </form>
          </p>
          <div class="clr">
          </div>
          <p class="a cd">
            We Respect Your Privacy</p>
        </div>
      </div>
    </div>
    <!-----------end footer-->
    <div class="sub-footder fl">
      <div class="sub-s-footer">
        <div class="fo-logo fl">
          <p>
            © Coppyright 2020-21</p>
        </div>
        <div class="f-nav fr">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Portfolio</a></li>
          </ul>
        </div>
      </div>
      <div class="clr">
      </div>
    </div>
  </div>
</body>

</html>





CSS CODE FILE :


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.wrapper{
    width: 100%;
    height: 100vh;
    background-image: url("image/06.png");
    background-repeat: no-repeat;
    background-size: cover;
    
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clr{
    clear: both;
}
.mfl{
    float: left;
    margin-left: 1%;
}

.footer{
    width:100%;
    height: 400px;
    background-color: rgba(37, 44, 58, 0.712);
    margin-top: 80px;
}
.sub-f{
    width: 70%;
    margin: auto;
    margin-top: 80px;
}
.sub-f-box{
    width: 24.25%;
    height:250px ;
    color: #fff;
}
.sub-f-box h4{
    font-size: 14px;
    margin-bottom: 30px;
}
.ad{
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid #fff;
    margin-top: 15px; 
}
.ad i{
    color: #59B359;
}
.sub-f-box p i{
    font-size: 14px;
    margin-right: 2%;
}
.sub-f-f-b{
    width: 100%;
    height: 65px;
    margin-bottom: 25px;
}
.box-t-f-f{
    width: 30%;
    height: 65px;
    background-color:#E7544E ;
}
.t-ff-box{
    width: 68%;
    height: 65px;
}
.t-ff-box p{
    font-size: 14px;
    line-height: 20px;
}
.mai{
    margin-top: 15px;
    border-bottom: 0.5px solid #fff;
    font-size: 14px;
    padding-bottom: 20px;
}
.a{
    margin-top: 15px;
    font-size: 14px;
}
.emailf{
    
    height: 40px;
    font-size:14px;
}
.infb{
    background-color: #fab702;
    width: 30%;
    height:40px;
    text-align: center;
    border: none;
    border-radius: 0 5px 5px 0;
    font-size: 16px;
    color: #fcfcfc;
    
}
.infb:hover{
    background-color: #ff0000;
    color: #fff;
}
.cd{
   font-size: 10px;
}
.sub-footder{
   width: 100%;
   background-color: #4c5b6d;
}
.sub-s-footer{
   width: 70%;
   margin: auto;
   color: #fff;
}
.fo-logo{
   line-height: 60px;
   width: 30%;
   font-size: 14px;
}
.f-nav{
width: 60%;
}
.f-nav ul{
   text-align: right;
}
.f-nav ul li{
   display: inline;
   line-height: 60px;
   padding: 20px 3%;
}
 
.f-nav ul li a{
   text-decoration: none;
   font-size: 14px;
   color: #fff;
}
.f-nav ul li a:hover{
    color: #EE4D4E;
}

Related Posts

Animated Side Navigation Menu Using HTML & CSS

Hello readers, Today we will learn in this blog how we create an Animated Side Navigation Menu from html and css.   This side nav menu is created…

How to Create Responsive Tabs Using HTML & CSS

  Hello readers, today we will read in this blog how to create Responsive Tabs with the help of HTML and CSS. This tab is made without…

How To Create Animated Social Media Button Using HTML and CSS

Hello readers, today in this blog we will read how to create Animated Social Media Button Using HTML and CSS. In this blog, you will learn how…

Responsive Navbar with Social Media share icons in HTML CSS & JavaScript

Hello friends, in this blog today you will learn how to create a Responsive Navbar with Social Media share icons with the help of HTML CSS and…

How to create laptop keyboard design using html and css

Hello friends, in this blog today you will learn how to make laptop keyboard design using html and CSS, if you are a beginner in this field…

Leave a Reply

Your email address will not be published.