How to Make Footer in Html and CSS (Best Footer Design )

 In this Article, You will be learning about How to Make Footer in HTML and CSS. Footer is the bottom most important part of the website. This happens in all websites. A good footer design enhances the beauty of the website. Apart from this, it is one of the easiest things done by Front End Developer. So here we learn about How to Make Footer in HTML and CSS or Create a Footer in HTML and CSS. After that we will learn how to design a very beautiful Footer.



How to Make Footer in Html and CSS

first of all, You need to know this. Here we are running the series of Top 100 Web Development Projects. Whose this is the fourth project. So let's learn now. How Create Footer

How to Create Sticky Footer 

We will Create a Responsive Multi- level Sticky Footer With Flexbox. 


Also You Can check Demo Here 

<div class="footer">
  <div class="container">
  	<div class="row">
  		<h1 class="title"> About Us</h1> 
         <p>  Thedigitalslife is 
a Blog which proide content about web 
development, Blogging, SEO, Digital marketing
 and Earn Money. Anyone can learn
 about Web deelopment. We try to share great content which really helpful for you. 
Out all Content is absolutely free of cost. </p>

  	</div>
  	<div class="row">
  		<h1 class="title"> Tech Learn</h1> 
         <ul>
         	<li> <a href=""> Wordpress</a></li>
         	<li> <a href=""> Blogger</a></li>
         	<li> <a href=""> Google Adsense</a></li>
         	<li> <a href=""> SEO</a></li>
         </ul>

  	</div>
  	<div class="row">
  		<h1 class="title"> Web Development</h1> 
         <ul>
         	<li> <a href=""> HTML</a></li>
         	<li> <a href=""> CSS</a></li>
         	<li> <a href=""> Javascript</a></li>
         	<li> <a href=""> Jquery</a></li>
         </ul>

  	</div>
  	<div class="row">
  		<h1 class="title"> Blogging</h1> 
        <ul>
         	<li> <a href=""> Blog Design</a></li>
         	<li> <a href=""> Monitization</a></li>
         	<li> <a href=""> Customization</a></li>
         	<li> <a href=""> SEO</a></li>
         </ul>

  	</div>
  	<div class="row">
  		<h1 class="title"> Earn Money</h1> 
        <ul>
         	<li> <a href=""> Google Adsese</a></li>
         	<li> <a href=""> Freelancing</a></li>
         	<li> <a href=""> Web Development</a></li>
         	<li> <a href=""> SEO</a></li>
         </ul>

  	</div>

  </div>

</div>

Output 



Now we have created the HTML code for the footer. Now we need to understand it. After that we can write CSS Code easily. That is, you can design it easily.

1. <div class="footer"> This is the main div, whose class is footer. By this we will set the color and position of the footer.


.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #111;
   color: white;
   
}

left:0 remove margin of left and bottom:0  Takes to the bottom. Width:100% Sets width 100% and background-color: #111; sets Background Black Color, color:white sets text Color. 

2. <div class="container"> This sets the display of the content inside the footer. 


.container {
	display: flex;
}

CSS Code 

<style>
	body {
		margin:0;
		padding: 0;
	}
.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #111;
   color: white;
   
}
.container {
	display: flex;
}
.row {
	padding: 1.25rem;
    min-width: 12.5rem;
}
.row ul {
	padding: 0;
}
.row li {
	list-style:none;
}
.row ul li a{
	  color: #a9a39f;
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-right: .2rem;
}
.row p {
	 color: #a9a39f;
}
.title {
	color:#ff7a18;
	    font-size: 15px;
	    font-family: Gotham Narrow SSm A,Gotham Narrow SSm B,Rubik,Lato,Lucida 
Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
    font-style: normal;
    font-weight: 800;   
    text-transform: uppercase;
    margin: 2rem 0 .25rem;
} 
.text p {
	padding-bottom: 200px;
}
@media screen and (max-width: 800px) {
  .container {
   display: initial; 
  }
}
</style>

2 comments:

  1. Vishal RathourJanuary 8, 2021 at 12:37 AM

    hello

    ReplyDelete
  2. bootstrapMarch 5, 2024 at 1:50 PM

    Thanks for sharing that information as this will definitely help the new comers in the industry but if you want to understand that how we can manage it in Bootstrap, in little code as compared to this one so I can definitely help you.

    ReplyDelete