{"id":171,"date":"2021-12-10T13:05:00","date_gmt":"2021-12-10T13:05:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2021\/12\/10\/responsive-footer-design-using-html-css\/"},"modified":"2023-01-05T12:09:28","modified_gmt":"2023-01-05T12:09:28","slug":"responsive-footer-design-using-html-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/responsive-footer-design-using-html-css\/","title":{"rendered":"Responsive Footer Design using HTML &#038; CSS"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #292828;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhLTREkzVSqDZY2MF5AklzMNWXH7MDqO-vh8RW21kLuTl0dCnGwFSEIFeDo9tbDYiutBBWtzy_oNz0zbKWNhD70Y9o2aL13fajGMo8z-n_en_7FqK1463BoMAOwsKSF8XjE40VwAa2yZtmO2zYA2_o8xSvyNKjF5SZ-nDF2iZUPeE2IIyNUWkctavCmnw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Responsive Footer Design using HTML &amp; CSS\" border=\"0\" data-original-height=\"671\" data-original-width=\"1280\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhLTREkzVSqDZY2MF5AklzMNWXH7MDqO-vh8RW21kLuTl0dCnGwFSEIFeDo9tbDYiutBBWtzy_oNz0zbKWNhD70Y9o2aL13fajGMo8z-n_en_7FqK1463BoMAOwsKSF8XjE40VwAa2yZtmO2zYA2_o8xSvyNKjF5SZ-nDF2iZUPeE2IIyNUWkctavCmnw=s16000\" title=\"In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of HTML footer tutorials with you.\"><\/a><\/div>\n<p style=\"text-align: left;\">In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of <b>HTML footer tutorials<\/b> with you. Footer is one of the most important parts of any website. The beauty of a website depends a lot on the footer design.<\/p>\n<p>There are many types of <a href=\"https:\/\/foolishdeveloper.com\/2021\/09\/responsive-footer-design.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">Responsive Footer<\/span><\/a>. Some websites use a simple footer that contains some basic information and some links. Some websites use <b>modern footer designs<\/b> which include many types of information, links, social icons, subscribe forms, etc.<\/p>\n<p>It is made fully responsive so that it can be easily used on any device. <a href=\"https:\/\/www.w3schools.com\/css\/css3_flexbox.asp\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">CSS&#8217;s Flexbox<\/span><\/a> has been used to make it responsive. With the help of Flexbox, no separate CSS code had to be added to make it responsive.<\/p>\n<h2 style=\"font-size: 29px; text-align: left;\">Responsive Footer using HTML and CSS<\/h2>\n<p style=\"text-align: left;\">To create this project (simple responsive footer HTML CSS) you need to have a basic idea about HTML and CSS. Below I have shared step-by-step tutorials and provided the necessary source code.<\/p>\n<p style=\"text-align: left;\">&nbsp;If you only want the source code, you can use the download button at the bottom of the article.<\/p>\n<h3 style=\"font-size: 25px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1: <\/span>The basic structure of footer design<\/h3>\n<p style=\"text-align: left;\">The basic structure of this footer design has been created using the following HTML and CSS codes. This structure will contain all the information such as text, social icons, links, newsletters, etc.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;footer&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;row primary&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&lt;\/footer&gt;<\/div>\n<\/div>\n<p style=\"text-align: left;\">Background-color light black is used here. Here <u>width: 100%<\/u> and <u>min-height: 100px<\/u> are used. Its height will depend on the amount of content.&nbsp;<\/p>\n<div class=\"class\">\n<div class=\"class\">body {<\/div>\n<div class=\"class\">&nbsp; padding: 0;<\/div>\n<div class=\"class\">&nbsp; margin: 0;<\/div>\n<div class=\"class\">&nbsp; min-height: 100vh;<\/div>\n<div class=\"class\">&nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; align-items: flex-end;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">footer {<\/div>\n<div class=\"class\">&nbsp; background-color: #121315;<\/div>\n<div class=\"class\">&nbsp; color: #a7a7a7;<\/div>\n<div class=\"class\">&nbsp; font-size: 16px;<\/div>\n<div class=\"class\">min-height:100px;<\/div>\n<div class=\"class\">width:100%;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">footer * {<\/div>\n<div class=\"class\">&nbsp; font-family: &#8220;Poppins&#8221;, sans-serif;<\/div>\n<div class=\"class\">&nbsp; box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; border: none;<\/div>\n<div class=\"class\">&nbsp; outline: none;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">This footer area is divided into 4 columns using the following CSS codes. We call this column sharing method Flexbox.<\/p>\n<div class=\"class\">\n<div class=\"class\">.row {<\/div>\n<div class=\"class\">&nbsp; padding: 1em 1em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.row.primary {<\/div>\n<div class=\"class\">&nbsp; display: grid;<\/div>\n<div class=\"class\">&nbsp; grid-template-columns: 2fr 1fr 1fr 2fr;<\/div>\n<div class=\"class\">&nbsp; align-items: stretch;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjv3sioNULeTew9SFsGNfxBXX0xLsB3T0_g1wkbeLwTFOeUAD3EANs8pEmfAqJkUnRQZPFV-4tVDBls0XKphWOzczSI3G44hXdoEabhFJvulh9ywalClyDU8H-iDrbYBxDq-Sbw5T0ztGzXmI3F4BkYwMKCzMY9L8EKK04n04PjhgGX7P_xHyDJTpvPUw\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"The basic structure of footer design\" border=\"0\" data-original-height=\"491\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjv3sioNULeTew9SFsGNfxBXX0xLsB3T0_g1wkbeLwTFOeUAD3EANs8pEmfAqJkUnRQZPFV-4tVDBls0XKphWOzczSI3G44hXdoEabhFJvulh9ywalClyDU8H-iDrbYBxDq-Sbw5T0ztGzXmI3F4BkYwMKCzMY9L8EKK04n04PjhgGX7P_xHyDJTpvPUw=s16000\" title=\"The basic structure of footer design\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:&nbsp;<\/span>Add information to Responsive Footer Design<span><!--more--><\/span><\/h3>\n<p>Now I will add all the information like some basic text, social icons, etc. in this footer design.<\/p>\n<p style=\"text-align: left;\"><span style=\"color: #2b00fe; font-size: 22px;\">Add information to the first column<\/span><\/p>\n<p>I have added the required information in the first column using the following HTML and CSS codes. Here I first added a heading then some basic text and four social icons.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;column about&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;h3&gt;Foolish Developer&lt;\/h3&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;p&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae,<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; voluptatem corporis error non,<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/p&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;div class=&#8221;social&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;i class=&#8221;fa-brands fa-facebook-square&#8221;&gt;&lt;\/i&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;i class=&#8221;fa-brands fa-instagram-square&#8221;&gt;&lt;\/i&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;i class=&#8221;fa-brands fa-twitter-square&#8221;&gt;&lt;\/i&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;i class=&#8221;fa-brands fa-youtube-square&#8221;&gt;&lt;\/i&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;i class=&#8221;fa-brands fa-whatsapp-square&#8221;&gt;&lt;\/i&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<p style=\"text-align: left;\">I have designed all that information using the following CSS codes.<\/p>\n<div class=\"class\">\n<div class=\"class\">.column {<\/div>\n<div class=\"class\">&nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; flex-direction: column;<\/div>\n<div class=\"class\">&nbsp; padding: 0 2em;<\/div>\n<div class=\"class\">&nbsp; min-height: 15em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">h3 {<\/div>\n<div class=\"class\">&nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; text-align: left;<\/div>\n<div class=\"class\">&nbsp; color: white;<\/div>\n<div class=\"class\">&nbsp; font-size: 1.4em;<\/div>\n<div class=\"class\">&nbsp; white-space: nowrap;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">\n<div class=\"class\">.about p {<\/div>\n<div class=\"class\">&nbsp; text-align: justify;<\/div>\n<div class=\"class\">&nbsp; line-height: 2;<\/div>\n<div class=\"class\">&nbsp; margin: 0;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">div.social {<\/div>\n<div class=\"class\">&nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; justify-content: space-around;<\/div>\n<div class=\"class\">&nbsp; font-size: 2.4em;<\/div>\n<div class=\"class\">&nbsp; flex-direction: row;<\/div>\n<div class=\"class\">&nbsp; margin-top: 0.5em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.social i {<\/div>\n<div class=\"class\">&nbsp; color: #bac6d9;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEiQP-_bjq1sv6SBr4YUcPTP3GgNWdmivsvFvJ4kpxKsqLq4qBFPZovQ3gUF0sy92nQIMMwWJX_-O69rjNyT8X9a4-f-zMrDkFXMfJM17zCsyeqLFvbF_EEFrcQ4yVZIGZ9vVIOroBAjKHRcRzeV1CpI6GADnTWHBA4yIFBbgUBP7XwWocye0955HcsN2w\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add information to the first column\" border=\"0\" data-original-height=\"409\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEiQP-_bjq1sv6SBr4YUcPTP3GgNWdmivsvFvJ4kpxKsqLq4qBFPZovQ3gUF0sy92nQIMMwWJX_-O69rjNyT8X9a4-f-zMrDkFXMfJM17zCsyeqLFvbF_EEFrcQ4yVZIGZ9vVIOroBAjKHRcRzeV1CpI6GADnTWHBA4yIFBbgUBP7XwWocye0955HcsN2w=s16000\" title=\"Add information to the first column\"><\/a><\/div>\n<p style=\"text-align: left;\"><span style=\"color: #2b00fe; font-size: 22px;\">Add information to the second column<\/span><\/p>\n<p style=\"text-align: left;\">\nNow I have added the content in the second column using the following HTML and CSS codes. I have used four links in this column.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;column links&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;h3&gt;Some Links&lt;\/h3&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;ul&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&#8221;#faq&#8221;&gt;F.A.Q&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&#8221;#cookies-policy&#8221;&gt;Cookies Policy&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&#8221;#terms-of-services&#8221;&gt;Terms Of Service&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&#8221;#support&#8221;&gt;Support&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;\/ul&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">ul {<\/div>\n<div class=\"class\">&nbsp; list-style: none;<\/div>\n<div class=\"class\">&nbsp; display: flex;<\/div>\n<div class=\"class\">&nbsp; flex-direction: column;<\/div>\n<div class=\"class\">&nbsp; padding: 0;<\/div>\n<div class=\"class\">&nbsp; margin: 0;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">li:not(:first-child) {<\/div>\n<div class=\"class\">&nbsp; margin-top: 0.8em;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">ul li a {<\/div>\n<div class=\"class\">&nbsp; color: #a7a7a7;<\/div>\n<div class=\"class\">&nbsp; text-decoration: none;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">ul li a:hover {<\/div>\n<div class=\"class\">&nbsp; color: #2a8ded;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgxLdrUf2mlQoB35i7JNVcgxyda3oBIUVYrGeEjRTymWkBPRjA2IThgTEZ5kOlcClOizbLWU1H6HtE2XJf7B4LBCYGIiZKRNaNv07Lee7DQMchLGsgujGK1Q4esmoN2trGVHUMsvcl85PYdFTaGd3O69H4cCx9fTnz3EELJpJuNzevwr1Z9SfLoZvcePA\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add information to the second column\" border=\"0\" data-original-height=\"409\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEgxLdrUf2mlQoB35i7JNVcgxyda3oBIUVYrGeEjRTymWkBPRjA2IThgTEZ5kOlcClOizbLWU1H6HtE2XJf7B4LBCYGIiZKRNaNv07Lee7DQMchLGsgujGK1Q4esmoN2trGVHUMsvcl85PYdFTaGd3O69H4cCx9fTnz3EELJpJuNzevwr1Z9SfLoZvcePA=s16000\" title=\"Add information to the second column\"><\/a><\/div>\n<p style=\"text-align: left;\"><span style=\"color: #2b00fe; font-size: 22px;\">Add information to the third column<\/span><\/p>\n<p style=\"text-align: left;\">\nNow the following codes have helped to design the third column. I have also added some links in this column.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;column links&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;h3&gt;Some Links&lt;\/h3&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;ul&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href=&#8221;#faq&#8221;&gt;F.A.Q&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href=&#8221;#cookies-policy&#8221;&gt;Cookies Policy&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href=&#8221;#terms-of-services&#8221;&gt;Terms Of Service&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href=&#8221;#support&#8221;&gt;Support&lt;\/a&gt;&lt;\/li&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;\/ul&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEg1oZNOyLmka4ri4cixDtyE4V8Yc2QgHtSImclcz3-S_NOh4G68AAoHSndA0I79kp4BaVOFVKtp0pVWKPUb71ldWbz4H0Ent6vp5AHfqkQE68mTC37MHHwZ8L7o1CLlZ6txgk08O9fGzy5OPbLpvlo2K0jPPmDVELPUHnz8ecEM_nhqmhXALLt_ltyY-g\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add information to the third column\" border=\"0\" data-original-height=\"409\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEg1oZNOyLmka4ri4cixDtyE4V8Yc2QgHtSImclcz3-S_NOh4G68AAoHSndA0I79kp4BaVOFVKtp0pVWKPUb71ldWbz4H0Ent6vp5AHfqkQE68mTC37MHHwZ8L7o1CLlZ6txgk08O9fGzy5OPbLpvlo2K0jPPmDVELPUHnz8ecEM_nhqmhXALLt_ltyY-g=s16000\" title=\"Add information to the third column\"><\/a><\/div>\n<p style=\"text-align: left;\"><span style=\"color: #2b00fe; font-size: 22px;\">Add information in four columns<\/span><\/p>\n<p style=\"text-align: left;\">\nNow in the fourth column, I have added the <a href=\"https:\/\/foolishdeveloper.com\/2021\/11\/email-subscription-form-using-html-css.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">newsletter subscription form<\/span><\/a>. Users will be able to subscribe to your website using this form. As a result, the user gets a notification whenever you upload any content.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;column subscribe&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;h3&gt;Newsletter&lt;\/h3&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;div&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;input type=&#8221;email&#8221; placeholder=&#8221;Your email id here&#8221; \/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;button&gt;Subscribe&lt;\/button&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">input,<\/div>\n<div class=\"class\">button {<\/div>\n<div class=\"class\">&nbsp; font-size: 1em;<\/div>\n<div class=\"class\">&nbsp; padding: 1em;<\/div>\n<div class=\"class\">&nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; border-radius: 5px;<\/div>\n<div class=\"class\">&nbsp; margin-bottom: 5px;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">button {<\/div>\n<div class=\"class\">&nbsp; background-color: #c7940a;<\/div>\n<div class=\"class\">&nbsp; color: #ffffff;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjMJ83iifcDe_PR-fwREbtgt9agKTookBGAb9qsS0yksYJEO9GdAEMDz2LtvZMMBomyE9gi44FH84YEiWezoHHu9rAqAhacXRoBn2gY486Yo6tKhq-XNUO572ovishsqY78QEQvEgjkmQQB0uQOyGVdHNU3BC2qTzkLHmas_z3FFw8Ls3NNJlOlEJfR7g\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Add information in four columns\" border=\"0\" data-original-height=\"409\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEjMJ83iifcDe_PR-fwREbtgt9agKTookBGAb9qsS0yksYJEO9GdAEMDz2LtvZMMBomyE9gi44FH84YEiWezoHHu9rAqAhacXRoBn2gY486Yo6tKhq-XNUO572ovishsqY78QEQvEgjkmQQB0uQOyGVdHNU3BC2qTzkLHmas_z3FFw8Ls3NNJlOlEJfR7g=s16000\" title=\"Add information in four columns\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:<\/span>&nbsp;Create a copyright section in the footer<\/h3>\n<p style=\"text-align: left;\">Now I have created a copyright section in this <b>footer design<\/b>. This section includes a copyright link and some footer menus. Using the HTML and CSS codes below, I added 5 menu links and added a copyrighted text.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;row copyright&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;div class=&#8221;footer-menu&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;a href=&#8221;&#8221;&gt;Home&lt;\/a&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;a href=&#8221;&#8221;&gt;About&lt;\/a&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;a href=&#8221;&#8221;&gt;Contact&lt;\/a&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;a href=&#8221;&#8221;&gt;Blog&lt;\/a&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;a href=&#8221;&#8221;&gt;Social&lt;\/a&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; &lt;p&gt;Copyright &amp;copy; 2021 Foolish Developer&lt;\/p&gt;<\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">.copyright {<\/div>\n<div class=\"class\">&nbsp; padding: 0.3em 1em;<\/div>\n<div class=\"class\">&nbsp; background-color: #25262e;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.footer-menu{<\/div>\n<div class=\"class\">&nbsp; float: left;<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin-top: 10px;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.footer-menu a{<\/div>\n<div class=\"class\">&nbsp; color: #cfd2d6;<\/div>\n<div class=\"class\">&nbsp; padding: 6px;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; text-decoration: none;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.footer-menu a:hover{<\/div>\n<div class=\"class\">&nbsp; color: #27bcda;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">.copyright p {<\/div>\n<div class=\"class\">&nbsp; font-size: 0.9em;<\/div>\n<div class=\"class\">&nbsp; text-align: right;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">Now it&#8217;s time to make this simple HTML footer fully responsive. It&#8217;s very easy to <b>make it responsive<\/b>.<\/p>\n<div class=\"class\">\n<div class=\"class\">@media screen and (max-width: 850px) {<\/div>\n<div class=\"class\">&nbsp; .row.primary {<\/div>\n<div class=\"class\">&nbsp; &nbsp; grid-template-columns: 1fr;<\/div>\n<div class=\"class\">&nbsp; }<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEi8mqt9tsi1nikeqZYg6xjq-700TP1eTx5ZNCKKqyQm2BMXwO1dQ_s6R7QgjvymXXtn-jbaVFsDu8MU0KxoBUQr1LLyYnXcZHF81bqf847-Z9SJt2CEL8IRTxvpqGYtM6WoaRanr946kzFJt1yMnaB71NpB7r8k0hOgfG3siGXw72pNF3CRdd8JAjZ4Fg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Responsive Footer Design\" border=\"0\" data-original-height=\"491\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEi8mqt9tsi1nikeqZYg6xjq-700TP1eTx5ZNCKKqyQm2BMXwO1dQ_s6R7QgjvymXXtn-jbaVFsDu8MU0KxoBUQr1LLyYnXcZHF81bqf847-Z9SJt2CEL8IRTxvpqGYtM6WoaRanr946kzFJt1yMnaB71NpB7r8k0hOgfG3siGXw72pNF3CRdd8JAjZ4Fg=s16000\" title=\"Responsive Footer Design\"><\/a><\/div>\n<p style=\"text-align: left;\">Hopefully, you have learned from the above tutorial how I created this <a href=\"https:\/\/foolishdeveloper.com\/2021\/09\/responsive-footer-design.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">Responsive footer Design using HTML and CSS<\/span><\/a>. Earlier I showed <b>how to create a simple footer design<\/b>.&nbsp;<\/p>\n<p style=\"text-align: left;\">You can use this link if you want to <a href=\"https:\/\/foolishdeveloper.com\/2021\/05\/responsive-footer-design-using-html-css.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">create a footer using bootstrap<\/span><\/a>. Below is a download button with which you can download the required source code.<\/p>\n<p><script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button class=\"last-btn\" id=\"btnx\" onclick=\"generate()\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=1pvR8dGzluoe343zcvYXGZ6CtVRLvYd8_\" id=\"downloadx\" style=\"display: none;\" target=\"_blank\" rel=\"noopener\"><i aria-hidden=\"true\" class=\"fa fa-cloud-download fa-fw\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of HTML footer tutorials with you. Footer is one of the most important parts of any website. The beauty of a website depends a lot on the footer design. There are many [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,181,182,121,14],"tags":[],"class_list":["post-171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-footer","category-footer_design","category-for_beginners","category-html","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":1,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":613,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/171\/revisions\/613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/612"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}