Website Footer Layout 2

HTML

    <div class="dummy-div"></div>
    <footer class="web-footer_2">
        <div class="web-footer_wrap">
            <div class="web-footer_innerwrap">

                <!-- Insert Logo Here -->
                <div class="footer-logo-wrap">
                    <a href="" class="web-footer_logo">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2024/01/web-logo.png" alt="" class="web-logo_main">
                    </a>
                </div>
                <!-- Logo wrap ends here -->

                <!-- All Social media icons to be added here -->
                <div class="web-footer_icon_links">
                    <!-- Instagram Icon -->
                    <a href="#" class="footer-btn-style-1">
                        <i class="fa-brands fa-instagram"></i>
                    </a>

                    <!-- Twitter Icon -->
                    <a href="#" class="footer-btn-style-1">
                        <i class="fa-brands fa-x-twitter"></i>
                    </a>

                    <!-- LinkedIn Icon -->
                    <a href="#" class="footer-btn-style-1">
                        <i class="fa-brands fa-linkedin-in"></i>
                    </a>

                    <!-- Mail Icon -->
                    <a href="#" class="footer-btn-style-1">
                        <i class="fa-regular fa-envelope"></i>
                    </a>
                </div>
                <!-- All Social Media icons ends here -->
                
                <!-- Subscription Wrap starts here -->
                <div class="footer-subscription_wrap">
                    <h3 class="web-footer-header">
                        Be the first to catch our latest projects
                    </h3>
                    <!-- Subscription form -->
                    <form action="">
                        <input type="email" id="email" name="email" class="textbox" value="" placeholder="ENTER YOUR EMAIL">
                        <button class="footer-btn-style-2" type="submit" value="submit">
                            <i class="fa-solid fa-circle-chevron-right sbt-icon-size"></i>
                        </button>
                    </form>
                </div>
                <!-- Subscription Wrap ends here -->

                <!-- Footer menu wrap starts Here -->
                <div class="web-footer_wrap_nav">
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            Company
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    About Us
                                </a>
                            </li>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    Products
                                </a>
                            </li>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    Gallery
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            Get Help
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    Contact Us
                                </a>
                            </li>
                            <li>
                                <a href="" class="footer-btn-style-3"> 
                                    FAQ
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            Quick Links
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    T & C
                                </a>
                            </li>
                            <li>
                                <a href="" class="footer-btn-style-3">
                                    Privacy Policy
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                           Address
                        </h4>
                        <ul>
                            <li>
                                Noir Avenue,
                                Rajodi, Boisar, 
                                401 210, Palghar
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Footer menu wrap ends Here -->

                <div class="rights-div">
                    <p class="footer-rights">
                        Copyright 2023.<br> Designed and developed by <span><a href="" class="footer-btn-style-3">NUIT Solutions</a></span>.
                    </p>
                </div>
            </div>
        </div>
    </footer>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.web-footer_2{
    position: relative;

    a{
        text-decoration: none;
        color: #3D3A2C;
    }
    li{
        color: #3D3A2C;
        font-family: 'Biryani';
        font-size: 14px;
        font-weight: 400;
        line-height: 2.4;
    }
    ul{
        margin: 0;
    } 
    .web-footer-header{
        color: #3D3A2C;
        font-family: 'Biryani';
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 20px 0;
    }   
    .footer_list_title{
        color: #DDB27B;
        font-family: 'Biryani';
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin:0;
    }
    .footer-rights{
        color: #000;
        font-family: 'Biryani';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .footer-btn-style-1 {
        border: 1px solid #3D3A2C;
        margin-inline: 25px;
        border-radius: 50%;
        width: 33px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
    }
    .footer-btn-style-1:hover{
        background: #FFD47D;
    }
    .footer-btn-style-3{
        transition: 0.4s;
        border-bottom: 3px solid transparent;
    }
    .footer-btn-style-3:hover{
        border-bottom: 3px solid #FFD47D;
    }
    .web-footer_wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFF0E2;
        padding: 50px 0 20px;
    }
    .footer-logo-wrap {
        text-align: center;
    }
    .web-footer_wrap_nav, .web-footer_icon_links {
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }
    .web-footer_wrap_nav{
        border-bottom: 1px solid #3D3A2C;
        padding-bottom: 30px;
    }
    .footer-subscription_wrap{
        text-align: center;
        margin-bottom: 30px;
    }
    .web-footer_list {
        max-width: 210px;
        padding-inline: 40px;
    }
    .footer-rights{
        text-align: center;
    }
    .web-footer_wrap_nav ul{
        padding: 0;
        list-style-type: none;
    }
    input#email, button.footer-btn-style-2 {
        background: transparent;
        outline: transparent;
        border: 1px solid transparent;      
        margin:0;
    }
        .sbt-icon-size{
        font-size: 16px;
        color: #3D3A2C;
        transition: 0.4s;
    }
    button.footer-btn-style-2:hover{   
        .sbt-icon-size {
        color: #FFD47D;
        }
    }
    input#email::placeholder {
    color: #3e3e3e;
}
    form {
        border-bottom: 1px solid;
        width: max-content;
        margin: auto;
        display: flex;
    }
  
    .footer-rights br{
        display: none;
    }
    .web-footer_innerwrap{
        z-index: 1;
    }
    
}
.web-footer_2::before {
    content: '';
    position: absolute;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2024/01/face-01-1-252x300.png);
    background-repeat: no-repeat;
    width: 360px;
    height: 360px;
    bottom: 0px;
    left: 0;
}
.web-footer_2::after {
    content: '';
    position: absolute;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2024/01/face-2-01-1.png);
    background-repeat: no-repeat;
    width: 360px;
    height: 360px;
    top: 0px;
    right: 0;
}
.dummy-div{
    height: 30vh;
    width: 100vw;
}
@media(max-width:769px){
    .web-footer_2{
        .web-footer_wrap{
            padding: 50px 10px 20px;
        }
        .web-footer-header{
            font-size: 22px;
        }
        .web-footer_wrap_nav{
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .footer-rights br{
            display: block;
        }
        .footer-subscription_wrap {
            padding-inline: 20px;
        }
        .footer_list_title{
            font-size: 18px;    
        }
        li{
            font-size: 14px;   
        }
        .footer-rights{
            font-size: 14px;
        }
        .footer-btn-style-1{
            margin-inline: 15px;
        }
        .web-footer_list{
            padding-inline: 10px;
        }
    }
    .web-footer_2::before, .web-footer_2::after{
        transform: scale(0.5);
        opacity: 0.5;
    }
}
@media(max-width:400px){
        .web-footer_2::before{
            left: -90px;
        }
        .web-footer_2::after{
            top: 90px;
            right: -90px;
        }
}


.web-footer_2{
button.footer-btn-style-2:after{
background: transparent;
}
}

Links

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Biryani:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">