Footer

Footer dark

Preview

HTML

<footer>

    <!-- Seção Content -->

    <div class="content__footer">
        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Increazy</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">About</a></li>
                <li><a class="content__footer-section__item" href="#">Careers</a></li>
                <li><a class="content__footer-section__item" href="#">Contact Us</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">FAQ</h2>
            <ul>
                <li><a class="content__footer-section__item" href="#">How to Buy</a></li>
                <li><a class="content__footer-section__item" href="#">Security & Frauds</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Follow Us</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">LinkedIn</a></li>
                <li><a class="content__footer-section__item" href="#">Facebook</a></li>
                <li><a class="content__footer-section__item" href="#">Instagram</a></li>
                <li><a class="content__footer-section__item" href="#">Twitter</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Payment Method</h2>
            <div class="payment-icons">
                <svg width="48" height="34" viewBox="0 0 48 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect y="0.0587158" width="48" height="33.8824" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7593C22.5811 25.1683 20.4127 26.0188 18.0433 26.0188C12.7564 26.0188 8.47058 21.784 8.47058 16.56C8.47058 11.3361 12.7564 7.1012 18.0433 7.1012C20.4127 7.1012 22.5811 7.95179 24.2527 9.3608C25.9243 7.9518 28.0926 7.10122 30.462 7.10122C35.7489 7.10122 40.0348 11.3361 40.0348 16.56C40.0348 21.784 35.7489 26.0189 30.462 26.0189C28.0926 26.0189 25.9243 25.1683 24.2527 23.7593Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7593C26.3109 22.0244 27.6161 19.4428 27.6161 16.56C27.6161 13.6773 26.3109 11.0957 24.2527 9.36076C25.9243 7.95177 28.0926 7.1012 30.462 7.1012C35.7489 7.1012 40.0347 11.3361 40.0347 16.56C40.0347 21.784 35.7489 26.0188 30.462 26.0188C28.0926 26.0188 25.9243 25.1683 24.2527 23.7593Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7592C26.311 22.0243 27.6161 19.4428 27.6161 16.56C27.6161 13.6773 26.311 11.0958 24.2527 9.36084C22.1945 11.0958 20.8894 13.6773 20.8894 16.56C20.8894 19.4428 22.1945 22.0243 24.2527 23.7592Z" fill="black"/>
                </svg>
                
                <svg width="50" height="34" viewBox="0 0 50 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.916656" width="48.1667" height="34" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4378 27.3417H27.1156C32.8565 27.3417 37.4313 22.7871 37.6107 17.1608V17.0715C37.521 11.3559 32.8565 6.71201 27.1156 6.80132H22.9893C17.5174 6.97993 13.2117 11.6238 13.3911 17.1608C13.3911 22.6978 17.8762 27.2524 23.4378 27.3417ZM15.1852 17.0716C15.1852 12.4277 19.0424 8.5875 23.7069 8.5875C28.3714 8.5875 32.2286 12.4277 32.2286 17.0716C32.2286 21.7155 28.3714 25.5557 23.7069 25.5557C19.0424 25.5557 15.1852 21.7155 15.1852 17.0716ZM25.0524 22.7871V11.4452C28.192 12.249 30.1654 15.3747 29.3581 18.5004C28.8199 20.6438 27.2053 22.2513 25.0524 22.7871ZM18.1453 15.6426C17.338 18.7683 19.2218 21.9833 22.3614 22.7871V11.4452C20.2982 11.9811 18.6836 13.5886 18.1453 15.6426Z" fill="#434343"/>
                </svg>
                
                <svg width="49" height="34" viewBox="0 0 49 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.0833435" width="48.1667" height="34" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3962 22.4659H12.4782L10.2901 13.8726C10.1863 13.4773 9.96574 13.1278 9.64136 12.9631C8.83184 12.5492 7.9398 12.2198 6.96667 12.0536V11.7228H11.6673C12.316 11.7228 12.8026 12.2198 12.8837 12.797L14.019 18.9956L16.9356 11.7228H19.7724L15.3962 22.4659ZM21.3943 22.4659H18.6386L20.9078 11.7228H23.6636L21.3943 22.4659ZM27.2288 14.6989C27.3099 14.1203 27.7965 13.7894 28.3642 13.7894C29.2562 13.7064 30.2279 13.8725 31.0388 14.285L31.5254 11.972C30.7145 11.6411 29.8224 11.475 29.0129 11.475C26.3382 11.475 24.392 12.9631 24.392 15.0283C24.392 16.5995 25.7706 17.4244 26.7437 17.9214C27.7965 18.4169 28.202 18.7478 28.1209 19.2433C28.1209 19.9867 27.3099 20.3175 26.5004 20.3175C25.5273 20.3175 24.5542 20.0697 23.6635 19.6558L23.177 21.9703C24.1501 22.3828 25.2029 22.5489 26.176 22.5489C29.1751 22.6305 31.0388 21.1439 31.0388 18.9125C31.0388 16.1025 27.2288 15.9378 27.2288 14.6989ZM40.6834 22.4659L38.4952 11.7228H36.1449C35.6584 11.7228 35.1718 12.0536 35.0096 12.5492L30.9577 22.4659H33.7946L34.3609 20.8962H37.8465L38.1709 22.4659H40.6834ZM36.5504 14.6158L37.3599 18.6647H35.0907L36.5504 14.6158Z" fill="#434343"/>
                </svg>
                
                <svg width="48" height="34" viewBox="0 0 48 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.833374" y="0.411743" width="47" height="33.1765" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5354 25.502L20.8405 23.4989L20.1608 23.4825H16.9151L19.1707 8.7001C19.1778 8.65534 19.2005 8.61379 19.2337 8.58423C19.267 8.55467 19.3095 8.53845 19.3539 8.53845H24.8266C26.6436 8.53845 27.8974 8.92916 28.552 9.70043C28.8589 10.0622 29.0544 10.4404 29.149 10.8565C29.2482 11.2931 29.2498 11.8148 29.1531 12.4511L29.146 12.4973V12.9051L29.453 13.0848C29.7113 13.2266 29.9168 13.3887 30.0743 13.5744C30.3368 13.8838 30.5066 14.277 30.5783 14.7431C30.6525 15.2225 30.628 15.7931 30.5066 16.439C30.3665 17.1819 30.1402 17.829 29.8344 18.3584C29.5533 18.8462 29.1951 19.2509 28.7697 19.5645C28.3635 19.8624 27.8811 20.0886 27.3356 20.2334C26.8069 20.3756 26.2042 20.4474 25.5431 20.4474H25.1172C24.8127 20.4474 24.5169 20.5607 24.2847 20.7639C24.0518 20.9714 23.8979 21.2548 23.8506 21.5648L23.8185 21.7452L23.2793 25.276L23.255 25.4056C23.2484 25.4466 23.2373 25.4671 23.221 25.4809C23.2064 25.4936 23.1855 25.502 23.1651 25.502H20.5354Z" fill="black"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7438 12.5443C29.7276 12.6522 29.7088 12.7626 29.6879 12.8759C28.9662 16.7059 26.497 18.029 23.3435 18.029H21.7378C21.3521 18.029 21.0271 18.3184 20.9671 18.7116L19.9122 25.6279C19.8731 25.8862 20.0656 26.1187 20.3176 26.1187H23.1655C23.5027 26.1187 23.7892 25.8655 23.8423 25.5218L23.8702 25.3723L24.4064 21.8553L24.4409 21.6624C24.4934 21.3175 24.7805 21.0641 25.1177 21.0641H25.5436C28.3027 21.0641 30.4627 19.9064 31.0941 16.5557C31.3577 15.1561 31.2212 13.9874 30.5234 13.1654C30.3122 12.9176 30.0502 12.7119 29.7438 12.5443Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28.9885 12.2332C28.8782 12.1999 28.7645 12.1698 28.6478 12.1426C28.5304 12.1161 28.4103 12.0926 28.2866 12.072C27.8537 11.9997 27.3793 11.9655 26.8712 11.9655H22.5817C22.4759 11.9655 22.3756 11.9901 22.2859 12.0347C22.088 12.133 21.941 12.3266 21.9054 12.5636L20.9928 18.5375L20.9667 18.7116C21.0267 18.3184 21.3517 18.029 21.7374 18.029H23.3431C26.4966 18.029 28.9658 16.7052 29.6875 12.8759C29.7091 12.7626 29.7272 12.6523 29.7434 12.5443C29.5609 12.4442 29.3631 12.3585 29.1502 12.2856C29.0975 12.2675 29.0433 12.2501 28.9885 12.2332Z" fill="black"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.9056 12.5637C21.9412 12.3267 22.0882 12.1332 22.2861 12.0355C22.3764 11.9908 22.4761 11.9661 22.5819 11.9661H26.8714C27.3795 11.9661 27.8539 12.0006 28.2868 12.0729C28.4105 12.0933 28.5306 12.1169 28.648 12.1435C28.7647 12.1705 28.8784 12.2007 28.9887 12.2338C29.0435 12.2507 29.0977 12.2683 29.1509 12.2857C29.3638 12.3587 29.5617 12.445 29.7443 12.5445C29.959 11.1291 29.7425 10.1655 29.0021 9.29284C28.1858 8.33204 26.7127 7.9209 24.8275 7.9209H19.3547C18.9696 7.9209 18.6411 8.21025 18.5817 8.60416L16.3022 23.5385C16.2572 23.834 16.4777 24.1005 16.766 24.1005H20.1447L21.9056 12.5637Z" fill="#434343"/>
                </svg>
            </div>
            </div>
        </article>
    </div>

    <!-- Seção Cards -->

    <div class="cards__footer">
        <span class="cards__footer-border"></span>
        <article class="cards__footer-section">
            <figure>
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
                <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
                </svg>
            </figure>
            <h2 class="cards__footer-section__title">Free shipping</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>

        <article class="cards__footer-section">
            <figure>
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 4.00012H28C28.3536 4.00012 28.6928 4.1406 28.9428 4.39065C29.1929 4.64069 29.3333 4.97983 29.3333 5.33346V26.6668C29.3333 27.0204 29.1929 27.3596 28.9428 27.6096C28.6928 27.8596 28.3536 28.0001 28 28.0001H4C3.64638 28.0001 3.30724 27.8596 3.05719 27.6096C2.80714 27.3596 2.66667 27.0204 2.66667 26.6668V5.33346C2.66667 4.97983 2.80714 4.64069 3.05719 4.39065C3.30724 4.1406 3.64638 4.00012 4 4.00012ZM26.6667 14.6668H5.33333V25.3335H26.6667V14.6668ZM26.6667 12.0001V6.66679H5.33333V12.0001H26.6667ZM18.6667 20.0001H24V22.6668H18.6667V20.0001Z" fill="#2C2C2C"/>
                <path d="M4 4.00012H28C28.3536 4.00012 28.6928 4.1406 28.9428 4.39065C29.1929 4.64069 29.3333 4.97983 29.3333 5.33346V26.6668C29.3333 27.0204 29.1929 27.3596 28.9428 27.6096C28.6928 27.8596 28.3536 28.0001 28 28.0001H4C3.64638 28.0001 3.30724 27.8596 3.05719 27.6096C2.80714 27.3596 2.66667 27.0204 2.66667 26.6668V5.33346C2.66667 4.97983 2.80714 4.64069 3.05719 4.39065C3.30724 4.1406 3.64638 4.00012 4 4.00012ZM26.6667 14.6668H5.33333V25.3335H26.6667V14.6668ZM26.6667 12.0001V6.66679H5.33333V12.0001H26.6667ZM18.6667 20.0001H24V22.6668H18.6667V20.0001Z" fill="black" fill-opacity="0.2"/>
                </svg>
            </figure>
            <h2 class="cards__footer-section__title">Credit Card</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>

        <article class="cards__footer-section">
            <figure>
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 29.3335C8.63599 29.3335 2.66666 23.3641 2.66666 16.0001C2.66666 8.63614 8.63599 2.66681 16 2.66681C23.364 2.66681 29.3333 8.63614 29.3333 16.0001C29.3333 23.3641 23.364 29.3335 16 29.3335ZM16 26.6668C18.829 26.6668 21.5421 25.543 23.5425 23.5426C25.5429 21.5422 26.6667 18.8291 26.6667 16.0001C26.6667 13.1712 25.5429 10.4581 23.5425 8.45767C21.5421 6.45728 18.829 5.33348 16 5.33348C13.171 5.33348 10.4579 6.45728 8.45752 8.45767C6.45713 10.4581 5.33332 13.1712 5.33332 16.0001C5.33332 18.8291 6.45713 21.5422 8.45752 23.5426C10.4579 25.543 13.171 26.6668 16 26.6668ZM14.6667 20.0001H17.3333V22.6668H14.6667V20.0001ZM17.3333 17.8068V18.6668H14.6667V16.6668C14.6667 16.3132 14.8071 15.974 15.0572 15.724C15.3072 15.474 15.6464 15.3335 16 15.3335C16.3788 15.3335 16.7497 15.2259 17.0698 15.0232C17.3898 14.8206 17.6457 14.5313 17.8077 14.1889C17.9697 13.8465 18.0311 13.4652 17.9849 13.0893C17.9387 12.7133 17.7866 12.3583 17.5464 12.0654C17.3063 11.7725 16.9879 11.5538 16.6283 11.4348C16.2687 11.3158 15.8827 11.3013 15.5152 11.3931C15.1477 11.4849 14.8139 11.6791 14.5525 11.9532C14.2911 12.2273 14.1129 12.5701 14.0387 12.9415L11.4227 12.4175C11.5848 11.6069 11.9593 10.854 12.5079 10.2356C13.0564 9.61721 13.7593 9.15558 14.5448 8.8979C15.3302 8.64022 16.17 8.59572 16.9782 8.76896C17.7865 8.9422 18.5343 9.32696 19.1451 9.88391C19.7559 10.4409 20.2079 11.15 20.4548 11.9389C20.7017 12.7278 20.7347 13.5681 20.5505 14.3739C20.3662 15.1797 19.9713 15.9221 19.406 16.5253C18.8408 17.1284 18.1255 17.5707 17.3333 17.8068Z" fill="#2C2C2C"/>
                <path d="M16 29.3335C8.63599 29.3335 2.66666 23.3641 2.66666 16.0001C2.66666 8.63614 8.63599 2.66681 16 2.66681C23.364 2.66681 29.3333 8.63614 29.3333 16.0001C29.3333 23.3641 23.364 29.3335 16 29.3335ZM16 26.6668C18.829 26.6668 21.5421 25.543 23.5425 23.5426C25.5429 21.5422 26.6667 18.8291 26.6667 16.0001C26.6667 13.1712 25.5429 10.4581 23.5425 8.45767C21.5421 6.45728 18.829 5.33348 16 5.33348C13.171 5.33348 10.4579 6.45728 8.45752 8.45767C6.45713 10.4581 5.33332 13.1712 5.33332 16.0001C5.33332 18.8291 6.45713 21.5422 8.45752 23.5426C10.4579 25.543 13.171 26.6668 16 26.6668ZM14.6667 20.0001H17.3333V22.6668H14.6667V20.0001ZM17.3333 17.8068V18.6668H14.6667V16.6668C14.6667 16.3132 14.8071 15.974 15.0572 15.724C15.3072 15.474 15.6464 15.3335 16 15.3335C16.3788 15.3335 16.7497 15.2259 17.0698 15.0232C17.3898 14.8206 17.6457 14.5313 17.8077 14.1889C17.9697 13.8465 18.0311 13.4652 17.9849 13.0893C17.9387 12.7133 17.7866 12.3583 17.5464 12.0654C17.3063 11.7725 16.9879 11.5538 16.6283 11.4348C16.2687 11.3158 15.8827 11.3013 15.5152 11.3931C15.1477 11.4849 14.8139 11.6791 14.5525 11.9532C14.2911 12.2273 14.1129 12.5701 14.0387 12.9415L11.4227 12.4175C11.5848 11.6069 11.9593 10.854 12.5079 10.2356C13.0564 9.61721 13.7593 9.15558 14.5448 8.8979C15.3302 8.64022 16.17 8.59572 16.9782 8.76896C17.7865 8.9422 18.5343 9.32696 19.1451 9.88391C19.7559 10.4409 20.2079 11.15 20.4548 11.9389C20.7017 12.7278 20.7347 13.5681 20.5505 14.3739C20.3662 15.1797 19.9713 15.9221 19.406 16.5253C18.8408 17.1284 18.1255 17.5707 17.3333 17.8068Z" fill="black" fill-opacity="0.2"/>
            </svg>
            </figure>
            <h2 class="cards__footer-section__title">Help Center</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>
    </div>

    <!-- Seção End -->

    <div class="end__footer">
        <span class="end__footer-border"></span>
        <a href="#">Privacy Police</a>
        <small>©<span class="current-date"></span> Increazy All Rights Reserved</small>
    </div>

    <script>
        /*
        *  mostra o ano atual
        */
        function dateUpdate () {
        const copyright = document.querySelector('.current-date') 
        const currentDate = new Date().getFullYear() 
        copyright.innerHTML = currentDate 
        }
        dateUpdate ()
    </script>

</footer>

CSS

/*
*  CSS DA SEÇÃO CONTENT
*/

.content__footer{
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
}

.content__footer-section{
  width: 25%;
  height: auto;
  border-right: 1px solid #1F1F1F;
}

.content__footer-section:last-of-type{
  border-right: none;
}

.section-wrapper{
  width: fit-content;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

.content__footer-section__title{
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #fff;
}

.content__footer-section__item{
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
}

.content__footer-section__item:hover{
  color: #fff;
}

.payment-icons{
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding-left: 12px;
}

@media (max-width: 1024px){
  .content__footer{
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }

  .content__footer-section{
    padding: 24px;
    width: 50%;
  }

  .content__footer-section:nth-of-type(2) {
    border-right: none;
  }

  .section-wrapper{
    margin: 0;
  }
}

@media (max-width: 768px) {
  .content__footer-section {
    padding: 24px;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #1F1F1F;
    padding-left: 0px;
  }

  .content__footer-section:last-of-type{
    border-bottom: none;
  }
}


/*
*  CSS DA SEÇÃO CARDS
*/

.cards__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
}

.cards__footer-border{
  height: 1px;
  width: calc(100% - 80px);
  background-color: #1F1F1F;
  position: absolute;
  top: 0;
  left: 40px;
}

.cards__footer-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 160px;
}

.cards__footer-section figure{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px!important;
}

.cards__footer-section__title{
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #fff;
  margin: 0px auto 4px auto;
}

.cards__footer-section__description{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: center;
  color: #8E8E8E;
}

@media (max-width: 1024px){
  .cards__footer{
    padding: 32px 20px 24px 20px;
  }

  .cards__footer-border {
    width: calc(100% - 40px);
    left: 20px;
  }
}

@media (max-width: 768px) {
  .cards__footer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
  }
}


/*
*  CSS DA SEÇÃO END
*/

.end__footer{
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
}

.end__footer-border{
  height: 1px;
  width: calc(100% - 80px);
  background-color: #1F1F1F;
  position: absolute;
  top: 0;
  left: 40px;
}

.end__footer a,
.end__footer small{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #8E8E8E;
}

.end__footer a:hover{
  color: #fff;
}

@media (max-width: 1024px){
  .end__footer {
    padding: 32px 20px 24px 20px;
  }

  .end__footer-border {
    width: calc(100% - 40px);
    left: 20px;
  }
}

@media (max-width: 768px) {
  .end__footer a,
  .end__footer small{
    font-size: 12px;
    line-height: 16.8px;
  }
}

Footer light

Preview

HTML

<footer>

    <!-- Seção Content -->

    <div class="content__footer">
        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Increazy</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">About</a></li>
                <li><a class="content__footer-section__item" href="#">Careers</a></li>
                <li><a class="content__footer-section__item" href="#">Contact Us</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">FAQ</h2>
            <ul>
                <li><a class="content__footer-section__item" href="#">How to Buy</a></li>
                <li><a class="content__footer-section__item" href="#">Security & Frauds</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Follow Us</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">LinkedIn</a></li>
                <li><a class="content__footer-section__item" href="#">Facebook</a></li>
                <li><a class="content__footer-section__item" href="#">Instagram</a></li>
                <li><a class="content__footer-section__item" href="#">Twitter</a></li>
            </ul>
            </div>
        </article>

        <article class="content__footer-section">
            <div class="section-wrapper">
            <h2 class="content__footer-section__title">Payment Method</h2>
            <div class="payment-icons">
                <svg width="48" height="34" viewBox="0 0 48 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect y="0.0587158" width="48" height="33.8824" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7593C22.5811 25.1683 20.4127 26.0188 18.0433 26.0188C12.7564 26.0188 8.47058 21.784 8.47058 16.56C8.47058 11.3361 12.7564 7.1012 18.0433 7.1012C20.4127 7.1012 22.5811 7.95179 24.2527 9.3608C25.9243 7.9518 28.0926 7.10122 30.462 7.10122C35.7489 7.10122 40.0348 11.3361 40.0348 16.56C40.0348 21.784 35.7489 26.0189 30.462 26.0189C28.0926 26.0189 25.9243 25.1683 24.2527 23.7593Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7593C26.3109 22.0244 27.6161 19.4428 27.6161 16.56C27.6161 13.6773 26.3109 11.0957 24.2527 9.36076C25.9243 7.95177 28.0926 7.1012 30.462 7.1012C35.7489 7.1012 40.0347 11.3361 40.0347 16.56C40.0347 21.784 35.7489 26.0188 30.462 26.0188C28.0926 26.0188 25.9243 25.1683 24.2527 23.7593Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2527 23.7592C26.311 22.0243 27.6161 19.4428 27.6161 16.56C27.6161 13.6773 26.311 11.0958 24.2527 9.36084C22.1945 11.0958 20.8894 13.6773 20.8894 16.56C20.8894 19.4428 22.1945 22.0243 24.2527 23.7592Z" fill="black"/>
                </svg>
                
                <svg width="50" height="34" viewBox="0 0 50 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.916656" width="48.1667" height="34" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4378 27.3417H27.1156C32.8565 27.3417 37.4313 22.7871 37.6107 17.1608V17.0715C37.521 11.3559 32.8565 6.71201 27.1156 6.80132H22.9893C17.5174 6.97993 13.2117 11.6238 13.3911 17.1608C13.3911 22.6978 17.8762 27.2524 23.4378 27.3417ZM15.1852 17.0716C15.1852 12.4277 19.0424 8.5875 23.7069 8.5875C28.3714 8.5875 32.2286 12.4277 32.2286 17.0716C32.2286 21.7155 28.3714 25.5557 23.7069 25.5557C19.0424 25.5557 15.1852 21.7155 15.1852 17.0716ZM25.0524 22.7871V11.4452C28.192 12.249 30.1654 15.3747 29.3581 18.5004C28.8199 20.6438 27.2053 22.2513 25.0524 22.7871ZM18.1453 15.6426C17.338 18.7683 19.2218 21.9833 22.3614 22.7871V11.4452C20.2982 11.9811 18.6836 13.5886 18.1453 15.6426Z" fill="#434343"/>
                </svg>
                
                <svg width="49" height="34" viewBox="0 0 49 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.0833435" width="48.1667" height="34" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3962 22.4659H12.4782L10.2901 13.8726C10.1863 13.4773 9.96574 13.1278 9.64136 12.9631C8.83184 12.5492 7.9398 12.2198 6.96667 12.0536V11.7228H11.6673C12.316 11.7228 12.8026 12.2198 12.8837 12.797L14.019 18.9956L16.9356 11.7228H19.7724L15.3962 22.4659ZM21.3943 22.4659H18.6386L20.9078 11.7228H23.6636L21.3943 22.4659ZM27.2288 14.6989C27.3099 14.1203 27.7965 13.7894 28.3642 13.7894C29.2562 13.7064 30.2279 13.8725 31.0388 14.285L31.5254 11.972C30.7145 11.6411 29.8224 11.475 29.0129 11.475C26.3382 11.475 24.392 12.9631 24.392 15.0283C24.392 16.5995 25.7706 17.4244 26.7437 17.9214C27.7965 18.4169 28.202 18.7478 28.1209 19.2433C28.1209 19.9867 27.3099 20.3175 26.5004 20.3175C25.5273 20.3175 24.5542 20.0697 23.6635 19.6558L23.177 21.9703C24.1501 22.3828 25.2029 22.5489 26.176 22.5489C29.1751 22.6305 31.0388 21.1439 31.0388 18.9125C31.0388 16.1025 27.2288 15.9378 27.2288 14.6989ZM40.6834 22.4659L38.4952 11.7228H36.1449C35.6584 11.7228 35.1718 12.0536 35.0096 12.5492L30.9577 22.4659H33.7946L34.3609 20.8962H37.8465L38.1709 22.4659H40.6834ZM36.5504 14.6158L37.3599 18.6647H35.0907L36.5504 14.6158Z" fill="#434343"/>
                </svg>
                
                <svg width="48" height="34" viewBox="0 0 48 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.833374" y="0.411743" width="47" height="33.1765" rx="4" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5354 25.502L20.8405 23.4989L20.1608 23.4825H16.9151L19.1707 8.7001C19.1778 8.65534 19.2005 8.61379 19.2337 8.58423C19.267 8.55467 19.3095 8.53845 19.3539 8.53845H24.8266C26.6436 8.53845 27.8974 8.92916 28.552 9.70043C28.8589 10.0622 29.0544 10.4404 29.149 10.8565C29.2482 11.2931 29.2498 11.8148 29.1531 12.4511L29.146 12.4973V12.9051L29.453 13.0848C29.7113 13.2266 29.9168 13.3887 30.0743 13.5744C30.3368 13.8838 30.5066 14.277 30.5783 14.7431C30.6525 15.2225 30.628 15.7931 30.5066 16.439C30.3665 17.1819 30.1402 17.829 29.8344 18.3584C29.5533 18.8462 29.1951 19.2509 28.7697 19.5645C28.3635 19.8624 27.8811 20.0886 27.3356 20.2334C26.8069 20.3756 26.2042 20.4474 25.5431 20.4474H25.1172C24.8127 20.4474 24.5169 20.5607 24.2847 20.7639C24.0518 20.9714 23.8979 21.2548 23.8506 21.5648L23.8185 21.7452L23.2793 25.276L23.255 25.4056C23.2484 25.4466 23.2373 25.4671 23.221 25.4809C23.2064 25.4936 23.1855 25.502 23.1651 25.502H20.5354Z" fill="black"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7438 12.5443C29.7276 12.6522 29.7088 12.7626 29.6879 12.8759C28.9662 16.7059 26.497 18.029 23.3435 18.029H21.7378C21.3521 18.029 21.0271 18.3184 20.9671 18.7116L19.9122 25.6279C19.8731 25.8862 20.0656 26.1187 20.3176 26.1187H23.1655C23.5027 26.1187 23.7892 25.8655 23.8423 25.5218L23.8702 25.3723L24.4064 21.8553L24.4409 21.6624C24.4934 21.3175 24.7805 21.0641 25.1177 21.0641H25.5436C28.3027 21.0641 30.4627 19.9064 31.0941 16.5557C31.3577 15.1561 31.2212 13.9874 30.5234 13.1654C30.3122 12.9176 30.0502 12.7119 29.7438 12.5443Z" fill="#434343"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28.9885 12.2332C28.8782 12.1999 28.7645 12.1698 28.6478 12.1426C28.5304 12.1161 28.4103 12.0926 28.2866 12.072C27.8537 11.9997 27.3793 11.9655 26.8712 11.9655H22.5817C22.4759 11.9655 22.3756 11.9901 22.2859 12.0347C22.088 12.133 21.941 12.3266 21.9054 12.5636L20.9928 18.5375L20.9667 18.7116C21.0267 18.3184 21.3517 18.029 21.7374 18.029H23.3431C26.4966 18.029 28.9658 16.7052 29.6875 12.8759C29.7091 12.7626 29.7272 12.6523 29.7434 12.5443C29.5609 12.4442 29.3631 12.3585 29.1502 12.2856C29.0975 12.2675 29.0433 12.2501 28.9885 12.2332Z" fill="black"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.9056 12.5637C21.9412 12.3267 22.0882 12.1332 22.2861 12.0355C22.3764 11.9908 22.4761 11.9661 22.5819 11.9661H26.8714C27.3795 11.9661 27.8539 12.0006 28.2868 12.0729C28.4105 12.0933 28.5306 12.1169 28.648 12.1435C28.7647 12.1705 28.8784 12.2007 28.9887 12.2338C29.0435 12.2507 29.0977 12.2683 29.1509 12.2857C29.3638 12.3587 29.5617 12.445 29.7443 12.5445C29.959 11.1291 29.7425 10.1655 29.0021 9.29284C28.1858 8.33204 26.7127 7.9209 24.8275 7.9209H19.3547C18.9696 7.9209 18.6411 8.21025 18.5817 8.60416L16.3022 23.5385C16.2572 23.834 16.4777 24.1005 16.766 24.1005H20.1447L21.9056 12.5637Z" fill="#434343"/>
                </svg>
            </div>
            </div>
        </article>
    </div>

    <!-- Seção Cards -->

    <div class="cards__footer">
        <span class="cards__footer-border"></span>
        <article class="cards__footer-section">
            <figure>
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
                <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
                </svg>
            </figure>
            <h2 class="cards__footer-section__title">Free shipping</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>

        <article class="cards__footer-section">
            <figure>
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 4.00012H28C28.3536 4.00012 28.6928 4.1406 28.9428 4.39065C29.1929 4.64069 29.3333 4.97983 29.3333 5.33346V26.6668C29.3333 27.0204 29.1929 27.3596 28.9428 27.6096C28.6928 27.8596 28.3536 28.0001 28 28.0001H4C3.64638 28.0001 3.30724 27.8596 3.05719 27.6096C2.80714 27.3596 2.66667 27.0204 2.66667 26.6668V5.33346C2.66667 4.97983 2.80714 4.64069 3.05719 4.39065C3.30724 4.1406 3.64638 4.00012 4 4.00012ZM26.6667 14.6668H5.33333V25.3335H26.6667V14.6668ZM26.6667 12.0001V6.66679H5.33333V12.0001H26.6667ZM18.6667 20.0001H24V22.6668H18.6667V20.0001Z" fill="#2C2C2C"/>
                <path d="M4 4.00012H28C28.3536 4.00012 28.6928 4.1406 28.9428 4.39065C29.1929 4.64069 29.3333 4.97983 29.3333 5.33346V26.6668C29.3333 27.0204 29.1929 27.3596 28.9428 27.6096C28.6928 27.8596 28.3536 28.0001 28 28.0001H4C3.64638 28.0001 3.30724 27.8596 3.05719 27.6096C2.80714 27.3596 2.66667 27.0204 2.66667 26.6668V5.33346C2.66667 4.97983 2.80714 4.64069 3.05719 4.39065C3.30724 4.1406 3.64638 4.00012 4 4.00012ZM26.6667 14.6668H5.33333V25.3335H26.6667V14.6668ZM26.6667 12.0001V6.66679H5.33333V12.0001H26.6667ZM18.6667 20.0001H24V22.6668H18.6667V20.0001Z" fill="black" fill-opacity="0.2"/>
                </svg>
            </figure>
            <h2 class="cards__footer-section__title">Credit Card</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>

        <article class="cards__footer-section">
            <figure>
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 29.3335C8.63599 29.3335 2.66666 23.3641 2.66666 16.0001C2.66666 8.63614 8.63599 2.66681 16 2.66681C23.364 2.66681 29.3333 8.63614 29.3333 16.0001C29.3333 23.3641 23.364 29.3335 16 29.3335ZM16 26.6668C18.829 26.6668 21.5421 25.543 23.5425 23.5426C25.5429 21.5422 26.6667 18.8291 26.6667 16.0001C26.6667 13.1712 25.5429 10.4581 23.5425 8.45767C21.5421 6.45728 18.829 5.33348 16 5.33348C13.171 5.33348 10.4579 6.45728 8.45752 8.45767C6.45713 10.4581 5.33332 13.1712 5.33332 16.0001C5.33332 18.8291 6.45713 21.5422 8.45752 23.5426C10.4579 25.543 13.171 26.6668 16 26.6668ZM14.6667 20.0001H17.3333V22.6668H14.6667V20.0001ZM17.3333 17.8068V18.6668H14.6667V16.6668C14.6667 16.3132 14.8071 15.974 15.0572 15.724C15.3072 15.474 15.6464 15.3335 16 15.3335C16.3788 15.3335 16.7497 15.2259 17.0698 15.0232C17.3898 14.8206 17.6457 14.5313 17.8077 14.1889C17.9697 13.8465 18.0311 13.4652 17.9849 13.0893C17.9387 12.7133 17.7866 12.3583 17.5464 12.0654C17.3063 11.7725 16.9879 11.5538 16.6283 11.4348C16.2687 11.3158 15.8827 11.3013 15.5152 11.3931C15.1477 11.4849 14.8139 11.6791 14.5525 11.9532C14.2911 12.2273 14.1129 12.5701 14.0387 12.9415L11.4227 12.4175C11.5848 11.6069 11.9593 10.854 12.5079 10.2356C13.0564 9.61721 13.7593 9.15558 14.5448 8.8979C15.3302 8.64022 16.17 8.59572 16.9782 8.76896C17.7865 8.9422 18.5343 9.32696 19.1451 9.88391C19.7559 10.4409 20.2079 11.15 20.4548 11.9389C20.7017 12.7278 20.7347 13.5681 20.5505 14.3739C20.3662 15.1797 19.9713 15.9221 19.406 16.5253C18.8408 17.1284 18.1255 17.5707 17.3333 17.8068Z" fill="#2C2C2C"/>
                <path d="M16 29.3335C8.63599 29.3335 2.66666 23.3641 2.66666 16.0001C2.66666 8.63614 8.63599 2.66681 16 2.66681C23.364 2.66681 29.3333 8.63614 29.3333 16.0001C29.3333 23.3641 23.364 29.3335 16 29.3335ZM16 26.6668C18.829 26.6668 21.5421 25.543 23.5425 23.5426C25.5429 21.5422 26.6667 18.8291 26.6667 16.0001C26.6667 13.1712 25.5429 10.4581 23.5425 8.45767C21.5421 6.45728 18.829 5.33348 16 5.33348C13.171 5.33348 10.4579 6.45728 8.45752 8.45767C6.45713 10.4581 5.33332 13.1712 5.33332 16.0001C5.33332 18.8291 6.45713 21.5422 8.45752 23.5426C10.4579 25.543 13.171 26.6668 16 26.6668ZM14.6667 20.0001H17.3333V22.6668H14.6667V20.0001ZM17.3333 17.8068V18.6668H14.6667V16.6668C14.6667 16.3132 14.8071 15.974 15.0572 15.724C15.3072 15.474 15.6464 15.3335 16 15.3335C16.3788 15.3335 16.7497 15.2259 17.0698 15.0232C17.3898 14.8206 17.6457 14.5313 17.8077 14.1889C17.9697 13.8465 18.0311 13.4652 17.9849 13.0893C17.9387 12.7133 17.7866 12.3583 17.5464 12.0654C17.3063 11.7725 16.9879 11.5538 16.6283 11.4348C16.2687 11.3158 15.8827 11.3013 15.5152 11.3931C15.1477 11.4849 14.8139 11.6791 14.5525 11.9532C14.2911 12.2273 14.1129 12.5701 14.0387 12.9415L11.4227 12.4175C11.5848 11.6069 11.9593 10.854 12.5079 10.2356C13.0564 9.61721 13.7593 9.15558 14.5448 8.8979C15.3302 8.64022 16.17 8.59572 16.9782 8.76896C17.7865 8.9422 18.5343 9.32696 19.1451 9.88391C19.7559 10.4409 20.2079 11.15 20.4548 11.9389C20.7017 12.7278 20.7347 13.5681 20.5505 14.3739C20.3662 15.1797 19.9713 15.9221 19.406 16.5253C18.8408 17.1284 18.1255 17.5707 17.3333 17.8068Z" fill="black" fill-opacity="0.2"/>
            </svg>
            </figure>
            <h2 class="cards__footer-section__title">Help Center</h2>
            <p class="cards__footer-section__description">Lorem ipsum sit amet consectetur</p>
        </article>
    </div>

    <!-- Seção End -->

    <div class="end__footer">
        <span class="end__footer-border"></span>
        <a href="#">Privacy Police</a>
        <small>©<span class="current-date"></span> Increazy All Rights Reserved</small>
    </div>

    <script>
        /*
        *  mostra o ano atual
        */
        function dateUpdate () {
        const copyright = document.querySelector('.current-date') 
        const currentDate = new Date().getFullYear() 
        copyright.innerHTML = currentDate 
        }
        dateUpdate ()
    </script>

</footer>

CSS

/*
*  CSS DA SEÇÃO CONTENT
*/

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
}

.content__footer-section {
  width: 25%;
  height: auto;
  border-right: 1px solid #0000001F;
}

.content__footer-section:last-of-type {
  border-right: none;
}

.section-wrapper {
  width: fit-content;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #2C2C2C;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.content__footer-section__item:hover {
  color: #2C2C2C;
}

.payment-icons {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding-left: 12px;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }

  .content__footer-section {
    padding: 24px;
    width: 50%;
  }

  .content__footer-section:nth-of-type(2) {
    border-right: none;
  }

  .section-wrapper {
    margin: 0;
  }
}

@media (max-width: 768px) {

  .content__footer-section {
    padding: 24px;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #0000001F;
    padding-left: 0px;
  }

  .content__footer-section:last-of-type {
    border-bottom: none;
  }
}



/*
*  CSS DA SEÇÃO CARDS
*/

.cards__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
}

.cards__footer-border {
  height: 1px;
  width: calc(100% - 80px);
  background-color: #0000001F;
  position: absolute;
  top: 0;
  left: 40px;
}

.cards__footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 160px;
}

.cards__footer-section figure {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px !important;
}

.cards__footer-section__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #2C2C2C;
  margin: 0px auto 4px auto;
}

.cards__footer-section__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: center;
  color: #757575;
}

@media (max-width: 1024px) {
  .cards__footer {
    padding: 32px 20px 24px 20px;
  }

  .cards__footer-border {
    width: calc(100% - 40px);
    left: 20px;
  }
}

@media (max-width: 768px) {
  .cards__footer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
  }
}



/*
*  CSS DA SEÇÃO END
*/

.end__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
}

.end__footer-border {
  height: 1px;
  width: calc(100% - 80px);
  background-color: #0000001F;
  position: absolute;
  top: 0;
  left: 40px;
}

.end__footer a,
.end__footer small {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.end__footer a:hover {
  color: #2C2C2C;
}

@media (max-width: 1024px) {
  .end__footer {
    padding: 32px 20px 24px 20px;
  }

  .end__footer-border {
    width: calc(100% - 40px);
    left: 20px;
  }
}

@media (max-width: 768px) {

  .end__footer a,
  .end__footer small {
    font-size: 12px;
    line-height: 16.8px;
  }
}

Variações para a seção 'content' do footer

Você poderá substituir o 'HTML' e o 'CSS' da seção content de seu footer para criar outras combinações de acordo com sua preferência.

Seção 'content' secundária

Preview Dark

Preview Light

HTML

<div class="content__footer">
    <div class="content__footer__info">
      <figure>
        <svg width="186" height="36" viewBox="0 0 186 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M36.3223 10.7549C36.2345 4.75632 31.5243 0.0879518 25.5299 0.0335711C20.6565 -0.0124433 15.7832 -0.00826014 10.9098 0.0335711C4.66861 0.0921349 0.0462504 4.7856 0.0169685 11.0561C-0.00394717 15.7203 -0.00394717 20.3845 0.0169685 25.0487C0.0420672 31.2815 4.71044 35.9332 10.9851 35.9876C13.3528 36.0085 15.7204 35.9876 18.0881 35.9876C20.5268 35.9876 22.9614 36.0127 25.4002 35.9792C31.5327 35.8997 36.2261 31.2983 36.3265 25.1616C36.406 20.3594 36.3976 15.553 36.3265 10.7507L36.3223 10.7549ZM27.2491 25.5172C27.2617 26.655 27.0065 27.0733 25.7725 27.0984C24.413 27.1235 24.1243 26.6341 24.1829 25.4042C24.2749 23.4842 24.208 21.5599 24.208 19.163C22.7188 20.8237 21.5852 22.2042 20.142 23.2625C17.3351 25.3248 14.248 26.6424 10.7425 26.8893C9.94353 26.9478 8.98559 27.3368 9.08599 25.8769C9.15292 24.8814 8.78899 23.9443 10.5292 23.8147C17.0507 23.321 22.2503 18.6694 23.7479 12.0935C19.4811 12.0935 15.2603 12.0893 11.0395 12.0935C9.99791 12.0935 9.04834 12.3403 9.02743 10.6169C9.00651 8.85997 9.88497 8.94363 11.0939 8.952C15.9714 8.98547 20.8531 9.0022 25.7307 8.93945C26.9187 8.92272 27.2659 9.2741 27.2533 10.4621C27.1906 15.4777 27.1947 20.4974 27.2533 25.5172H27.2491Z" fill="white"/>
            <path d="M179.895 10.7674C179.916 9.50412 179.435 9.29078 178.322 9.30752C177.239 9.32425 176.649 9.47903 176.699 10.7758C176.787 13.2104 176.775 15.6533 176.712 18.0879C176.616 21.9364 174.223 24.3877 170.68 24.3751C167.116 24.3626 164.786 21.9029 164.731 18.0377C164.698 15.532 164.681 13.0221 164.744 10.5164C164.773 9.36608 164.129 9.25732 163.288 9.34935C162.565 9.42883 161.485 8.89757 161.506 10.3617C161.548 13.4237 161.439 16.4983 161.619 19.552C161.74 21.6101 162.753 23.3879 164.246 24.8604C167.471 28.0396 171.307 28.3366 176.415 25.7681C176.005 28.3742 174.641 29.9011 171.684 30.4825C169.822 30.8464 170.843 32.0888 170.73 32.8962C170.55 34.1846 171.596 33.6115 172.161 33.5446C176.335 33.0426 179.761 29.2903 179.841 24.9775C179.929 20.2422 179.824 15.5027 179.899 10.7674H179.895Z" fill="white"/>
            <path d="M159.632 13.3107C160.854 12.3025 160.72 11.0601 160.473 9.91815C160.239 8.83054 159.059 9.37016 158.319 9.36179C153.587 9.3116 148.856 9.34924 144.125 9.32415C143.017 9.31996 142.193 9.22375 142.176 10.8719C142.159 12.5828 142.962 12.6121 144.196 12.5368C145.238 12.474 146.284 12.5242 147.325 12.5242H155.905C155.085 13.2521 154.679 13.6244 154.261 13.9842C150.63 17.1215 147.053 20.3258 143.339 23.3627C142.055 24.4127 142.025 25.6718 142.327 26.8891C142.615 28.0687 143.878 27.4329 144.677 27.4413C149.199 27.504 153.726 27.4915 158.247 27.4538C159.285 27.4455 160.607 28.0227 160.636 25.9312C160.665 23.9107 159.473 24.3207 158.356 24.3207C154.7 24.3123 151.04 24.3207 146.907 24.3207C147.953 23.3836 148.635 22.752 149.342 22.1413C152.763 19.1838 156.148 16.1845 159.636 13.3107H159.632Z" fill="white"/>
            <path d="M78.1912 18.6149C78.1033 13.637 74.6773 9.89726 69.7371 9.40365C67.3569 9.16521 65.2486 10.0228 63.1026 11.4325C63.3954 9.65046 62.6718 9.24051 61.1407 9.29489C59.2583 9.366 59.9151 10.6544 59.9067 11.5203C59.8565 16.3937 59.9151 21.267 59.8565 26.1403C59.8398 27.3409 60.3752 27.525 61.3666 27.4915C62.3036 27.458 63.1612 27.6003 63.1068 26.1529C63.0148 23.6514 63.0441 21.1415 63.0943 18.6358C63.1696 14.9588 65.5749 12.5243 69.051 12.5326C72.523 12.541 74.899 14.963 74.9785 18.6735C75.0329 21.1792 75.0538 23.689 74.9702 26.1905C74.92 27.6672 75.8486 27.4329 76.748 27.4915C77.7687 27.5584 78.2665 27.3158 78.2246 26.1362C78.1368 23.6347 78.233 21.1248 78.187 18.6191L78.1912 18.6149Z" fill="white"/>
            <path d="M91.3049 13.365C92.8903 14.2435 93.3504 12.8881 93.9402 12.2356C94.7852 11.3027 93.5178 11.0434 93.0032 10.7255C90.966 9.48306 88.7657 9.09403 86.3939 9.59601C82.8633 10.3406 80.0857 13.1057 79.3871 16.7492C78.6509 20.5851 80.0815 23.5969 83.1352 25.8349C86.0341 27.9558 90.2005 27.939 93.1747 26.0566C94.0908 25.4793 94.3586 25.0861 93.4676 24.2202C92.6728 23.4505 92.2043 23.028 90.92 23.6932C86.9377 25.7554 82.3613 22.8231 82.3697 18.3973C82.3697 16.7868 82.8466 15.5444 83.8924 14.4108C85.7873 12.3569 88.5733 11.8423 91.3091 13.3566L91.3049 13.365Z" fill="white"/>
            <path d="M103.809 12.5703C105.448 12.0893 104.482 10.8385 104.549 9.99769C104.637 8.87662 103.679 9.52082 103.173 9.5501C101.6 9.64213 100.299 10.4662 98.4793 11.558C99.1444 9.5752 98.3329 9.32839 96.9274 9.28656C95.1704 9.23636 95.4925 10.3407 95.4884 11.3447C95.4884 16.2808 95.5302 21.2168 95.4591 26.1488C95.4382 27.5794 96.2622 27.4539 97.1993 27.4874C98.1865 27.5208 98.7512 27.3493 98.701 26.1446C98.6131 23.9233 98.6717 21.6979 98.6759 19.4725C98.6884 15.3228 99.843 13.729 103.8 12.5661L103.809 12.5703Z" fill="white"/>
            <path d="M58.9276 18.4811C58.9276 15.9043 58.8816 13.3233 58.9486 10.7465C58.9778 9.6505 58.6139 9.27401 57.5179 9.31584C55.5686 9.38696 53.6151 9.35349 51.6657 9.32839C50.5865 9.31166 49.708 9.15689 49.6997 10.8427C49.6913 12.5243 50.4401 12.6372 51.6992 12.5243C52.3894 12.4616 53.1047 12.5912 53.7866 12.495C55.2883 12.2859 55.8238 12.7376 55.7652 14.3774C55.6271 18.205 55.7777 22.0409 55.6899 25.8727C55.6606 27.2029 56.1166 27.4999 57.3631 27.5208C58.7227 27.5459 58.9904 27.0105 58.9486 25.7974C58.8691 23.3628 58.9235 20.9198 58.9235 18.4811H58.9276Z" fill="white"/>
            <path d="M57.3003 6.31237C58.3252 6.33328 58.731 5.66816 58.9485 4.72696C58.6724 3.93635 58.2876 3.26286 57.246 3.31306C56.3257 3.35489 55.8028 3.93635 55.7777 4.73951C55.7484 5.65143 56.288 6.29563 57.3003 6.31655V6.31237Z" fill="white"/>
            <path d="M115.262 9.69231C111.163 8.6298 106.95 10.3993 104.905 14.0469C102.863 17.6821 103.524 22.0493 106.553 24.9356C109.514 27.7592 114.074 28.2905 117.529 26.1278C118.077 25.7848 119.445 25.584 118.529 24.3835C117.902 23.5677 117.588 22.3254 115.885 23.4464C112.539 25.6551 108.502 23.9777 107.302 20.1669C107.356 20.1334 107.406 20.0748 107.46 20.0748C111.706 20.0497 115.956 19.9661 120.202 20.0539C121.629 20.0832 122.039 19.5896 122.005 18.2845C121.905 14.3272 119.073 10.6837 115.27 9.6965L115.262 9.69231ZM118.358 16.4606C118.14 17.109 117.525 16.7953 117.098 16.7994C113.836 16.8287 110.569 16.8162 107.076 16.8162C108.059 14.2268 109.64 12.8506 112.079 12.5578C114.509 12.2649 116.442 13.1685 117.847 15.1513C118.115 15.5278 118.529 15.9503 118.358 16.4606Z" fill="white"/>
            <path d="M141.256 18.4099C141.105 13.9967 138.143 10.4244 134.065 9.61283C129.785 8.76365 125.673 10.7716 123.841 14.6158C122.08 18.3054 123.013 22.6935 126.313 25.3372C130.057 28.3365 133.981 28.006 138.06 25.4418C137.767 27.1736 138.486 27.5752 139.996 27.5166C141.854 27.4455 141.226 26.1822 141.251 25.2954C141.318 23.003 141.335 20.7023 141.26 18.4099H141.256ZM132.149 24.3207C128.765 24.3333 126.184 21.8025 126.167 18.4518C126.15 15.0927 128.698 12.541 132.082 12.5285C135.466 12.5159 138.055 15.0509 138.068 18.3848C138.081 21.7272 135.508 24.304 132.149 24.3165V24.3207Z" fill="white"/>
          </svg>
      </figure>
      <p class="content__footer__info-description">Rua Princesa Isabel, 245 - Velha Blumenau - Santa Catarina</p>
      <span class="content__footer__info-phone">(47) 3035-2662</span>
    </div>

    <div class="section-wrapper">
      <article class="content__footer-section">
            <h2 class="content__footer-section__title">Increazy</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">About</a></li>
                <li><a class="content__footer-section__item" href="#">Careers</a></li>
                <li><a class="content__footer-section__item" href="#">Contact Us</a></li>
            </ul>
      </article>

      <article class="content__footer-section">
            <h2 class="content__footer-section__title">FAQ</h2>
            <ul>
                <li><a class="content__footer-section__item" href="#">How to Buy</a></li>
                <li><a class="content__footer-section__item" href="#">Security & Frauds</a></li>
            </ul>
      </article>

      <article class="content__footer-section">
            <h2 class="content__footer-section__title">Follow Us</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">LinkedIn</a></li>
                <li><a class="content__footer-section__item" href="#">Facebook</a></li>
                <li><a class="content__footer-section__item" href="#">Instagram</a></li>
                <li><a class="content__footer-section__item" href="#">Twitter</a></li>
            </ul>
      </article>
    </div>
</div>

CSS Dark

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info figure{
  margin-bottom: 24px!important;
}

.content__footer__info-description{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
  margin-bottom: 16px;
}

.content__footer__info-phone{
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #fff;
}

.section-wrapper{
  max-width: 60%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 33.33%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #fff;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
}

.content__footer-section__item:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info{
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }
  
  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

CSS Light

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info figure {
  margin-bottom: 24px !important;
}

.content__footer__info figure svg path{
  fill: #01141E;
}

.content__footer__info-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  margin-bottom: 16px;
}

.content__footer__info-phone {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
}

.section-wrapper {
  max-width: 60%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 33.33%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #2C2C2C;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.content__footer-section__item:hover {
  color: #2C2C2C;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info {
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }

  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

Seção 'content' terciária

Preview Dark

Preview Light

HTML

<div class="content__footer">
    <div class="content__footer__info">
      <figure>
        <svg width="186" height="36" viewBox="0 0 186 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M36.3223 10.7549C36.2345 4.75632 31.5243 0.0879518 25.5299 0.0335711C20.6565 -0.0124433 15.7832 -0.00826014 10.9098 0.0335711C4.66861 0.0921349 0.0462504 4.7856 0.0169685 11.0561C-0.00394717 15.7203 -0.00394717 20.3845 0.0169685 25.0487C0.0420672 31.2815 4.71044 35.9332 10.9851 35.9876C13.3528 36.0085 15.7204 35.9876 18.0881 35.9876C20.5268 35.9876 22.9614 36.0127 25.4002 35.9792C31.5327 35.8997 36.2261 31.2983 36.3265 25.1616C36.406 20.3594 36.3976 15.553 36.3265 10.7507L36.3223 10.7549ZM27.2491 25.5172C27.2617 26.655 27.0065 27.0733 25.7725 27.0984C24.413 27.1235 24.1243 26.6341 24.1829 25.4042C24.2749 23.4842 24.208 21.5599 24.208 19.163C22.7188 20.8237 21.5852 22.2042 20.142 23.2625C17.3351 25.3248 14.248 26.6424 10.7425 26.8893C9.94353 26.9478 8.98559 27.3368 9.08599 25.8769C9.15292 24.8814 8.78899 23.9443 10.5292 23.8147C17.0507 23.321 22.2503 18.6694 23.7479 12.0935C19.4811 12.0935 15.2603 12.0893 11.0395 12.0935C9.99791 12.0935 9.04834 12.3403 9.02743 10.6169C9.00651 8.85997 9.88497 8.94363 11.0939 8.952C15.9714 8.98547 20.8531 9.0022 25.7307 8.93945C26.9187 8.92272 27.2659 9.2741 27.2533 10.4621C27.1906 15.4777 27.1947 20.4974 27.2533 25.5172H27.2491Z" fill="white"/>
            <path d="M179.895 10.7674C179.916 9.50412 179.435 9.29078 178.322 9.30752C177.239 9.32425 176.649 9.47903 176.699 10.7758C176.787 13.2104 176.775 15.6533 176.712 18.0879C176.616 21.9364 174.223 24.3877 170.68 24.3751C167.116 24.3626 164.786 21.9029 164.731 18.0377C164.698 15.532 164.681 13.0221 164.744 10.5164C164.773 9.36608 164.129 9.25732 163.288 9.34935C162.565 9.42883 161.485 8.89757 161.506 10.3617C161.548 13.4237 161.439 16.4983 161.619 19.552C161.74 21.6101 162.753 23.3879 164.246 24.8604C167.471 28.0396 171.307 28.3366 176.415 25.7681C176.005 28.3742 174.641 29.9011 171.684 30.4825C169.822 30.8464 170.843 32.0888 170.73 32.8962C170.55 34.1846 171.596 33.6115 172.161 33.5446C176.335 33.0426 179.761 29.2903 179.841 24.9775C179.929 20.2422 179.824 15.5027 179.899 10.7674H179.895Z" fill="white"/>
            <path d="M159.632 13.3107C160.854 12.3025 160.72 11.0601 160.473 9.91815C160.239 8.83054 159.059 9.37016 158.319 9.36179C153.587 9.3116 148.856 9.34924 144.125 9.32415C143.017 9.31996 142.193 9.22375 142.176 10.8719C142.159 12.5828 142.962 12.6121 144.196 12.5368C145.238 12.474 146.284 12.5242 147.325 12.5242H155.905C155.085 13.2521 154.679 13.6244 154.261 13.9842C150.63 17.1215 147.053 20.3258 143.339 23.3627C142.055 24.4127 142.025 25.6718 142.327 26.8891C142.615 28.0687 143.878 27.4329 144.677 27.4413C149.199 27.504 153.726 27.4915 158.247 27.4538C159.285 27.4455 160.607 28.0227 160.636 25.9312C160.665 23.9107 159.473 24.3207 158.356 24.3207C154.7 24.3123 151.04 24.3207 146.907 24.3207C147.953 23.3836 148.635 22.752 149.342 22.1413C152.763 19.1838 156.148 16.1845 159.636 13.3107H159.632Z" fill="white"/>
            <path d="M78.1912 18.6149C78.1033 13.637 74.6773 9.89726 69.7371 9.40365C67.3569 9.16521 65.2486 10.0228 63.1026 11.4325C63.3954 9.65046 62.6718 9.24051 61.1407 9.29489C59.2583 9.366 59.9151 10.6544 59.9067 11.5203C59.8565 16.3937 59.9151 21.267 59.8565 26.1403C59.8398 27.3409 60.3752 27.525 61.3666 27.4915C62.3036 27.458 63.1612 27.6003 63.1068 26.1529C63.0148 23.6514 63.0441 21.1415 63.0943 18.6358C63.1696 14.9588 65.5749 12.5243 69.051 12.5326C72.523 12.541 74.899 14.963 74.9785 18.6735C75.0329 21.1792 75.0538 23.689 74.9702 26.1905C74.92 27.6672 75.8486 27.4329 76.748 27.4915C77.7687 27.5584 78.2665 27.3158 78.2246 26.1362C78.1368 23.6347 78.233 21.1248 78.187 18.6191L78.1912 18.6149Z" fill="white"/>
            <path d="M91.3049 13.365C92.8903 14.2435 93.3504 12.8881 93.9402 12.2356C94.7852 11.3027 93.5178 11.0434 93.0032 10.7255C90.966 9.48306 88.7657 9.09403 86.3939 9.59601C82.8633 10.3406 80.0857 13.1057 79.3871 16.7492C78.6509 20.5851 80.0815 23.5969 83.1352 25.8349C86.0341 27.9558 90.2005 27.939 93.1747 26.0566C94.0908 25.4793 94.3586 25.0861 93.4676 24.2202C92.6728 23.4505 92.2043 23.028 90.92 23.6932C86.9377 25.7554 82.3613 22.8231 82.3697 18.3973C82.3697 16.7868 82.8466 15.5444 83.8924 14.4108C85.7873 12.3569 88.5733 11.8423 91.3091 13.3566L91.3049 13.365Z" fill="white"/>
            <path d="M103.809 12.5703C105.448 12.0893 104.482 10.8385 104.549 9.99769C104.637 8.87662 103.679 9.52082 103.173 9.5501C101.6 9.64213 100.299 10.4662 98.4793 11.558C99.1444 9.5752 98.3329 9.32839 96.9274 9.28656C95.1704 9.23636 95.4925 10.3407 95.4884 11.3447C95.4884 16.2808 95.5302 21.2168 95.4591 26.1488C95.4382 27.5794 96.2622 27.4539 97.1993 27.4874C98.1865 27.5208 98.7512 27.3493 98.701 26.1446C98.6131 23.9233 98.6717 21.6979 98.6759 19.4725C98.6884 15.3228 99.843 13.729 103.8 12.5661L103.809 12.5703Z" fill="white"/>
            <path d="M58.9276 18.4811C58.9276 15.9043 58.8816 13.3233 58.9486 10.7465C58.9778 9.6505 58.6139 9.27401 57.5179 9.31584C55.5686 9.38696 53.6151 9.35349 51.6657 9.32839C50.5865 9.31166 49.708 9.15689 49.6997 10.8427C49.6913 12.5243 50.4401 12.6372 51.6992 12.5243C52.3894 12.4616 53.1047 12.5912 53.7866 12.495C55.2883 12.2859 55.8238 12.7376 55.7652 14.3774C55.6271 18.205 55.7777 22.0409 55.6899 25.8727C55.6606 27.2029 56.1166 27.4999 57.3631 27.5208C58.7227 27.5459 58.9904 27.0105 58.9486 25.7974C58.8691 23.3628 58.9235 20.9198 58.9235 18.4811H58.9276Z" fill="white"/>
            <path d="M57.3003 6.31237C58.3252 6.33328 58.731 5.66816 58.9485 4.72696C58.6724 3.93635 58.2876 3.26286 57.246 3.31306C56.3257 3.35489 55.8028 3.93635 55.7777 4.73951C55.7484 5.65143 56.288 6.29563 57.3003 6.31655V6.31237Z" fill="white"/>
            <path d="M115.262 9.69231C111.163 8.6298 106.95 10.3993 104.905 14.0469C102.863 17.6821 103.524 22.0493 106.553 24.9356C109.514 27.7592 114.074 28.2905 117.529 26.1278C118.077 25.7848 119.445 25.584 118.529 24.3835C117.902 23.5677 117.588 22.3254 115.885 23.4464C112.539 25.6551 108.502 23.9777 107.302 20.1669C107.356 20.1334 107.406 20.0748 107.46 20.0748C111.706 20.0497 115.956 19.9661 120.202 20.0539C121.629 20.0832 122.039 19.5896 122.005 18.2845C121.905 14.3272 119.073 10.6837 115.27 9.6965L115.262 9.69231ZM118.358 16.4606C118.14 17.109 117.525 16.7953 117.098 16.7994C113.836 16.8287 110.569 16.8162 107.076 16.8162C108.059 14.2268 109.64 12.8506 112.079 12.5578C114.509 12.2649 116.442 13.1685 117.847 15.1513C118.115 15.5278 118.529 15.9503 118.358 16.4606Z" fill="white"/>
            <path d="M141.256 18.4099C141.105 13.9967 138.143 10.4244 134.065 9.61283C129.785 8.76365 125.673 10.7716 123.841 14.6158C122.08 18.3054 123.013 22.6935 126.313 25.3372C130.057 28.3365 133.981 28.006 138.06 25.4418C137.767 27.1736 138.486 27.5752 139.996 27.5166C141.854 27.4455 141.226 26.1822 141.251 25.2954C141.318 23.003 141.335 20.7023 141.26 18.4099H141.256ZM132.149 24.3207C128.765 24.3333 126.184 21.8025 126.167 18.4518C126.15 15.0927 128.698 12.541 132.082 12.5285C135.466 12.5159 138.055 15.0509 138.068 18.3848C138.081 21.7272 135.508 24.304 132.149 24.3165V24.3207Z" fill="white"/>
          </svg>
      </figure>

      <div class="content__footer-info__links">
        <a class="content__footer-info__link" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.66669 5.99992H11.6667L11.3334 7.33325H8.66669V13.3333H7.33335V7.33325H4.66669V5.99992H7.33335V4.75192C7.33335 3.56325 7.45735 3.13192 7.68935 2.69725C7.91669 2.26779 8.26789 1.91659 8.69735 1.68925C9.13202 1.45725 9.56335 1.33325 10.752 1.33325C11.1 1.33325 11.4054 1.36659 11.6667 1.43325V2.66659H10.752C9.86935 2.66659 9.60069 2.71859 9.32669 2.86525C9.12402 2.97325 8.97335 3.12392 8.86535 3.32659C8.71869 3.60059 8.66669 3.86925 8.66669 4.75192V5.99992Z" fill="black"/>
          </svg>
        </a>
        <a class="content__footer-info__link" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99998 5.99992C7.46955 5.99992 6.96084 6.21063 6.58577 6.5857C6.21069 6.96078 5.99998 7.46949 5.99998 7.99992C5.99998 8.53035 6.21069 9.03906 6.58577 9.41413C6.96084 9.78921 7.46955 9.99992 7.99998 9.99992C8.53041 9.99992 9.03912 9.78921 9.41419 9.41413C9.78927 9.03906 9.99998 8.53035 9.99998 7.99992C9.99998 7.46949 9.78927 6.96078 9.41419 6.5857C9.03912 6.21063 8.53041 5.99992 7.99998 5.99992ZM7.99998 4.66659C8.88403 4.66659 9.73188 5.01777 10.357 5.6429C10.9821 6.26802 11.3333 7.11586 11.3333 7.99992C11.3333 8.88397 10.9821 9.73182 10.357 10.3569C9.73188 10.9821 8.88403 11.3333 7.99998 11.3333C7.11592 11.3333 6.26808 10.9821 5.64296 10.3569C5.01784 9.73182 4.66665 8.88397 4.66665 7.99992C4.66665 7.11586 5.01784 6.26802 5.64296 5.6429C6.26808 5.01777 7.11592 4.66659 7.99998 4.66659ZM12.3333 4.49992C12.3333 4.72093 12.2455 4.93289 12.0892 5.08917C11.933 5.24545 11.721 5.33325 11.5 5.33325C11.279 5.33325 11.067 5.24545 10.9107 5.08917C10.7544 4.93289 10.6666 4.72093 10.6666 4.49992C10.6666 4.2789 10.7544 4.06694 10.9107 3.91066C11.067 3.75438 11.279 3.66659 11.5 3.66659C11.721 3.66659 11.933 3.75438 12.0892 3.91066C12.2455 4.06694 12.3333 4.2789 12.3333 4.49992ZM7.99998 2.66659C6.35065 2.66659 6.08131 2.67125 5.31398 2.70525C4.79131 2.72992 4.44065 2.79992 4.11531 2.92659C3.82598 3.03859 3.61731 3.17259 3.39531 3.39525C3.18665 3.59685 3.02622 3.84297 2.92598 4.11525C2.79931 4.44192 2.72931 4.79192 2.70531 5.31392C2.67065 6.04992 2.66665 6.30725 2.66665 7.99992C2.66665 9.64925 2.67131 9.91858 2.70531 10.6859C2.72998 11.2079 2.79998 11.5593 2.92598 11.8839C3.03931 12.1739 3.17265 12.3826 3.39398 12.6039C3.61865 12.8279 3.82731 12.9619 4.11398 13.0726C4.44331 13.1999 4.79398 13.2706 5.31398 13.2946C6.04998 13.3293 6.30731 13.3333 7.99998 13.3333C9.64931 13.3333 9.91865 13.3286 10.686 13.2946C11.2073 13.2699 11.5586 13.1999 11.884 13.0739C12.1726 12.9613 12.3826 12.8273 12.604 12.6059C12.8286 12.3813 12.9626 12.1726 13.0733 11.8859C13.2 11.5573 13.2706 11.2059 13.2946 10.6859C13.3293 9.94992 13.3333 9.69259 13.3333 7.99992C13.3333 6.35059 13.3286 6.08125 13.2946 5.31392C13.27 4.79259 13.2 4.44059 13.0733 4.11525C12.9728 3.84325 12.8127 3.59723 12.6046 3.39525C12.4031 3.18648 12.157 3.02603 11.8846 2.92592C11.558 2.79925 11.2073 2.72925 10.686 2.70525C9.94998 2.67059 9.69265 2.66659 7.99998 2.66659ZM7.99998 1.33325C9.81131 1.33325 10.0373 1.33992 10.748 1.37325C11.458 1.40659 11.9413 1.51792 12.3666 1.68325C12.8066 1.85259 13.1773 2.08192 13.548 2.45192C13.887 2.78518 14.1493 3.18831 14.3166 3.63325C14.4813 4.05792 14.5933 4.54192 14.6266 5.25192C14.658 5.96259 14.6666 6.18859 14.6666 7.99992C14.6666 9.81125 14.66 10.0373 14.6266 10.7479C14.5933 11.4579 14.4813 11.9413 14.3166 12.3666C14.1498 12.8118 13.8874 13.215 13.548 13.5479C13.2146 13.8868 12.8115 14.1491 12.3666 14.3166C11.942 14.4813 11.458 14.5933 10.748 14.6266C10.0373 14.6579 9.81131 14.6666 7.99998 14.6666C6.18865 14.6666 5.96265 14.6599 5.25198 14.6266C4.54198 14.5933 4.05865 14.4813 3.63331 14.3166C3.1882 14.1496 2.785 13.8872 2.45198 13.5479C2.11292 13.2147 1.8506 12.8116 1.68331 12.3666C1.51798 11.9419 1.40665 11.4579 1.37331 10.7479C1.34198 10.0373 1.33331 9.81125 1.33331 7.99992C1.33331 6.18859 1.33998 5.96259 1.37331 5.25192C1.40665 4.54125 1.51798 4.05859 1.68331 3.63325C1.85014 3.18804 2.11252 2.7848 2.45198 2.45192C2.78509 2.11274 3.18827 1.8504 3.63331 1.68325C4.05865 1.51792 4.54131 1.40659 5.25198 1.37325C5.96265 1.34192 6.18865 1.33325 7.99998 1.33325Z" fill="black"/>
          </svg>
        </a>
        <a class="content__footer-info__link" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.1997 3.70016C9.693 3.70007 9.20653 3.89891 8.84496 4.25387C8.48338 4.60883 8.27561 5.09155 8.26635 5.59816L8.24769 6.64816C8.24659 6.70453 8.23359 6.76004 8.20954 6.81104C8.18549 6.86204 8.15092 6.90738 8.10812 6.94408C8.06531 6.98078 8.01522 7.00801 7.96115 7.024C7.90708 7.03998 7.85024 7.04435 7.79435 7.03682L6.75369 6.89549C5.38435 6.70882 4.07235 6.07816 2.81369 5.02949C2.41502 7.23616 3.19369 8.76482 5.06902 9.94416L6.23369 10.6762C6.28902 10.7109 6.335 10.7587 6.36759 10.8154C6.40017 10.872 6.41838 10.9358 6.42062 11.0011C6.42285 11.0665 6.40905 11.1313 6.38042 11.1901C6.35178 11.2488 6.30918 11.2997 6.25635 11.3382L5.19502 12.1135C5.82635 12.1528 6.42569 12.1248 6.92302 12.0262C10.0684 11.3982 12.1597 9.03149 12.1597 5.12749C12.1597 4.80882 11.485 3.70016 10.1997 3.70016ZM6.93302 5.57349C6.94466 4.93086 7.14561 4.30594 7.51073 3.77697C7.87584 3.24801 8.38889 2.8385 8.98563 2.59974C9.58237 2.36097 10.2363 2.30354 10.8655 2.43466C11.4947 2.56577 12.0713 2.87959 12.523 3.33682C12.997 3.33349 13.4004 3.45349 14.3024 2.90682C14.079 4.00016 13.969 4.47482 13.493 5.12749C13.493 10.2222 10.3617 12.6995 7.18435 13.3335C5.00569 13.7682 1.83769 13.0542 0.929688 12.1062C1.39235 12.0702 3.27235 11.8682 4.35902 11.0728C3.43969 10.4668 -0.219646 8.31349 2.18502 2.52416C3.31369 3.84216 4.45835 4.73949 5.61835 5.21549C6.39035 5.53216 6.57969 5.52549 6.93369 5.57416L6.93302 5.57349Z" fill="black"/>
          </svg>
        </a>
        <a class="content__footer-info__link" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.00001 6.36659C8.61134 5.74192 9.40734 5.33325 10.3333 5.33325C11.3058 5.33325 12.2384 5.71956 12.9261 6.40719C13.6137 7.09483 14 8.02746 14 8.99992V13.9999H12.6667V8.99992C12.6667 8.38108 12.4208 7.78759 11.9833 7.35C11.5457 6.91242 10.9522 6.66659 10.3333 6.66659C9.71451 6.66659 9.12101 6.91242 8.68343 7.35C8.24584 7.78759 8.00001 8.38108 8.00001 8.99992V13.9999H6.66668V5.66659H8.00001V6.36659ZM3.33334 4.33325C3.06813 4.33325 2.81377 4.2279 2.62624 4.04036C2.4387 3.85282 2.33334 3.59847 2.33334 3.33325C2.33334 3.06804 2.4387 2.81368 2.62624 2.62615C2.81377 2.43861 3.06813 2.33325 3.33334 2.33325C3.59856 2.33325 3.85291 2.43861 4.04045 2.62615C4.22799 2.81368 4.33334 3.06804 4.33334 3.33325C4.33334 3.59847 4.22799 3.85282 4.04045 4.04036C3.85291 4.2279 3.59856 4.33325 3.33334 4.33325ZM2.66668 5.66659H4.00001V13.9999H2.66668V5.66659Z" fill="black"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="section-wrapper">
      <article class="content__footer-section">
            <h2 class="content__footer-section__title">Increazy</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">About</a></li>
                <li><a class="content__footer-section__item" href="#">Careers</a></li>
                <li><a class="content__footer-section__item" href="#">Contact Us</a></li>
            </ul>
      </article>

      <article class="content__footer-section">
            <h2 class="content__footer-section__title">FAQ</h2>
            <ul>
                <li><a class="content__footer-section__item" href="#">How to Buy</a></li>
                <li><a class="content__footer-section__item" href="#">Security & Frauds</a></li>
            </ul>
      </article>
    </div>
</div>

CSS Dark

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info figure{
  margin-bottom: 32px!important;
}

.content__footer-info__links{
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.content__footer-info__link{
  width: 32px;
  height: 32px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.section-wrapper{
  max-width: 40%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 50%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #fff;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
}

.content__footer-section__item:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info{
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }
  
  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

CSS Light

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info figure {
  margin-bottom: 32px !important;
}

.content__footer__info figure svg path {
  fill: #01141E;
}

.content__footer-info__links {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.content__footer-info__link {
  width: 32px;
  height: 32px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.section-wrapper {
  max-width: 40%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 50%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #2C2C2C;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.content__footer-section__item:hover {
  color: #2C2C2C;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info {
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }

  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

Seção 'content' quaternária

Preview Dark

Preview Light

HTML

<div class="content__footer">
    <div class="content__footer__info">
      <span class="content__footer__info-phone">(47) 3035-2662</span>
      <p class="content__footer__info-description">Rua Princesa Isabel, 245 - Velha Blumenau - Santa Catarina</p>
    </div>

    <div class="section-wrapper">
      <article class="content__footer-section">
            <h2 class="content__footer-section__title">Increazy</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">About</a></li>
                <li><a class="content__footer-section__item" href="#">Careers</a></li>
                <li><a class="content__footer-section__item" href="#">Contact Us</a></li>
            </ul>
      </article>

      <article class="content__footer-section">
            <h2 class="content__footer-section__title">FAQ</h2>
            <ul>
                <li><a class="content__footer-section__item" href="#">How to Buy</a></li>
                <li><a class="content__footer-section__item" href="#">Security & Frauds</a></li>
            </ul>
      </article>

      <article class="content__footer-section">
            <h2 class="content__footer-section__title">Follow Us</h2>
            <ul>  
                <li><a class="content__footer-section__item" href="#">LinkedIn</a></li>
                <li><a class="content__footer-section__item" href="#">Facebook</a></li>
                <li><a class="content__footer-section__item" href="#">Instagram</a></li>
                <li><a class="content__footer-section__item" href="#">Twitter</a></li>
            </ul>
      </article>
    </div>
</div>

CSS Dark

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #01141E;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info-phone{
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #fff;
  margin-bottom: 23px;
}

.content__footer__info-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
}

.section-wrapper{
  max-width: 60%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 33.33%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #fff;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #A7A7A7;
}

.content__footer-section__item:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info{
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }
  
  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

CSS Light

.content__footer {
  width: 100%;
  height: auto;
  padding: 40px;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 215px;
}

.content__footer__info-phone {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  margin-bottom: 23px;
}

.content__footer__info-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.section-wrapper {
  max-width: 60%;
  width: 100%;
  display: flex;
}

.content__footer-section {
  width: 33.33%;
  height: auto;
}

.content__footer-section__title {
  display: flex;
  height: 32px;
  padding: 4px 12px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
  color: #2C2C2C;
}

.content__footer-section__item {
  display: flex;
  height: 32px;
  padding: 4px 12px 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.content__footer-section__item:hover {
  color: #2C2C2C;
}

@media (max-width: 1024px) {
  .content__footer {
    flex-wrap: wrap;
    padding: 32px 20px 24px 20px;
  }
}

@media (max-width: 768px) {
  .content__footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content__footer__info {
    margin-bottom: 24px;
    margin-right: auto;
    padding-left: 12px
  }

  .section-wrapper {
    flex-direction: column;
    max-width: 100%;
  }

  .content__footer-section {
    padding: 24px;
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}