How to Create Responsive Footer
With HTML & CSS
You've likely seen footers on pretty much every site you've visited. The footer is a vital segment of a site that shows up at the lower part of each and every page. It normally contains connections to significant pages and copyright data. In this blog entry, I'll tell you the best way to make a responsive footer utilizing HTML and CSS. It's a straightforward yet incredible undertaking for fledglings, assisting you with understanding how to set up a footer format with HTML and give it a trendy, responsive plan with CSS.
To make a footer, we will utilize ordinarily utilized HTML components like footer, h4, ul, li, a, and button, alongside some essential CSS properties to style and make the footer responsive. So you ought to experience no difficulty tracking and figuring out the codes.
Video Tutorial of Responsive Footer
Responsive Footer [Source Codes]
To Create Responsive Footer in HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Responsive Footer with HTML and CSS</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <section class="footer">
- <div class="footer-row">
- <div class="footer-col">
- <h4>Core tools</h4>
- <ul class="links">
- <li><a href="#">Dashboard</a></li>
- <li><a href="#">Site Explorer</a></li>
- <li><a href="#">Keywords Explorer</a></li>
- <li><a href="#">Site Audit</a></li>
- <li><a href="#">Rank Tracker</a></li>
- </ul>
- </div>
-
- <div class="footer-col">
- <h4>Free SEO tools →</h4>
- <ul class="links">
- <li><a href="#">AI Writing tools</a></li>
- <li><a href="#">Website Checker</a></li>
- <li><a href="#">Keyword Checker</a></li>
- <li><a href="#">Keyword Rank Checker</a></li>
- <li><a href="#">WordPress Plugin</a></li>
- <li><a href="#">SEO Toolbar</a></li>
- </ul>
- </div>
-
- <div class="footer-col">
- <h4>Product</h4>
- <ul class="links">
- <li><a href="#">Pricing</a></li>
- <li><a href="#">Our data</a></li>
- <li><a href="#">AhrefsBot</a></li>
- <li><a href="#">API</a></li>
- <li><a href="#">Enterprise</a></li>
- </ul>
- </div>
-
- <div class="footer-col">
- <h4>Newsletter</h4>
- <p>
- Subscribe to our newsletter for a weekly dose
- of news, updates, helpful tips, and
- exclusive offers.
- </p>
- <form action="#">
- <input type="text" placeholder="Your email" required>
- <button type="submit">SUBSCRIBE</button>
- </form>
- <div class="icons">
- <i class="fa-brands fa-facebook-f"></i>
- <i class="fa-brands fa-twitter"></i>
- <i class="fa-brands fa-linkedin"></i>
- <i class="fa-brands fa-github"></i>
- </div>
- </div>
- </div>
- </section>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
-
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Open Sans', sans-serif;
- }
-
- .footer {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-width: 1280px;
- width: 95%;
- background: #282A35;
- border-radius: 6px;
- }
-
- .footer .footer-row {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- gap: 3.5rem;
- padding: 60px;
- }
-
- .footer-row .footer-col h4 {
- color: #fff;
- font-size: 1.2rem;
- font-weight: 400;
- }
-
- .footer-col .links {
- margin-top: 20px;
- }
-
- .footer-col .links li {
- list-style: none;
- margin-bottom: 10px;
- }
-
- .footer-col .links li a {
- text-decoration: none;
- color: #bfbfbf;
- }
-
- .footer-col .links li a:hover {
- color: #1DAAEF;
- }
-
- .footer-col p {
- margin: 20px 0;
- color: #bfbfbf;
- max-width: 300px;
- }
-
- .footer-col form {
- display: flex;
- gap: 5px;
- }
-
- .footer-col input {
- height: 40px;
- border-radius: 6px;
- background: none;
- width: 100%;
- outline: none;
- border: 1px solid #7489C6 ;
- caret-color: #fff;
- color: #fff;
- padding-left: 10px;
- }
-
- .footer-col input::placeholder {
- color: #ccc;
- }
-
- .footer-col form button {
- background: #fff;
- outline: none;
- border: none;
- padding: 10px 15px;
- border-radius: 6px;
- cursor: pointer;
- font-weight: 500;
- transition: 0.2s ease;
- }
-
- .footer-col form button:hover {
- background: #1DAAEF;
- }
-
- .footer-col .icons {
- display: flex;
- margin-top: 30px;
- font-size: 28px;
- gap: 30px;
- cursor: pointer;
- }
-
- .footer-col .icons i {
- color: #afb6c7;
- }
-
- .footer-col .icons i:hover {
- color: #1DAAEF;
- }
-
- @media (max-width: 768px) {
- .footer {
- position: relative;
- bottom: 0;
- left: 0;
- transform: none;
- width: 100%;
- border-radius: 0;
- }
-
- .footer .footer-row {
- padding: 20px;
- gap: 1rem;
- }
-
- .footer-col form {
- display: block;
- }
-
- .footer-col form :where(input, button) {
- width: 100%;
- }
-
- .footer-col form button {
- margin: 10px 0 0 0;
- }
- }
-
If you face any difficulties while creating your Responsive Footer or your code is not working as expected, you can download the source code files by clicking on the download button.