Responsive Footer HTML CSS Template

Hey, developer today is Day 66 of our 90Projects in 90Days. So on Day-66, we are going to Create a Responsive Footer template using HTML and CSS.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.


responsive footer html css template, simple footer template html css, footer html css examples, geekshelp



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Responsive Footer </title>
    <link rel="stylesheet" href=""
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <section class="main-section">
        <h2> Upper Content Goes Here </h2>
    <footer class="footer">
        <div class="box">
            <h2> Links </h2>
            <ul class="links">
                <li><a href="#"> Home </a></li>
                <li><a href="#"> Blogs </a></li>
                <li><a href="#"> Services </a></li>
                <li><a href="#"> About Us </a></li>
                <li><a href="#"> Contact Us </a></li>
        <div class="box">
            <h2> News Letter </h2>
            <form action="" class="registration">
                <input type="email" name="email" id="email" placeholder="Enter your email Address">
                <button type="submit"> Subscibe Now </button>
        <div class="box">
            <h2> Contact </h2>
            <p class="address"> 123, xyz Road, ABC 20 <br>
                Hisar, Haryana, India
            <ul class="social">
                <li><i class="fa-brands fa-facebook"></i></li>
                <li><i class="fa-brands fa-twitter"></i></li>
                <li><i class="fa-brands fa-instagram"></i></li>
                <li><i class="fa-brands fa-youtube"></i></li>


CSS Code


@import url('');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

.main-section {
    width: 100%;
    text-align: center;
    padding: 5rem 0;

.footer {
    display: flex;
    color: #fffefe;
    padding: 2rem 0;
    height: auto;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #000000;

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;

.footer h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: bold;

.links li {
    list-style: none;
    line-height: 30px;
    text-align: center;
    font-weight: 100;

.links li a {
    text-decoration: none;
    color: #fff;

.registration {
    display: flex;
    flex-direction: column;

.registration input {
    padding: 10px;
    font-weight: 100;
    border: none;
    outline: none;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    margin: 1rem 0;

button {
    border: none;
    padding: 12px 0;
    border-radius: 30px;
    cursor: pointer;

.address {
    text-align: center;
    margin-bottom: 10px;

.social {
    display: flex;
    list-style: none;

.social li {
    margin: 0 8px;
    cursor: pointer;
    font-size: 18px;

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section