Footer design is the best part of a website that helps to improve your site speed performance and user experience. The beauty of the website mostly depends on footer design. Coding prefers you to many types of footer design for your purposes. Best footer design including points, many links social media, forms and business information and more that helps every visitor who finds you contract information.
There are many footer designs in the online platform. Basically this depends on the website niche. When anyone builds a simple website this point footer must include simple design. Create a business or portal website here obviously footer design modern base.
Website all sections related to its visitors and it makes it more attractive to them. So when you create a footer it must ensure to fully responsive any devices.
Footer design by HTML
Hypertext Markup Language (HTML) is a structure language that helps to create a structure for any kind of website section. Basically HTML works like a frame to set up a website.
Build up any kind of website you must need to know HTML because without HTML you don’t create a website.
HTML set up where using paragraph, content, image, audio, video more over all of elements of a website. Now we show how to build the best footer on your website with HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Footer Design
</title>
<link rel=”stylesheet” href=”footer.css”>
</head>
<body>
<footer>
<div>
</div>
<div>
<h3>Footer Design</h3>
<p>
We focus on the needs of small to middle market <br> to improve and grow their return.<br> We are the pioneers in search engine <br>optimization and have developed many <br>techniques to optimize your website efficiently,<br> mobile or web application, social media,<br> ads, and more.
</p>
</div>
<div>
<i>facebook</i>
<i>twitter</i>
<i>linkedin</i>
<i>youtube</i>
<i>whatsapp</i>
</div>
<div>
<h3>Some Links</h3>
<ul>
<li><a href=”#faq”>F.A.Q</a></li>
<li><a href=”#cookies-policy”>Cookies Policy</a></li>
<li><a href=”#terms-of-services”>Terms Of Service</a></li>
<li><a href=”#support”>Support</a></li>
</ul>
</div>
<div>
<h3>Newsletter</h3>
<div>
<input type=”email” placeholder=”Your email id here” />
<button>Subscribe</button>
</div>
<div>
<div>
<a href=””>Home</a>
<a href=””>About</a>
<a href=””>Contact</a>
<a href=””>Blog</a>
<a href=””>Social</a>
</div>
<p>Copyright © 2021 Foolish Developer</p>
</div>
</div>
</footer>
</body>
</html>
Responsive footer design by CSS
Setting up a website using HTML then you need to decorate this structure. All kinds of websites like WordPress, Wix, Weebly, eCommerce, Shopify, Joomla use CSS to create more attractive and eye-catching designs. Cascading Style Sheet language provides a website background color, font-color, front-family, font-size, padding, margin, align, border, height, weight and more needed things. Now we set up CSS created above the HTML structure. Follow these to know more about CSS language-
body {
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
align-items: flex-end;
}
footer {
background-color: #ff0089;
color: #fff;
font-size: 16px;
min-height:100px;
width:100%;
}
footer * {
font-family: “Poppins”, sans-serif;
box-sizing: border-box;
border: none;
outline: none;
}
.row {
padding: 1em 1em;
}
.row.primary {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
align-items: stretch;
}
.column {
width: 100%;
display: flex;
flex-direction: column;
padding: 0 2em;
min-height: 15em;
}
h3 {
width: 100%;
text-align: left;
color: white;
font-size: 1.4em;
white-space: nowrap;
}
.about p {
text-align: justify;
line-height: 2;
margin: 0;
}
div.social {
display: flex;
justify-content: space-around;
font-size: 1.6em;
flex-direction: row;
margin-top: 0.5em;
}
.social i {
color: #000000;
}
ul {
list-style: none;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
li:not(:first-child) {
margin-top: 0.8em;
}
ul li a {
color: #ffffff;
text-decoration: none;
}
ul li a:hover {
color: #2a8ded;
}
input,
button {
font-size: 1em;
padding: 1em;
width: 100%;
border-radius: 5px;
margin-bottom: 5px;
}
button {
background-color: #000000;
color: #ffffff;
}
.copyright {
padding: 0.3em 1em;
background-color: #0000;
}
.footer-menu{
float: left;
margin-top: 10px;
}
.footer-menu a{
color: #ffffff;
padding: 6px;
text-decoration: none;
}
.footer-menu a:hover{
color: #4842a2;
}
.copyright p {
font-size: 0.9em;
text-align: right;
}
@media screen and (max-width: 850px) {
.row.primary {
grid-template-columns: 1fr;
}
}
Mobile responsive design
When you create your website footer, you must create a step to look like a more responsive mobile device because of maximum visitors on your website using mobile phones when they see this site. So that mobile responsiveness is the most important part of best footer design by HTML and CSS that helps improve your user experience. It is very easy just follow this when you create your footer including these codes on your CSS file. CSS has been used to make all kinds of devices more responsive.
@media screen and (max-width: 850px) {
.row.primary {
grid-template-columns: 1fr;
}
}
Desktop responsive design
Responsive website design is an approach that allows all devices to respond to this size. Responsive design gives you an optimal view port experience that doesn’t matter which device visits this website, it can also be a mini mobile display or iPod or Desktop or laptop.
When you design your website with coding must follow this rules to more response your website-
-
Try designing at least 3 layouts, it can help to move your website. The 3 layout may be like this-Small-it will be under 600px that can help your website mobile response. Medium- It will be 600-900 px, it works large phones, tablets and small netbooks like computers. Large- this will be 900+ px, it can help you when anyone visits your website on their personal computers.
-
User experience Key
-
Flexibility images
-
Don’t design for latest version of mobile
-
Navigation
-
Idea of tools and resource
These steps help you a responsive design on any device to create a more unique footer design. Hopefully you enjoy this footer design by HTML and CSS. Have you any question footer design just write a comment below, we will try to answer this.
