Hello developers, today in this blog you will learn to create a Responsive Footer Design using CSS Flexbox.
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. The Footer section is always set at the bottom of the webpage. The footer contains information that improves a website's overall usability.
In this program (Responsive Footer Design using CSS Flexbox), on the webpage, there is a company name with the about us content, the address, mailed, and the mobile number of the company. Some quick links to redirect to that particular webpages, a text field to enter your mail id to subscribe to the blog, and some social icons to contact.
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 Design using CSS Flexbox is given below, you can copy the source code of this program. You can use this Responsive Footer Design using CSS Flexbox, you can take this to the next level with your creativity.
Responsive Footer Design using CSS Flexbox [Source Code]
To make this website (Responsive Footer Design using CSS Flexbox), 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.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
background: #0ED2F7;
}
footer{
width: 100%;
position: absolute;
bottom: 0;
background:#202124;
color: #fff;
padding: 30px 0 10px;
line-height: 30px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.row{
width: 85%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
.col{
flex-basis: 25%;
padding: 10px;
}
.col:nth-child(2),.col:nth-child(3){
flex-basis: 15%;
}
.logo-details{
color: #fff;
margin-bottom: 50px;
font-size: 30px;
}
.col h3{
width: fit-content;
margin-bottom: 40px;
letter-spacing: 2px;
position: relative;
}
.mail-id{
width: fit-content;
margin: 20px 0;
}
ul li{
list-style: none;
margin-bottom: 12px;
}
ul li a{
text-decoration: none;
color: #fff;
}
form{
padding-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ccc;
margin-bottom: 50px;
}
form .far{
font-size: 18px;
margin-right: 10px;
}
form input{
width: 100%;
background: transparent;
color: #ccc;
border: 0;
outline: none;
}
form button{
background: transparent;
border: 0;
outline: none;
cursor: pointer;
}
form button .fas{
font-size: 16px;
color: #ccc;
}
.social-icons .fa{
width: 40px;
height: 40px;
border-radius: 50px;
text-align: center;
line-height: 40px;
font-size: 20px;
color: #000;
background: #fff;
margin-right: 15px;
cursor: pointer;
}
hr{
width: 90%;
border: 0;
border-bottom: 1px solid #ccc;
margin: 10px auto;
}
.copyright{
text-align: center;
}
@media (max-width: 767px) {
footer .row {
display: flex;
flex-direction: column;
font-size: 14px;
}
footer .logo-name{
width: 90%;
}
footer {
position: unset;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
footer .col,
footer {
font-size: 14px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
footer {
position: unset;
}
}
.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: #0ED2F7;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Footer Design using CSS Flexbox, then contact us or comment us. We will try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team