How to create a simple footer – part 3
Before We Start
Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. How to create a simple footer – part 3
So if you are a person who wishes to develop a website, you have to know how to create that properly.
How to create a simple footer – part 3
We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<footer>
<div class="container">
<div class="footer-top">
<div class="row">
<div class="col-md-6 col-lg-3 about-footer">
<h3>Lorem Ipsum dummy text </h3>
<ul>
<li><a href="tel:(010) 1234 4321"><i class="fas fa-phone fa-flip-horizontal"></i>(010) 1234 4321</a></li>
<li><i class="fas fa-map-marker-alt"></i>
1 / 105 Bay Lights,
<br/>Lorem Ipsum,
<br/>LIC 3201
</li>
</ul>
<a href="" class="btn red-btn">Book Now</a>
</div>
<div class="col-md-6 col-lg-2 page-more-info">
<div class="footer-title">
<h4>Page links</h4>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3 page-more-info">
<div class="footer-title">
<h4>More Info</h4>
</div>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Consectetur Adipisicing </a></li>
<li><a href="#">Ed do eiusmod tempor incididunt</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-4 open-hours">
<div class="footer-title">
<h4>Open hours</h4>
<ul class="footer-social">
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<table class="table">
<tbody>
<tr>
<td><i class="far fa-clock"></i>Monday Thursday</td>
<td>9:00am - 5:00pm</td>
</tr>
<tr>
<td><i class="far fa-clock"></i>Friday</td>
<td>9:00am - 4:00pm</td>
</tr>
<tr>
<td><i class="far fa-clock"></i>Sturday</td>
<td>9:00am - 1:30pm</td>
</tr>
<tr>
<td><i class="far fa-clock"></i>Sunday</td>
<td>9:30am - 12:00pm</td>
</tr>
</tbody>
</table>
<hr>
<div class="footer-logo">
<table>
<tbody>
<tr>
<td><img src="https://i.ibb.co/vxc577d/dummy-logo3.jpg"></td>
<td><img src="https://i.ibb.co/vxc577d/dummy-logo3.jpg"></td>
<td><img src="https://i.ibb.co/vxc577d/dummy-logo3.jpg"></td>
<td><img src="https://i.ibb.co/vxc577d/dummy-logo3.jpg"></td>
<td><img src="https://i.ibb.co/vxc577d/dummy-logo3.jpg"></td>
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="footer-bottom">
<div class="row">
<div class="col-sm-4">
<a href="">Privacy policy</a>
</div>
<div class="col-sm-8">
<p>Lorem ipsum dolor sit amet @ 2020 All rights reserved</p>
</div>
</div>
</div>
</div>
</footer>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
h1,
h2,
h3,
h4,
h5,
h6 {}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
}
a,
a:active,
a:focus {
color: #333;
text-decoration: none;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: .2s;
-ms-transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
section {
padding: 60px 0;
/* min-height: 100vh;*/
}
.btn {
padding: 14px 25px;
text-transform: uppercase;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.red-btn {
background: #ed1b24;
border: 2px solid #ed1b24;
color: #fff;
}
.red-btn:hover{
background: #1c376c;
color: #fff;
border-color: #ffffff;
}
/*---------footer---------*/
footer {
background-color: #222023;
background-image: -webkit-linear-gradient( top, #222023, #1e2c47 );
background-image: -moz-linear-gradient( top, #222023, #1e2c47 );
background-image: -o-linear-gradient( top, #222023, #1e2c47 );
background-image: linear-gradient( to bottom, #222023, #1e2c47 );
color: #fff;
padding: 220px 0;
font-size: 17px;
}
footer h3 {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
}
footer h4 {
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 2px;
}
.about-footer li i {
position: absolute;
left: 0;
}
.about-footer li {
padding-left: 40px;
position: relative;
margin-bottom: 40px;
}
.about-footer ul {
margin-top: 40px;
}
footer a {
color: #fff;
}
footer a:hover {
color: #ed1b24;
}
.footer-title {
border-bottom: 2px solid #a61f2d;
padding-bottom: 25px;
margin-bottom: 35px;
}
ul.footer-social {
float: right;
}
ul.footer-social li {
display: inline;
margin-right: 16px;
}
ul.footer-social i {
width: 30px;
height: 30px;
background: #fff;
color: #222025;
text-align: center;
line-height: 30px;
border-radius: 30px;
font-size: 16px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
font-weight: 800;
}
ul.footer-social li:last-child {
margin-right: 0px;
}
ul.footer-social i:hover {
background: #ed1b24;
color: #fff;
}
.page-more-info li {
margin-bottom: 31px;
}
footer .table td:first-child {
font-weight: 600;
padding-left: 33px;
}
footer .table td:last-child {text-align: right;}
footer .table td {
padding: 0px;
border: 0;
}
footer .table tr {
}
footer .table td i {
position: absolute;
left: 0px;
font-size: 21px;
top: 6px;
}
footer .table td {
position: relative;
padding: 4px 0;
}
.footer-logo td {
padding-right: 4px !important;
}
.footer-logo td:last-child {
padding-right: 0px !important;
}
footer hr {
border-color: #9294a0;
}
.footer-bottom p {
text-align: right;
}
.footer-bottom {
margin-top: 30px;
}
.open-hours hr {
margin: 30px 0;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Free Udemy Courses
Your Output
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
