Website Footer Layout 4

HTML

<footer class="web-footer_4">
        <div class="web-footer-bg-shapes">
            <div class="web-bg-shape-1"></div>
            <div class="web-bg-shape-2"></div>
            <div class="web-bg-shape-3"></div>
        </div>
        <div class="web-footer_wrap">
            <div class="web-footer_innerwrap">
                <div class="web-footer-connect-wrap">
                    <!-- Insert Your Logo Here -->
                    <div class="web-footer-logo">
                        <a href="" class="footer-logo-main">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2024/01/ipsum-global.png" class="btn-style-1" alt="logo">
                        </a>
                        <p class="web-desc-mini">
                            Sorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>

                    <!-- Insert Your social media icons and links here -->
                    <div class="web-footer-icons">
                        <a href="" class="btn-style-2">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="" class="btn-style-2">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="" class="btn-style-2">
                            <i class="fa-brands fa-x-twitter"></i>
                        </a>
                        <a href="" class="btn-style-2">
                            <i class="fa-brands fa-linkedin-in"></i>
                        </a>
                        <a href="" class="btn-style-2">
                            <i class="fa-brands fa-pinterest-p"></i>
                        </a>
                    </div>
                </div> 
                <div class="web-footer_wrap_nav">
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            About
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="btn-style-3">
                                    Why Ipsum?
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Ipsum Careers
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Gallery
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Carbon Footprint
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Security
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Gallery
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Blog
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Partners
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Forum
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            Products
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="btn-style-3">
                                    Sales Platform
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3"> 
                                    Digital Marketing
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    SEO
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3"> 
                                    SMO
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Web Design
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3"> 
                                    Web Development
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <h4 class="footer_list_title">
                            Support
                        </h4>
                        <ul>
                            <li>
                                <a href="" class="btn-style-3">
                                    Help Center
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Contact
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    API
                                </a>
                            </li>
                            <li>
                                <a href="" class="btn-style-3">
                                    Platform Status
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="web-footer_list">
                        <ul>
                            <li class="contact-details">
                                <i class="fa-solid fa-location-dot footer-icon"></i>
                                <p class="contact-desc">
                                    EnvatoLevel 13, 2 Elizabeth, Victoria 3000, Australia
                                </p>
                            </li>
                            <li class="contact-details">
                                <i class="fa-solid fa-phone footer-icon"></i>
                                <div class="contact_numbers_div">
                                    <a href="tel:+00 12345 67890" class="btn-style-3">+00 12345 67890</a>
                                    <a href="tel:+00 67890 12345" class="btn-style-3">+00 67890 12345</a>
                                </div>
                            </li>
                            <li class="contact-details">
                                <i class="fa-regular fa-envelope footer-icon"></i>
                                <div class="contact_numbers_div">
                                    <a href="mailto:somebody@example.com" class="btn-style-3">somebody@example.com</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="rights-div">
                    <p class="footer-rights">
                        Copyright 2023.<br> Designed and developed by <span><a href="" class="btn-style-3">NUIT Solutions</a></span>.
                    </p>
                </div>
            </div>
        </div>
    </footer>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.dummy-div{
    height: 30vh;
}
.web-footer_4{
    position: relative;
    font-family: 'Open Sans';
    background: #5C5C5C;
    color: #FFCD4D;
    overflow-x: clip;

    .web-footer_wrap {
        padding: 50px 120px 30px;
        background: #5C5C5C;
        position: relative;
    }
    p{
        margin: 0;
    }

    a{
        text-decoration: none;
        color: #FFCD4D;
    }

    li{
        list-style-type: none;
        line-height: 2.4;
    }
    ul{
        margin: 0;
        padding: 0;
    }  
    .web-desc-mini {
        color: #FFCD4D;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        max-width: 200px;
    }
    .web-footer-connect-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 35px;
        border-bottom: 1px solid #FFCD4D;
    }
    a.btn-style-2 {
        padding-inline: 5px;
        font-size: 24px;
        transition: 0.4s;
    }
    a.btn-style-2:hover{
        color: #fbe3a6;
    }
    a.btn-style-3{
        font-size: 16px;
        font-weight: 400;
        transition: 0.4s;
    }
    a.btn-style-3:hover{
        color: #fbe3a6;
    }
    .footer_list_title{
        color: #FFCD4D;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
    }
    .web-footer_wrap_nav {
        display: flex;
        justify-content: space-between;
        padding-block: 25px;
    }
    li.contact-details {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
    }
    .contact_numbers_div{
        display: grid;
    }
    .contact-desc {
        max-width: 300px;
    }
    .footer-icon{
        padding-right: 20px;
    }
    .footer-rights{
        text-align: center;

        br{
            display: none;
        }
    }
    .web-footer-bg-shapes{
        position: absolute;
        width: 100vw;
        right: 0px;
        top: 0px;
    }
    .web-bg-shape-3 {
        background: #5C5C5C;
        width: 120vw;
        height: 30vh;
        transform: rotate(355deg) translate(-5%, -168%) skewX(-5deg);
    }
    .web-bg-shape-2 {
        background: #AEADAD;
        width: 80vw;
        height: 20vh;
        transform: rotate(3deg) translate(-20%, -140%);
    }
    .web-bg-shape-1 {
        background: #9C9494;
        width: 60vw;
        height: 20vh;
        transform: rotate(10deg) translate(-40%, -40%);
    }
}

@media (max-width:769px){
    .web-footer_4{
        .web-footer_wrap_nav {
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .web-footer_list {
            margin-bottom: 20px;
        }
        .web-footer_list:nth-child(2){
            padding-left: 30px;
        }
    }
}
@media (max-width:600px){
    .web-footer_4{
        .web-footer_wrap{
            padding: 0;
        }
        .web-footer_wrap_nav{
            grid-template-columns: 40% 60%;
        }
        a.btn-style-3{
            font-size: 12px;
        }
        .footer_list_title{
            font-size: 16px;
        }
        a.btn-style-2{
            font-size: 18px;
            padding-inline: 10px;
        }
        .web-footer_innerwrap {
            padding: 15px;
        }
        li{
            line-height: 1.6;
        }
        .web-footer_list:nth-child(2){
            padding-left: 20px;
        }
        .footer-icon {
            padding-right: 10px;
        }
        .contact-desc{
            font-size: 12px;
        }
        .footer-rights {
            font-size: 12px;
            br{
                display: block;
            }
        }
        .web-footer-connect-wrap{
            display: grid;
            justify-content: center;
            text-align: center;
            padding-bottom: 15px;
        }
        .web-footer-logo {
            padding-bottom: 30px;
        }
        .web-bg-shape-3 {
            transform: rotate(348deg) translate(15%, -155%) skewX(-5deg);
        }
        .web-bg-shape-1 {
            width: 100vw;
            transform: rotate(20deg) translate(-20%, -10%);
        }
        .web-bg-shape-2 {
            width: 100vw;
            transform: rotate(6deg) translate(-10%, -130%);
        }
    }   
}

Links

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&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" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Scripts

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"