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.

Preview

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


HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
    <section class="main-section">
        <h2> Upper Content Goes Here </h2>
    </section>
    <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>
            </ul>
        </div>
        <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>
            </form>
        </div>
        <div class="box">
            <h2> Contact </h2>
            <p class="address"> 123, xyz Road, ABC 20 <br>
                Hisar, Haryana, India
            </p>
            <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>
            </ul>
        </div>
    </footer>

</body>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    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

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

Top Post Ad

Below Post Ad