A footer is present at the bottom of the web page. A few years ago, a footer is only used to give copyright information. But nowadays footer is made compulsory for any website. Footer is always set at the bottom of the webpage. Footer may also contain the newsletter of the website.
In this Responsive Footer Section, there is a blank space for the page content. The visitor or the user of the code can put their code at the page content space. The footer section is at the bottom of the page and consists of a logo of the company at the top right of the footer. There are five social media icons for contact with the website and followed by copyright content. At the left of the footer, there is a newsletter with the input field to enter the email and a submit button. The user can enter the email id and click on the submit button to send.
This footer design 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 smaller screen, these categories are vertically aligned based on the screen size. In PC, the logo of the company, social media icons, and copyright information is on the right side of the footer whereas, on the left side, there is a newsletter. But on smaller screen devices like mobile phones, the newsletter will be at the top which is followed by the logo, social media icons and, copyright information.
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 code of Responsive Footer Section using HTML & CSS with modern UI, 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 with modern UI), 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.
body{
margin: 0;
padding: 0;
font-family: "Open Sans",sans-serif;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
footer{
background: #12192c;
color:#fff;
padding: 90px 0;
}
.footer-container{
max-width: 1300px;
margin: auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap-reverse;
}
.logo{
width: 180px;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: #F7CE68;
margin-right: 25px;
font-size: 22px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: #FBAB7E;
}
.right-col h1{
font-size: 26px;
}
.border{
width: 200px;
height: 4px;
background: #F7CE68;
}
.newsletter-form{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.txtb{
flex: 1;
padding: 18px 40px;
font-size: 16px;
color: #000;
background: #F7CE68;
border: none;
font-weight: 700;
outline: none;
border-radius: 10px;
min-width: 260px;
}
.btn{
padding: 18px 40px;
font-size: 16px;
color: #000;
background: #F7CE68;
border: #fff 2px solid;
font-weight: 700;
outline: none;
border-radius: 10px;
margin-left: 20px;
cursor: pointer;
transition: opacity .3s linear;
}
.btn:hover{
border: #000 2px solid;
}
.page-content{
min-height: 100vh;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width:960px) {
.footer-container{
max-width: 600px;
}
.right-col{
width: 100%;
margin-bottom: 60px;
}
.left-col{
width: 100%;
text-align: center;
}
}
@media screen and (max-width:700px){
.btn{
margin: 0;
width: 100%;
margin-top: 20px;
}
}
.credit a{
text-decoration: none;
color: #F7CE68;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
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.
إرسال تعليق
Thank you
Learning robo team