How to Create Pure CSS Responsive Footer Using HTML and CSS

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

In web design, a footer is a section of a webpage that is typically located at the bottom of the page. The footer is used to display information that is not directly related to the main content of the page, such as copyright notices, links to important pages, and contact information. A well-designed footer can improve the overall user experience of a website, as it provides users with important information and helps them navigate the site. Additionally, the footer can be used to showcase the website's branding and design elements, such as a logo or color scheme.

Responsive footer design makes any website attractive. The footer section plays an important role in user satisfaction and site structure. In this post, we'll show you how to create a pure CSS responsive footer using only HTML and CSS.

So, Let's start making an amazing responsive footer using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our footer.

The below code is an HTML code for a footer section of a webpage. It contains a <div> element with a class of "footer" which encloses several other <div> elements, each containing information related to the website. The first <div> element contains the website's name, which is styled using a <h2> tag with a <sup> tag nested within it.

The next three <div> elements contain information about the website's services, social media links, and quick links. Each of these <div> elements contain a <h4> tag with the relevant title followed by a series of <p> tags containing links to the relevant pages or sites.

The final <div> element contains contact information for the website. It contains four <h4> tags with relevant titles, followed by <p> tags containing the relevant information. The entire footer section is enclosed in a <footer> tag which contains a horizontal rule (<hr>) and the copyright notice for the website.

In addition, the code includes a <link> tag to link to an external stylesheet named "styles.css", which presumably contains additional styling rules for the page. It also includes a <script> tag to load the Font Awesome icon library from a third-party CDN.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our footer using HTML, and now we can move on to styling it using CSS.

Step 2 (CSS Code):

Once the basic HTML structure of the footer is in place, the next step is to add styling to the footer using CSS. CSS allows us to control the visual appearance of the footer, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our responsive footer.

The first part, * { margin: 0; padding: 0; box-sizing: border-box; }, sets the default margin and padding to 0 for all elements on the page, and ensures that the box-sizing property is set to border-box, which includes the padding and border in the element's total width and height.

The .footer class styles the footer element itself. It sets the background color to black, the text color to white, and positions it at the bottom of the page with position: fixed; bottom: 0; left: 0;. The width is set to 100% of the viewport with width: 100%;.

The .heading class is a child of the footer and is styled to have white text, a maximum width of 1010 pixels, a width of 90%, text in uppercase, centered with margin: 0 auto;, and a 3-rem margin below the heading.

The .content class is also a child of the footer, and is set to be a flex container with items spaced evenly with justify-content: space-evenly;. All paragraph elements inside the content div will have a 1.3-rem margin below it. All anchor tags inside the content div will have white text with no underline. When hovering over anchor tags in the content div, a 1-pixel solid border will appear underneath it. All h4 elements in the content div will have a 1.3-rem margin below it and a font size of 19 pixels.

The footer element has its text centered with text-align: center; and a 2-rem margin below it. It also has a horizontal rule below it with a 2-rem margin on both sides with footer hr { margin: 2rem 0; }.

Finally, there are three media queries that adjust the style of the footer depending on the size of the device screen. When the device has a maximum width of 767 pixels, the .content class becomes a column and the font size is set to 14 pixels. Additionally, the footer's position property is unset. When the device width is between 768 pixels and 1024 pixels, both the .content and .footer class' font sizes are set to 14 pixels. When the device is in landscape mode and has a maximum height of 500 pixels, the footer's position property is unset.

This will give our responsive footer an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Conclusion:

By following these steps, you should now have a beautiful and responsive footer for your website. Remember to keep the design simple and clean, and to test your footer on different screen sizes. We hope this tutorial has been helpful, and we look forward to seeing your amazing footers!