Dear Friends, In this article we will tell you How to create footer using CSS? So i hope you like our artcle and if you want to get the source code related this artcle then you can get the given below code and paste your code editor for make changes.
Footer for Website
To make a footer to stay at the bottom of the web page we can fix its position at the bottom of the webpage so that, even if you scroll down that webpage you can still see the footer using css from any position on the page. Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once they have finished scrolling through the current page or are looking for additional information about your website. A sticky footer always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer using css. Add the following code to your CSS file.
When you are creating a web page, you may decide that you want to add a footer. For example, let’s say you’re building a site for a local coffee shop. You may want to add a footer with the name, contact information and opening hours of the coffee shop.
This is where the HTML <footer> tag comes in.
The <footer> tag is used to create a footer in HTML. The <footer> tag often contains several other tags that support navigation, identify the author of a page, and more. This tutorial will discuss the basics of the HTML <footer> tag and how you can use it in your code. By the end of this tutorial, you will be an expert in using the <footer> tag.
HTML for make Fan
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for footer project make a fast with visual studio code editor.
Now we will learn how to write html for footer. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named motor. Then after that we will take div tag again and we will name its class as stand. Again we will take div tag and name its class as bottom stand after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center. After this you can create more class for manage the footer content and make a reposive design.
CSS for Fan Design
Now we will design the footer using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
Most poluar Articles
How to make tea cup using html and css ?
How to create neumorphism clock using html, css and javascript?
How to design music player using html and css?
If you want to get the source code and paste in your code editor. Then copy given below code and paste in your code editor for make easily otherwise you can watch video related this article for helping make this footer.
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Footer by Code with Nizami</title>
<style>
body{
margin: 0px;
padding: 0px;
}
h3{
font-size: 50px;
font-family: verdana;
color: red;
text-align: center;
margin-top: 70px;
text-shadow: 2px 3px 6px rgb(68, 68, 68);
}
.footer{
background-color: rgb(15, 15, 15);
width: 100%;
height: 60%;
position: absolute;
bottom: 0px;
display: flex;
}
.nxt-footer{
width: 96%;
height: 86%;
background-color: rgb(51, 51, 51);
margin: 25px 0px 0px 30px;
box-shadow: 1px 0px 6px 1px rgb(194, 194, 194);
}
.logo-footer{
position: absolute;
top: 30px;
left: 7%;
}
.footer-one{
position: absolute;
top: 30px;
left: 28%;
}
.footer-two{
position: absolute;
top: 30px;
left: 46%;
}
.footer-three{
position: absolute;
top: 30px;
left: 64%;
}
.footer-fourth{
position: absolute;
top: 30px;
left: 80%;
}
ul li{
list-style: none;
padding: 5px;
}
ul li a{
font-size: 14px;
}
a{
text-decoration: none;
color: white;
font-family: verdana;
}
a:hover{
color: red;
}
.fb{
position: absolute;
bottom: 100px;
left: 43%;
font-size: 25px;
}
.insta{
position: absolute;
bottom: 100px;
left: 46%;
font-size: 25px;
}
.twit{
position: absolute;
bottom: 100px;
left: 49%;
font-size: 25px;
}
.pint{
position: absolute;
bottom: 100px;
left: 52%;
font-size: 25px;
}
.yt{
position: absolute;
bottom: 100px;
left: 55%;
font-size: 25px;
}
p{
position: absolute;
bottom: 50px;
left: 595px;
font-size: 11px;
font-family: verdana;
color: white;
}
</style>
</head>
<body>
<h3>Footer by Technical Nizami Network</h3>
<div>
<div>
<div>
<ul>
<h2><a href="#">LOGO</a></h2>
<li><a href="#">SOLOGAN COMPANY</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">WEEWLY THEMES</a></li>
<li><a href="#">PRE-SALES FAQS</a></li>
<li><a href="#">SUBMIT A TICKET</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">SERVICES</a></li>
<li><a href="#">THEME TWEAK</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">SHOWCASE</a></li>
<li><a href="#">WIDGETKID</a></li>
<li><a href="#">SUPPORT</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">AFFILIATES</a></li>
</ul>
</div>
<div><a href="#"><i></i></a></i></div>
<div><a href="#"><i></i></a></div>
<div><a href="#"><i></i></a></div>
<div><a href="#"><i></i></a></div>
<div><a href="#"><i></i></a></div>
<p>©Copyright All Rights Reserved</p>
</div>
</div>
</body>
</html>Watch video related this article…
https://youtu.be/ETycAzWwHAY
