Hello developers, today in this blog you will learn to create a Responsive Footer Section using HTML & CSS.
A footer is a section, present at the bottom of the web page. A few years ago, the footer is only used to give copyright information. But nowadays footer is made compulsory for any website. Footer section is always set at the bottom of the web page. The footer contains information that improves a website's overall usability.
In this Responsive Footer Section Design, there is a company name at the center, the list of services that the company provides, some social icons, some quick links to redirect to that particular web pages, and the location and contact information.
This footer section is made fully responsive, by using CSS media query property. When you open this footer section on the PC, these footer categories are horizontally aligned, but on the mobile screen, these categories are vertically aligned. That is arranged one after the other.
The source code of this Responsive Footer Section using HTML & CSS is given below, you can copy the source code of this program. You can use this Responsive Footer Section using HTML & CSS, you can take this to the next level with your creativity.
Responsive Footer Section using HTML & CSS [Source Code]
To make this website (Responsive Footer Section using HTML & CSS), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background-color:#202124;
color:#fff;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.footer .heading {
max-width: 1010px;
width: 20%;
text-align: center;
text-transform: uppercase;
margin: 10px auto;
margin-bottom: 3rem;
background-color: #887fff;
color:#202124;
border-radius: 8px;
padding:5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footer .content {
display: flex;
justify-content: space-evenly;
margin: 1.5rem;
}
.footer .content p {
margin-bottom: 1.3rem;
color: #ddd;
}
.footer .content a {
text-decoration: none;
color: #ddd;
}
.footer .content a:hover {
color:#887fff
}
.footer .content h4 {
margin-bottom: 1.3rem;
font-size: 19px;
color: #887fff;
}
footer {
text-align: center;
margin-bottom: 2rem;
color: #887fff;
}
@media (max-width: 767px) {
.footer .content {
display: flex;
flex-direction: column;
font-size: 14px;
}
.footer .heading{
width: 90%;
}
.footer {
position: unset;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.footer .content,
.footer {
font-size: 14px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.footer {
position: unset;
}
}
.credit{
text-align: center;
color: #000;
font-weight: 900;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#fff;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Footer Section using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team