Hello developers, today in this blog you will learn to create a Responsive Footer Section using HTML & CSS with modern UI.
A website’s footer is an area at the bottom of every web page, below the main body content. Footer is made compulsory for any website. The 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 are four headings with their sub-links, the list of services that the company provides, some social icons, some useful links to redirect to that particular web pages, and some links to redirect to see the information about the company. The hover effect has been used in every sub-links of the footer.
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 with modern UI 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 code to the next level with your creativity.
Responsive Footer Section using HTML & CSS with modern UI [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: #887fff;
}
.container{
max-width: 1170px;
margin:0;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #12192C;
padding: 30px 0;
width: 100%;
position:fixed;
bottom:0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.focre p{
color: #ffffff;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #887fff;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
@media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#887fff;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Footer Section using HTML & CSS with modern UI, 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