Hello readers, today in this blog you’ll learn how to create a Responsive Footer section using pure HTML & CSS This task is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to create Header in Htm, CSS & Javascript?.
Now it’s time to create a Website footer section with mobile responsive using Hypertext Preprocessor Language (HTML) and CSS
The Footer section is at the bottom of every website page (below the main body section) containing a quick view to connect with other pages.
The information included under the footer section is about a company, creation date, copyrights, subscription form, contact form, quick links, etc. Footer design elements are consistent or the same across all the other pages.
Responsive design element automatically scales its content to match the screen size on which it is viewed.
In the above images, there is a Footer section containing company information with social links as well as contact us details such as place, calling number, email address. There is also a subscriber form, where a customer can subscribe by entering an email id.
You can also be able to see a footer section for the mobile version. The footer is used to navigate from one page to another. There are different ways to create a footer section, one of which is the way we have designed it.
Watch out the full video, if you’re finding difficulty understanding what is written in this blog.
You may like this Footer bar (Footer example). If you like this footer in HTML and want to use it in your project you can freely copy the code and use it.
Also, I want you to take this footer section to next level with your creativity. Also, I want you all to comment below if you have any questions in your mind.
To create this small task (Responsive Footer Section). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension
Footer Section | MutliWebpress
Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
*{
padding:0; margin:0;
box-sizing: border-box;
color:#d9d9d9;
font-family: 'Open Sans', sans-serif;
}
footer{
position: fixed;
bottom: 0;
width: 100%;
background-color: #053742;
}
.container{
display: flex;
padding: 3rem;
}
.container .section{
flex-basis: 50%;
padding: 0 20px;
}
.section h2{
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
}
.section .content{
margin:20px 0 0 0;
position: relative;
}
.section .content::before{
position: absolute;
content: '';
top: -10px;
height: 2px;
width: 100%;
}
.section .content::after{
position: absolute;
content: '';
height: 2px;
width: 15%;
background-color: #dd5f24;
top: -10px;
}
.left .content .social{
margin: 20px 0 0 0;
}
.left .content .social a{
padding: 0 2px;
}
.left .content .social a span{
height: 40px;
width: 40px;
background: transparent;
line-height: 40px;
text-align: center;
font-size: 18px;
border-radius: 50px;
transition: 0.4s;
border:1px solid #656565;
}
.left .content .social a span:hover{
background: #dd5f24;
}
.center .content .fas{
font-size: 1.1rem;
background: transparent;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
border-radius: 50px;
transition: 0.3s;
cursor: pointer;
border:1px solid #656565;
}
.center .content .fas:hover{
background: #dd5f24;
border:1px solid #dd5f24;
}
.center .content .text{
font-size: 1.0.6rem;
font-weight: 500;
padding-left: 10px;
}
.center .content .phone{
margin: 15px 0;
}
.right form .text{
font-size: 1.0625rem;
margin-bottom: 2px;
color: #656565;
}
.right form input{
width: 100%;
font-size: 1.0625rem;
background: transparent;
border: 1px solid #656565;
}
.right form input{
height: 35px;
}
.right form .btn{
margin-top: 10px;
}
.right form .btn button{
height: 40px;
width: 100%;
border:none;
outline: none;
background: #dd5f24;
font-size: 1.0625rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
}
.right form .btn button:hover{
background: #000;
}
.footer-bottom center{
padding: 5px;
font-size: 0.9375rem;
background: #151515;
}
.footer-bottom center span{
color: #656565;
}
.footer-bottom center a{
text-decoration: none;
}
.footer-bottom center a:hover{
text-decoration: underline;
}
@media screen and (max-width:700px){
footer{
position: relative;
bottom: 0px;
}
.left .content{
padding-right:0px;
padding-bottom: 30px;
}
.container{
flex-wrap: wrap;
flex-direction: column;
padding:0.5rem;
}
.container .section{
margin:5px 0;
}
}
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created a Responsive footer section using HTML & CSS.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!