Create Awesome Responsive Footer Section

Responsive Footer Area

Introduction

Today in this topic we will discuss about to create Awesome Responsive Footer Area by the help of HTML and CSS. We will also provide the full Source code.

You can also copy the whole Source code and apply this Footer area in your any Website. You can also change the whole design according to yourself and may hope you can successfully make this awesome.

Our many of the post is related to blogger because this is the only one platform which is my favourite because We can change our website whole design or change any part of the website by doing some simple HTML or CSS code.

Source Code

Here is the whole Source code. We highly Recommend that before Apply the whole code at fast you have save it on your Code editor. And also we provide the Whole Code in 2 Types , First one is CSS Format and Second one is HTML Format.

CSS Code

Copy the whole CSS Code

Minning Tech

{ Minning Tech }


body{ margin: 0; padding: 0; font-family: "Open Sans",sans-serif; } footer{ background: #f1f1f1; padding: 90px 0; } .footer-container{ max-width: 1300px; margin: auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap-reverse; } .logo{ width: 180px; } .social-media{ margin: 20px 0; } .social-media a{ color: #001a21; margin-right: 25px; font-size: 22px; text-decoration: none; transition: .3s linear; } .social-media a:hover{ color: #fc5c65; } .right-col h1{ font-size: 26px; } .border{ width: 100px; height: 4px; background: dodgerblue; } .newsletter-form{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .txtb{ flex: 1; padding: 18px 40px; font-size: 16px; color: #293043; background: #ddd; border: none; font-weight: 700; outline: none; border-radius: 30px; min-width: 260px; } .btn{ padding: 18px 40px; font-size: 16px; color: #f1f1f1; background: dodgerblue; border: none; font-weight: 700; outline: none; border-radius: 30px; margin-left: 20px; cursor: pointer; transition: opacity .3s linear; } .btn:hover{ opacity: .7; } .page-content{ min-height: 100vh; font-size: 40px; display: flex; align-items: center; justify-content: center; } @media screen and (max-width:960px) { .footer-container{ max-width: 600px; } .right-col{ width: 100%; margin-bottom: 60px; } .left-col{ width: 100%; text-align: center; } } @media screen and (max-width:700px){ .btn{ margin: 0; width: 100%; margin-top: 20px; } }
Team
Minning Tech


HTML Code

Copy the whole HTML Code

Minning Tech

{ Minning Tech }


<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> </head> <body> <div class="page-content"> Page Content </div> <footer> <div class="footer-container"> <div class="left-col"> <img src="logo.png" alt="" class="logo"> <div class="social-media"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> <p class="rights-text">© 2020 Created By DarkCode All Rights Reserved.</p> </div> <div class="right-col"> <h1>Our Newsletter</h1> <div class="border"></div> <p>Enter Your Email to get our news and updates.</p> <form action="" class="newsletter-form"> <input type="text" class="txtb" placeholder="Enter Your Email"> <input type="submit" class="btn" value="submit"> </form> </div> </div> </footer> </body> </html>
Team
Minning Tech

Show comments
Hide comments

4 Comments

Cancel