Footer layout 03

HTML

 <section class="section-for-height"></section>
    <footer class="footer">
        <div class="follow-us-icon-wrap">
            <h4>Follow Us on</h4>
            <div class="icons">
                <a href="#" class=""><span><i class="fa-brands fa-linkedin-in"></i></span></a>
                <a href="#" class=""><span><i class="fa-brands fa-instagram"></i></span></a>
                <a href="#" class=""><span><i class="fa-brands fa-x-twitter"></i></span></a>
            </div>
        </div>
        <hr>
        <div class="footer-links">
            <div class="logo-contacts">
                <div class="logo-wrap">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2024/02/Logo.png" alt="">
                </div>
                <div class="contact-wrap">
                    <h4>Contact Us on</h4>  
                    <div class="num-email-wrap">
                        <p><a href="tel:+00 12345 67890">+00 12345 67890</a></p>
                        <p><a href="mailto:somebody@example.com" target="_blank">somebody@example.com</a></p>
                    </div>
                    <hr>
                    <p class="address">
                        <a href="#">
                            301b<br>
                            Level 20, Dadar, Mumbai,<br>
                            400 001, India
                        </a>
                    </p>
                    <hr>
                </div>
            </div>
            <div class="usefull-quick-links">
                <div class="usefull-links">
                    <h4>Usefull Links</h4>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">About Us</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Track Order</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Services</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Careers</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Contact Us</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="quick-links">
                    <h4>Quick links</h4>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Get Help</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">FAQ</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Terms of Use</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="link-dash"></span>
                                <span class="link-text">Privacy Policy</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        <div class="dev-by">
            <div>
                <p>Developed by <a href="#">NUIT Solutions</a></p>
            </div>
            <div>
                <p>All Rights Reserved</p>
            </div>
            <div>
                <p><a href="#">Privacy Policy</a></p>
            </div>
        </div>
    </footer>

CSS

.section-for-height{
    height: 30vh;
    background-color:#eeeeee61;
}
.footer{
    --fonts-nunito: "Nunito", sans-serif;
    background-color: #FEE2CE;
    padding-inline: 15px;
    padding-block: 10px 30px;
}
.follow-us-icon-wrap h4{
    font-family: var(--fonts-nunito);
    font-size: 18px;
    font-weight: 600;
    color: #74350A;
    text-align: center;
}
.follow-us-icon-wrap .icons{
    display: flex;
    gap: 20px;
    justify-content: center;
}
.follow-us-icon-wrap .icons a{
    display: inline-block;
    color: #74350A;
    text-decoration: none;
}

.follow-us-icon-wrap .icons span{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 1.5px solid #74350A;
    transition: 0.2s linear;
}
.follow-us-icon-wrap .icons a:hover span{
    background-color: #EC965B;
}
.footer hr{
    margin-block: 10px;
    width: 80%;
    height: 2px;
    background: #74350A;
    border: none;
}
.footer-links{
    display: grid;
    grid-template-columns: 60% 40%;
}
.footer-links .logo-contacts{
    display: grid;
    grid-template-columns: 50% 50%;
}
.logo-contacts .logo-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-wrap{
    text-align: center;
}
.contact-wrap h4{
    font-family: var(--fonts-nunito);
    font-size: 18px;
    font-weight: 700;
    color: #74350A;
}
.num-email-wrap{
    margin-bottom: 30px;
}
.num-email-wrap p{
    margin-block: 10px;
}
.num-email-wrap p a{
    color: #74350A;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--fonts-nunito);
    text-decoration: none;
}
.contact-wrap hr{
    width: 80%;
    height: 2px;
    border: 2px solid #74350A;
    background-color: transparent;
    border-radius: 10px;
}
.contact-wrap .address a{
    color: #74350A;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
}
.usefull-quick-links{
    display: grid;
    grid-template-columns: 50% 50%;
}
.usefull-quick-links h4{
    font-family: var(--fonts-nunito);
    font-weight: 700;
    font-size: 18px;
    color: #74350A;
    padding-left: 18px;
}
.usefull-quick-links .usefull-links,
.usefull-quick-links .quick-links{
    text-align: center;
}
.usefull-quick-links ul{
    display: grid;
    row-gap: 20px;
    list-style: none;
    padding: 0;
}
.usefull-quick-links ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.usefull-quick-links ul li a .link-dash{
    position: relative;
    width: 34px;
    height: 5px;
    border-radius: 10px;
    border: 2px solid #74350A;
    display: inline-block;
    overflow: hidden;
}
.usefull-quick-links ul li a .link-dash::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: -100%;
    background-color:#EC965B;
    /* background-color: #74350A; */
    transition: 0.2s linear;
}
.usefull-quick-links ul li a:hover .link-dash::after{
    left: 0;
}
.usefull-quick-links ul li a .link-text{
    font-size: 18px;
    font-family: var(--fonts-nunito);
    color: #74350A;
    font-weight: 400;
    width: 100px;
    text-align: left;
}
.usefull-quick-links .quick-links ul li a .link-text{
    width: 115px;
} 

.dev-by{
    display: grid;
    grid-template-columns: 40% 20% 40% ;
}

.dev-by p{
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    font-family: var(--fonts-nunito);
    color: #74350A;
}
.dev-by p a{
    color: inherit;
    text-decoration: none;
}
.dev-by div:nth-child(1) p {
    border-right: 1px solid #74350A;
    text-align: right;
    padding-right: 10px;
   
}
.dev-by div:nth-child(3) p {
    border-left: 1px solid #74350A;
    text-align: left;
    padding-left: 10px;
}


@media only screen and (max-width:1080px){
    .footer-links{
        grid-template-columns: 100%;
    }
    .footer-links .logo-contacts{
        grid-template-columns: 100%;
    }
    .dev-by{
            grid-template-columns: 33.3% 33.3% 33.3%;
    }
    .dev-by p{
        font-size: 15px;
    }
}

Links

    <!-- fontsawosome  -->
    <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" />

    <!-- google fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
        rel="stylesheet">