Hello everyone, today we will create the footer design using Html and CSS. In the last session, we covered Design an email newsletter in Html and CSS that how to create the header of the website in Html and CSS. But, now our goal is to develop the footer of the website in Html and CSS.
Footer design using Html and CSS:
As you can see in the image we have created an awesome footer for our website in Html and CSS only without using a single line of javascript. It has a background that is a solid color. It has a logo on the left side and you can replace it according to your website. Then it has a credit to the website creator developer or owner with the year of creation.
On the right side of the footer, it has a newsletter that is used for collecting the emails of the users. If you want to know how to create it beautifully then visit how to create a newsletter of the website. You can completely learn it. Then it has a description that how to follow our website. Then it has an input field for entering the email into the newsletter. After entering the email into the field you can hit the submit button.
It will send the email to the database. This button has a hover effect. It changes its color after hovering at this button. It has round corners which are achieved by using the radius property in CSS. You can also create it for your website and you have to follow me for creating it. So, let’s get started.
You might like it:
How to create a footer design using Html and CSS?
Footer design is easy to develop. Follow the below steps for its development.
Download an IDE for footer design using Html and CSS:
Recommended IDE’s are:
VS CODE
Sublime text 3
Source code of Html:
The HTML code is given below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!-- Authors: Akash Chouhan Open-Source code Version 1.0 --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Template - FantacyDesigns</title> <link rel="stylesheet" href="Assets/FA/css/all.min.css"/> <link rel="stylesheet" href="Assets/css/footer.css"/> </head> <body> <footer> <div class="footer-wrap"> <div class="widgetFooter"> <h4 class="uppercase">useful links</h4> <ul id="footerUsefulLink"> <li title="About US"> <span class="usefulLinksIcons"> <i class="far fa-id-card"></i> </span> <a> About us</a> </li> <li title="Our Team"> <span class="usefulLinksIcons"> <i class="far fa-handshake"></i> </span> <a> Our team</a> </li> <li title="Gallery"> <span class="usefulLinksIcons"> <i class="far fa-images"></i> </span> <a> Gallery</a> </li> <li title="Contact Us"> <span class="usefulLinksIcons"> <i class="far fa-envelope"></i> </span> <a> Contact us</a> </li> </ul> </div> <div class="widgetFooter" id="footerLogo"> <img src="Assets/images/main.png" alt="Logo"> </div> <div class="widgetFooter"> <h4 class="uppercase">Social media links</h4> <ul id="footerMediaLinks"> <li class="media1" title="Facebook"> <span class="mediaLinksIcons fb"> <i class="fab fa-facebook-square"></i> </span> <a class="fb"> facebook</a> </li> <li class="media2" title="Twitter"> <span class="mediaLinksIcons twit"> <i class="fab fa-twitter-square"></i> </span> <a class="twit"> Twitter</a> </li> <li class="media3" title="Instagram"> <span class="mediaLinksIcons insta"> <i class="fab fa-instagram"></i> </span> <a class="insta"> instagram</a> </li> <li class="media4" title="Github"> <span class="mediaLinksIcons git"> <i class="fab fa-github-alt"></i> </span> <a class="git"> Github</a> </li> </ul> </div> </div> <div class="footerCopy"> <div class="inb"> <p>Copyrights<sup>©</sup> 2021. Developed with <i class="fas fa-heart" style="color: red;"></i> by FantacyDesigns & team</p> </div> </div> </footer> </body> </html> |
Source code of CSS:
The source code is given below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,300;1,200&display=swap'); html, body{ margin: 0; font-family: 'Montserrat Alternates', sans-serif; padding: 0; background: #000; } footer{ width: 100%; min-height: 300px; max-height: auto; background-image: linear-gradient(to right top, #161616, #191919, #1b1b1b, #1e1e1e, #212121); clear: both; } footer .footer-wrap{ width: 80%; margin: 0 auto; padding-left: 9%; color: white; } .widgetFooter{ width: calc(85%/3); height: auto; float: left; padding: 2.5%; text-align: left; } h4.uppercase{ text-transform: uppercase; font-family: Arial; font-size: 20px; } ul#footerUsefulLink, ul#footerMediaLinks{ list-style-type: none; margin: 0; padding: 0; line-height: 40px; text-transform: capitalize; } ul#footerUsefulLink li, ul#footerMediaLinks li{ cursor: pointer; /* transition: border-bottom 3s ease-in; */ } ul#footerUsefulLink li:hover .usefulLinksIcons, ul#footerUsefulLink li:hover a{ color: #00CED1; /* border-bottom: 1px solid red; */ } ul#footerMediaLinks li:hover span.fb, ul#footerMediaLinks li:hover a.fb { color: #3b5998; } ul#footerMediaLinks li:hover span.twit, ul#footerMediaLinks li:hover a.twit { color: #1DA1F2; } ul#footerMediaLinks li:hover span.insta, ul#footerMediaLinks li:hover a.insta { color: #ffc838; } ul#footerMediaLinks li:hover span.git, ul#footerMediaLinks li:hover a.git { color: #f1502f; } div#footerLogo img{ width: 50%; margin: 25% 0; } div.footerCopy{ clear: both; color: white; text-align: center; padding-bottom: 5px; border-top: 1px solid #ccc; background: #262626; } @media (max-width:800px){ footer .footer-wrap{ width: 100%; padding: 0; } .widgetFooter:not(:nth-of-type(2)){ width: calc(90%/2); text-align: center; font-size: 0.9em; } .widgetFooter:nth-of-type(2){ display: none; } div.footerCopy{ font-size: 0.8em; } } @media (max-width:600px){ .widgetFooter:not(:nth-of-type(2)){ text-align: left; } } @media (max-width:500px){ footer{ min-height: auto; } .widgetFooter:not(:nth-of-type(2)){ width: 100%; padding: 0; text-align: center; } ul#footerUsefulLink, ul#footerMediaLinks{ display: flex; } ul#footerUsefulLink li, ul#footerMediaLinks li{ float: left; flex: 1; text-align: center; font-size: 1.5em; } ul#footerUsefulLink li a, ul#footerMediaLinks li a{ display: none; } ul#footerUsefulLink li:hover, ul#footerUsefulLink li:hover .usefulLinksIcons, ul#footerUsefulLink li:hover a{ color: white; background-color: #00CED1; } ul#footerMediaLinks li.media1:hover, ul#footerMediaLinks li:hover span.fb, ul#footerMediaLinks li:hover a.fb { background-color: #3b5998; color: white; } ul#footerMediaLinks li.media2:hover, ul#footerMediaLinks li:hover span.twit, ul#footerMediaLinks li:hover a.twit { background-color: #1DA1F2; color: white; } ul#footerMediaLinks li.media3:hover, ul#footerMediaLinks li:hover span.insta, ul#footerMediaLinks li:hover a.insta { background-color: #ffc838; color: white; } ul#footerMediaLinks li.media4:hover, ul#footerMediaLinks li:hover span.git, ul#footerMediaLinks li:hover a.git { background-color: #f1502f; color: white; } } |
In this way, you can create your footer for your website using these steps.
Download source code:
Many people are unable to connect the files with each other. So, for those people, we have created a .zip file. In this file, we have all the content of the footer. So, download and enjoy it.
Task:
This footer has almost all the text and functionalities that a professional footer have. Now it’s modification and task time. Add the icons and text of phone, email, Facebook, Instagram, and Pinterest along with links in them using <href> tag. Change the green color to a light color.
You can also follow us.
Thanks for reading this article.
Download Source CodeClick to Download
