Build A Responsive Footer Only Using HTML And CSS
How To Make A Responsive Footer Only Using HTML And CSS
If you want to learn how to create a website footer Using HTML and CSS, then you are in the right place.
I will teach about how to Build A Responsive Footer Only Using HTML And CSS. This website footer is fully Responsive and has all browser compatibility.
I used only HTML and CSS to create this website footer. If you follow this tutorial step by step, you will be able to make this Awesome footer only using HTML and CSS
I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create website footer using HTML and css.
Create A Responsive Website Footer Only Using HTML And CSS
<!--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"> <!--==Title==============================--> <title>Footer HTML</title> <!--Stylesheet===============================--> <link rel="stylesheet" href="css/style.css"> <!--==Import-poppins-font-family=============--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <body> <!--footer=========================================--> <footer> <div class="footer-container"> <!--heading-----------------> <div class="footer-heading"> <h4>It's time to stop scrolling. <br/> Let's create something. </h4> <h3>get in touch.</h3> </div> <!--footer-content-----------------------------> <div class="footer-content"> <!--box-------------> <div class="footer-box"> <strong>explore</strong> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Project</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--box-------------> <div class="footer-box"> <strong>Social</strong> <ul> <li><a href="#">Instagram</a></li> <li><a href="#">Dribble</a></li> <li><a href="#">Behance</a></li> </ul> </div> <!--box-------------> <div class="footer-box"> <strong>Contact</strong> <ul> <li><a href="#">hi@GTN.io</a></li> <li><a href="#">+123456789</a></li> </ul> </div> <!--box-------------> <div class="footer-box"> <strong>GTN.io</strong> <ul> <li>manteuffelstr.60b</li> <li>l0qqq berlin</li> <li>germany</li> </ul> </div> </div> <!--footer-bottom-------------> <div class="footer-bottom"> <!--links-----> <div class="footer-bottom-link"> <a href="#">privacy</a> <a href="#">site info</a> <a href="#">terms</a> </div> <!--copyright--> <div class="copyright"> <span>Made by GTI</span> <span>© 2022 GTI</span> </div> </div> </div> </footer> </body> </html>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: poppins;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*==Footer=================*/
footer{
background-color: #0f1012;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 120px 0px 50px 0px;
}
.footer-container{
width: 100%;
max-width: 980px;
margin: auto;
}
.footer-heading h3,
.footer-heading h4{
color: #ffffff;
}
.footer-heading h3{
font-size: 5rem;
margin-top: 20px;
font-weight: 600;
}
.footer-heading h4{
font-size: 2rem;
font-weight: 600;
letter-spacing: 1px;
}
.footer-content{
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.footer-box strong{
color: #ffffff;
font-size: 2rem;
text-transform: lowercase;
}
.footer-box ul{
margin-top: 15px;
}
.footer-box ul li a,
.footer-box ul li{
color: #ffffff;
font-size: 0.9rem;
text-transform: lowercase;
opacity: 0.9;
padding: 2px 0px;
transition: all ease 0.3s;
}
.footer-box ul li{
margin: 8px 0px;
}
.footer-box ul li:hover,
.footer-box ul li a:hover{
opacity: 0.6;
transition: all ease 0.3s;
}
.footer-bottom{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 100px;
}
.footer-bottom-link{
display: flex;
justify-content: flex-start;
align-items: center;
}
.footer-bottom-link a,
.copyright span{
color: #78809e;
font-size: 0.9rem;
margin: 0px 10px;
transition: all ease 0.3s;
}
.footer-bottom-link a:hover{
opacity: 0.6;
transition: all ease 0.3s;
}
@media(max-width:1060px){
.footer-container{
max-width: 800px;
}
}
@media(max-width:850px){
footer{
padding: 50px 0px;
}
.footer-container{
width: 90%;
}
.footer-content{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.footer-heading{
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media(max-width:680px){
.footer-heading h4{
font-size: 1.6rem;
line-height: 30px;
}
.footer-heading h3{
font-size: 2.3rem;
}
.footer-bottom{
flex-wrap: wrap;
justify-content:space-between;
align-items: center;
padding: 0px 20px;
}
}
@media(max-width:340px){
.footer-content{
grid-template-columns: 1fr;
margin-top: 40px;
}
.footer-box{
margin: 0px;
}
.footer-box strong{
font-size: 1.5rem;
}
}
Comments