Footer

<div class="footer">
    <div class="footer__top-container">
        <div class="footer__top-content">
            <ul class="footer__links-list">
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Additional link

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Additional link

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Additional link

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Additional link

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_blank">
                        Additional link

                        <svg class="external-link" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="_mark external-link__shape" d="M12.75 10.75C13.3145 10.75 13.8125 11.248 13.8125 11.8125V15C13.8125 16.1953 12.8496 17.125 11.6875 17.125H2.125C0.929688 17.125 0 16.1953 0 15V5.4375C0 4.27539 0.929688 3.3125 2.125 3.3125H5.3125C5.87695 3.3125 6.375 3.81055 6.375 4.375C6.375 4.97266 5.87695 5.4375 5.3125 5.4375H2.125V15H11.6875V11.8125C11.6875 11.248 12.1523 10.75 12.75 10.75ZM16.668 0.457031C16.8672 0.65625 17 0.921875 17 1.1875V6.5C17 7.09766 16.4355 7.5625 15.9043 7.5625C15.3398 7.5625 14.875 7.09766 14.875 6.5V3.77734L7.4375 11.2812C7.00586 11.7129 6.3418 11.7129 5.91016 11.2812C5.51172 10.8828 5.51172 10.2188 5.91016 9.78711L13.3809 2.2168H10.625C10.0605 2.2168 9.5625 1.75195 9.5625 1.1875C9.5625 0.623047 10.0273 0.125 10.625 0.125H15.9375C16.2031 0.125 16.4688 0.257812 16.668 0.457031Z" fill="#88C965" />
                        </svg>
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Additional link

                    </a>
                </li>
            </ul>
            <div class="footer__information">
                <div class="footer__contact-address">
                    <div class="footer__label">Address</div>
                    <a target="_blank" href="https://maps.google.com/maps?q=Pixo%0A110%20W.%20Main%20St.%0AChampaign%2C%20IL%2061820" class="footer__address">
                        Pixo<br />
                        110 W. Main St.<br />
                        Champaign, IL 61820
                    </a>
                </div>
                <nav class="footer__social" aria-label="footer social media links">
                    <div class="footer__label">Stay Connected</div>
                    <ul class="social-links">
                        <li class="social-links__item">
                            <a href="https://facebook.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Facebook page for
                                </span>
                                <svg class="facebook" aria-label="Facebook" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="facebook__logo" d="M18.4152 0.375C19.6122 0.375 20.625 1.38783 20.625 2.58482V18.7902C20.625 20.0332 19.6122 21 18.4152 21H12.0619V14.0022H14.7321L15.2386 10.6875H12.0619V8.56975C12.0619 7.649 12.5223 6.77427 13.9495 6.77427H15.3767V3.96596C15.3767 3.96596 14.0876 3.73577 12.7985 3.73577C10.2204 3.73577 8.51702 5.3471 8.51702 8.20145V10.6875H5.61663V14.0022H8.51702V21H2.20982C0.966797 21 0 20.0332 0 18.7902V2.58482C0 1.38783 0.966797 0.375 2.20982 0.375H18.4152Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://instagram.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Instagram account for
                                </span>
                                <svg class="instagram" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="instagram__camera" d="M10.5781 8.32143C11.8728 8.32143 12.9442 9.39286 12.9442 10.6875C12.9442 11.1339 12.8103 11.5357 12.6317 11.8929C11.6942 13.5 9.41741 13.5 8.47991 11.8929C7.58705 10.3304 8.70312 8.32143 10.5781 8.32143ZM16.1138 6.49107C16.5156 7.42857 16.4263 9.66072 16.4263 10.6875C16.4263 11.7589 16.5156 13.9911 16.1138 14.9286C15.8906 15.5536 15.3996 16.0446 14.7746 16.2679C13.8371 16.6696 11.6049 16.5804 10.5781 16.5804C9.5067 16.5804 7.27455 16.6696 6.33705 16.2679C5.71205 16.0446 5.22098 15.5536 4.99777 14.9286C4.64062 13.9911 4.68527 11.7589 4.68527 10.6875C4.68527 9.66072 4.64062 7.42857 4.99777 6.49107C5.22098 5.86607 5.71205 5.375 6.33705 5.15179C7.27455 4.75 9.5067 4.83929 10.5781 4.83929C11.6049 4.83929 13.8371 4.75 14.7746 5.15179C15.3996 5.375 15.8906 5.86607 16.1138 6.49107ZM10.5781 14.3482C12.5871 14.3929 14.2388 12.7411 14.2388 10.6875C14.2388 10.0625 14.0603 9.4375 13.7478 8.85714C12.3192 6.44643 8.79241 6.44643 7.36384 8.85714C5.97991 11.3125 7.72098 14.3482 10.5781 14.3482ZM14.3728 7.74107C14.8192 7.74107 15.221 7.38393 15.221 6.89286C15.221 6.75893 15.1763 6.58036 15.0871 6.44643C14.7746 5.91071 13.971 5.91071 13.6138 6.44643C13.3013 7.02679 13.7031 7.74107 14.3728 7.74107ZM18.4353 0.6875C19.596 0.6875 20.5781 1.66964 20.5781 2.83036V18.5446C20.5781 19.75 19.596 20.6875 18.4353 20.6875H2.72098C1.51563 20.6875 0.578125 19.75 0.578125 18.5446V2.83036C0.578125 1.66964 1.51563 0.6875 2.72098 0.6875H18.4353ZM17.6317 13.6339C17.721 12.4732 17.721 8.94643 17.6317 7.78571C17.5871 6.625 17.3192 5.59821 16.5156 4.79464C15.6674 3.94643 14.6406 3.67857 13.5246 3.63393C12.3192 3.54464 8.79241 3.54464 7.6317 3.63393C6.47098 3.67857 5.4442 3.94643 4.64062 4.75C3.79241 5.59821 3.52455 6.625 3.47991 7.74107C3.39063 8.94643 3.39063 12.4732 3.47991 13.6339C3.52455 14.7946 3.79241 15.8214 4.64062 16.625C5.4442 17.4732 6.47098 17.7411 7.6317 17.7857C8.79241 17.875 12.3192 17.875 13.5246 17.7857C14.6406 17.7411 15.6674 17.4732 16.5156 16.625C17.3192 15.8214 17.5871 14.7946 17.6317 13.6339Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://linkedin.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Linked in profile for
                                </span>
                                <svg class="linkedin" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="linkedin__logo" d="M19.1007 0.6875C19.8597 0.6875 20.5293 1.35714 20.5293 2.16071V19.2589C20.5293 20.0625 19.8597 20.6875 19.1007 20.6875H1.91323C1.1543 20.6875 0.529297 20.0625 0.529297 19.2589V2.16071C0.529297 1.35714 1.1543 0.6875 1.91323 0.6875H19.1007ZM6.55608 17.8304V8.32143H3.60965V17.8304H6.55608ZM5.08287 6.98214C6.02037 6.98214 6.7793 6.22321 6.7793 5.28571C6.7793 4.34821 6.02037 3.54464 5.08287 3.54464C4.10073 3.54464 3.3418 4.34821 3.3418 5.28571C3.3418 6.22321 4.10073 6.98214 5.08287 6.98214ZM17.6722 17.8304V12.6071C17.6722 10.0625 17.0918 8.05357 14.1007 8.05357C12.6722 8.05357 11.69 8.85714 11.2882 9.61607H11.2436V8.32143H8.43108V17.8304H11.3775V13.1429C11.3775 11.8929 11.6007 10.6875 13.1632 10.6875C14.6811 10.6875 14.6811 12.1161 14.6811 13.1875V17.8304H17.6722Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://pinterest.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Flickr profile for
                                </span>
                                <svg class="pinterest" aria-label="Pinterest" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="pinterest__logo" d="M20.4824 2.83036V18.5446C20.4824 19.75 19.5003 20.6875 18.3396 20.6875H7.35742C7.80385 19.9732 8.33957 18.9018 8.56278 18.0536C8.69671 17.5625 9.27707 15.4643 9.27707 15.4643C9.63421 16.1339 10.661 16.7143 11.7771 16.7143C15.0806 16.7143 17.4467 13.6786 17.4467 9.88393C17.4467 6.26786 14.5003 3.54464 10.7056 3.54464C5.97349 3.54464 3.47349 6.75893 3.47349 10.1964C3.47349 11.8036 4.32171 13.8125 5.70564 14.4375C5.88421 14.5268 6.01814 14.4821 6.06278 14.3036C6.10742 14.125 6.28599 13.4107 6.37528 13.0536C6.37528 12.9643 6.37528 12.8304 6.28599 12.7411C5.83956 12.2054 5.48242 11.1786 5.48242 10.2411C5.48242 7.83036 7.31278 5.46429 10.3931 5.46429C13.1164 5.46429 14.9914 7.33929 14.9914 9.92857C14.9914 12.9196 13.5181 14.9732 11.5539 14.9732C10.4824 14.9732 9.67885 14.0804 9.90207 12.9643C10.2146 11.6696 10.8396 10.2857 10.8396 9.34822C10.8396 6.98214 7.44671 7.29464 7.44671 10.4643C7.44671 11.4018 7.80385 12.0714 7.80385 12.0714C6.37528 18.0089 6.15206 18.0982 6.46456 20.6875H6.55385H2.62528C1.41992 20.6875 0.482422 19.75 0.482422 18.5446V2.83036C0.482422 1.66964 1.41992 0.6875 2.62528 0.6875H18.3396C19.5003 0.6875 20.4824 1.66964 20.4824 2.83036Z" fill="white" />
                                </svg>
                            </a>
                        </li>

                        <li class="social-links__item">
                            <a href="https://twitter.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Twitter account for
                                </span>
                                <svg class="twitter" width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="twitter__bird" d="M17.8567 0.6875H21.2509L13.8374 9.15865L22.5586 20.6875H15.7317L10.3807 13.6971L4.26532 20.6875H0.866286L8.79417 11.625L0.433594 0.6875H7.43359L12.2653 7.07692L17.8567 0.6875ZM16.6644 18.6587H18.5442L6.40955 2.61058H4.39032L16.6644 18.6587Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://youtube.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Youtube account for
                                </span>
                                <svg class="youtube" width="29" height="21" viewBox="0 0 29 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="youtube__play-button" d="M28.3763 3.86458C29.0013 6.05208 29.0013 10.7396 29.0013 10.7396C29.0013 10.7396 29.0013 15.375 28.3763 17.6146C28.0638 18.8646 27.0742 19.8021 25.8763 20.1146C23.6367 20.6875 14.7826 20.6875 14.7826 20.6875C14.7826 20.6875 5.8763 20.6875 3.63672 20.1146C2.4388 19.8021 1.44922 18.8646 1.13672 17.6146C0.511719 15.375 0.511719 10.7396 0.511719 10.7396C0.511719 10.7396 0.511719 6.05208 1.13672 3.86458C1.44922 2.61458 2.4388 1.625 3.63672 1.3125C5.8763 0.6875 14.7826 0.6875 14.7826 0.6875C14.7826 0.6875 23.6367 0.6875 25.8763 1.3125C27.0742 1.625 28.0638 2.61458 28.3763 3.86458ZM11.8659 14.9583L19.2617 10.7396L11.8659 6.52083V14.9583Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="footer__contact">
                <div class="footer__contact-phone-and-email">
                    <div class="footer__label">Phone</div>
                    <a href="tel:(217) 344-0444" class="footer__contact-phone">
                        (217) 344-0444
                    </a>
                    <br>
                    <div class="footer__label">Email</div>
                    <a href="mailto:info@pixotech.com" class="footer__contact-email">
                        info@pixotech.com
                    </a>
                </div>
            </div>

        </div>
    </div>
    <div class="footer__bottom-container">
        <div class="footer__bottom-content">
            <div class="footer__brand">
                <a class="footer__brand-link" href="/"><span class="footer__brand-title" aria-label=""></span><svg width="223" height="32" viewBox="0 0 223 32" xmlns="http://www.w3.org/2000/svg" aria-label="E3 Alliance logo">
                        <title>E3 Alliance logo</title>
                        <g clip-path="url(#clip0_997_3522)">
                            <path d="M0 24.6336L6.64291 31.288H23.1947V24.6336H8.10924V19.0697H23.1947V12.6155H8.10924V7.49672H23.1947V0.842285H0V24.6336Z" />
                            <path d="M43.5676 13.0161L48.6998 7.49672L42.0569 0.842285H27.8823V7.49672H39.8574L34.4364 13.3722V18.8026H38.0356C41.1237 18.8026 42.6789 19.7818 42.6789 21.7626C42.6789 22.7641 42.2346 23.5653 41.3681 24.0994C40.5017 24.6558 39.3242 24.9229 37.8578 24.9229C36.4137 24.9229 34.9474 24.7003 33.4366 24.2775C31.9481 23.8324 30.615 23.2092 29.4153 22.408L26.3494 28.8844C27.8823 29.8414 29.7041 30.5758 31.7926 31.11C33.9032 31.6441 36.0138 31.8889 38.1466 31.8889C41.0571 31.8889 43.5232 31.4215 45.5005 30.4645C47.4778 29.5075 48.9664 28.2835 49.9217 26.7478C50.8993 25.2122 51.3658 23.543 51.3658 21.7403C51.3658 19.537 50.6993 17.6675 49.3441 16.1097C48.0333 14.574 46.1004 13.5503 43.5676 13.0161Z" />
                            <path d="M100.532 0.842285H95.2668V31.288H100.532V0.842285Z" />
                            <path d="M73.9606 0.842285L60.6748 31.288H66.118L69.2284 23.9882H83.4918L86.5577 31.288H92.1564L78.8706 0.842285H73.9606ZM71.1613 19.2922L76.3379 7.2074L81.5589 19.2922H71.1613Z" />
                            <path d="M116.195 31.288H121.439V10.9909L116.195 5.71631V31.288Z" />
                            <path d="M121.439 0.842285H116.195L121.439 6.11687V0.842285Z" />
                            <path d="M135.147 8.14209C133.28 8.14209 131.681 8.32013 130.37 8.65397C129.059 9.01006 127.748 9.45517 126.482 10.0338L127.904 14.2179C128.948 13.795 129.948 13.4389 130.97 13.1719C131.97 12.9048 133.125 12.7935 134.413 12.7935C136.213 12.7935 137.613 13.2164 138.568 14.0398C139.523 14.8855 140.012 16.0874 140.012 17.6675V18.0904C139.123 17.801 138.19 17.5785 137.235 17.4004C136.28 17.2224 135.102 17.1334 133.725 17.1334C132.414 17.1334 131.17 17.2892 130.037 17.5785C128.904 17.8901 127.926 18.3352 127.104 18.9583C126.282 19.5815 125.638 20.3604 125.193 21.2952C124.727 22.2299 124.505 23.3427 124.505 24.589V24.678C124.505 25.8353 124.727 26.8368 125.171 27.7271C125.615 28.595 126.215 29.3295 126.949 29.9304C127.682 30.5313 128.526 30.9764 129.503 31.2657C130.481 31.5773 131.525 31.7108 132.614 31.7108C134.347 31.7108 135.813 31.3992 137.013 30.7538C138.213 30.1307 139.212 29.3517 139.99 28.417V31.2212H145.167V17.7788C145.167 14.7298 144.345 12.3484 142.7 10.6792C141.056 8.9878 138.546 8.14209 135.147 8.14209ZM140.101 23.0311C140.101 23.7433 139.946 24.411 139.657 24.9896C139.346 25.5905 138.924 26.0801 138.39 26.503C137.835 26.9258 137.213 27.2374 136.48 27.4822C135.746 27.7048 134.947 27.8383 134.08 27.8383C132.836 27.8383 131.792 27.549 130.948 26.9704C130.103 26.3917 129.681 25.5683 129.681 24.4555V24.3664C129.681 23.2759 130.148 22.408 131.059 21.7848C131.97 21.1616 133.258 20.8278 134.902 20.8278C135.902 20.8278 136.857 20.9168 137.768 21.0949C138.679 21.2729 139.457 21.4732 140.123 21.7403V23.0311H140.101Z" />
                            <path d="M161.674 8.00879C160.785 8.00879 159.985 8.12007 159.297 8.34262C158.608 8.56518 157.941 8.8545 157.364 9.23285C156.786 9.6112 156.253 10.0341 155.808 10.5237C155.364 11.0133 154.964 11.5252 154.587 12.0593V8.47616H149.321V31.2882H154.587V18.4467C154.587 16.6662 155.053 15.2864 155.986 14.2849C156.919 13.2834 158.141 12.7938 159.652 12.7938C161.185 12.7938 162.385 13.2834 163.229 14.2404C164.073 15.1974 164.495 16.5772 164.495 18.3577V31.2882H169.761V16.7775C169.761 14.1068 169.05 11.9703 167.65 10.3901C166.25 8.80999 164.251 8.00879 161.674 8.00879Z" />
                            <path d="M188.134 26.481C187.201 27.0151 186.113 27.2822 184.891 27.2822C183.891 27.2822 182.958 27.0819 182.136 26.7035C181.292 26.3252 180.581 25.791 179.981 25.1234C179.381 24.4557 178.914 23.6768 178.581 22.7865C178.248 21.8963 178.092 20.9393 178.092 19.9378V19.8488C178.092 18.8695 178.248 17.9348 178.581 17.0446C178.914 16.1544 179.359 15.3754 179.936 14.73C180.514 14.0846 181.203 13.5727 182.003 13.1721C182.802 12.7938 183.691 12.5935 184.624 12.5935C185.935 12.5935 187.068 12.8605 187.957 13.3947C188.868 13.9288 189.712 14.6187 190.512 15.4422L193.755 11.948C192.689 10.7685 191.445 9.8115 190.023 9.09931C188.601 8.38713 186.801 8.00879 184.646 8.00879C182.958 8.00879 181.38 8.32037 179.914 8.96578C178.47 9.58894 177.204 10.4569 176.159 11.5252C175.093 12.6157 174.271 13.862 173.693 15.3309C173.094 16.7775 172.805 18.3132 172.805 19.9378V20.0268C172.805 21.6292 173.094 23.1649 173.693 24.6115C174.293 26.0581 175.115 27.3044 176.159 28.3727C177.226 29.441 178.47 30.2867 179.892 30.9098C181.336 31.533 182.891 31.8446 184.602 31.8446C186.824 31.8446 188.645 31.444 190.067 30.665C191.511 29.8638 192.778 28.8401 193.911 27.5715L190.756 24.4557C189.956 25.2569 189.09 25.9468 188.134 26.481Z" />
                            <path d="M214.751 11.681C213.84 10.5682 212.707 9.65571 211.351 9.01029C209.996 8.34262 208.396 8.00879 206.597 8.00879C204.953 8.00879 203.464 8.32037 202.109 8.94353C200.754 9.56668 199.576 10.4124 198.599 11.4807C197.599 12.5712 196.844 13.8175 196.288 15.2641C195.733 16.7107 195.466 18.2464 195.466 19.8933V19.9823C195.466 21.7405 195.777 23.3429 196.377 24.7895C196.977 26.2362 197.799 27.4825 198.865 28.5285C199.909 29.5745 201.154 30.3757 202.576 30.9544C203.997 31.533 205.53 31.8223 207.174 31.8223C209.263 31.8223 211.085 31.444 212.595 30.665C214.106 29.8861 215.395 28.8401 216.506 27.5492L213.44 24.8341C212.529 25.7243 211.596 26.4142 210.64 26.8593C209.685 27.3267 208.574 27.5492 207.286 27.5492C205.597 27.5492 204.153 27.0596 202.953 26.0581C201.754 25.0566 201.02 23.6322 200.732 21.7628H217.461C217.483 21.4957 217.505 21.2509 217.528 21.0061C217.55 20.7613 217.55 20.5165 217.55 20.2939C217.55 18.647 217.328 17.0891 216.861 15.598C216.35 14.1068 215.661 12.816 214.751 11.681ZM200.643 18.2909C200.865 16.5104 201.509 15.0638 202.553 13.951C203.598 12.8383 204.931 12.2819 206.53 12.2819C207.397 12.2819 208.152 12.4377 208.841 12.7492C209.507 13.0608 210.107 13.4837 210.596 14.0178C211.085 14.5519 211.462 15.1751 211.751 15.9095C212.04 16.644 212.218 17.4229 212.307 18.2686H200.643V18.2909Z" />
                            <path d="M218.461 9.5664C218.394 9.49963 218.283 9.43287 218.172 9.38836C218.061 9.34384 217.928 9.29933 217.772 9.25482C217.639 9.23257 217.528 9.18806 217.439 9.1658C217.35 9.14354 217.283 9.09903 217.217 9.07678C217.172 9.03227 217.128 9.01001 217.105 8.9655C217.083 8.92099 217.083 8.87648 217.083 8.80971C217.083 8.72069 217.128 8.63166 217.217 8.5649C217.305 8.49813 217.417 8.47587 217.572 8.47587C217.705 8.47587 217.839 8.49813 217.972 8.54264C218.105 8.58715 218.239 8.67618 218.372 8.7652L218.638 8.38685C218.483 8.27557 218.327 8.18655 218.15 8.11978C217.972 8.05302 217.794 8.03076 217.572 8.03076C217.439 8.03076 217.305 8.05302 217.172 8.09753C217.061 8.14204 216.95 8.18655 216.861 8.27557C216.772 8.34234 216.706 8.43136 216.661 8.54264C216.617 8.65392 216.594 8.7652 216.594 8.87648C216.594 9.01001 216.617 9.12129 216.661 9.21031C216.706 9.29933 216.772 9.38836 216.839 9.45512C216.928 9.52189 217.017 9.5664 217.15 9.61091C217.261 9.65542 217.417 9.69994 217.572 9.72219C217.705 9.74445 217.816 9.78896 217.905 9.81121C217.994 9.83347 218.061 9.87798 218.105 9.90024C218.15 9.94475 218.194 9.967 218.194 10.0115C218.216 10.056 218.216 10.1005 218.216 10.145C218.216 10.2563 218.172 10.3453 218.083 10.4121C217.994 10.4789 217.861 10.5011 217.705 10.5011C217.528 10.5011 217.35 10.4789 217.217 10.4121C217.061 10.3453 216.928 10.2563 216.794 10.1228L216.483 10.4789C216.661 10.6347 216.839 10.7459 217.061 10.835C217.261 10.9017 217.483 10.9463 217.705 10.9463C217.861 10.9463 217.994 10.924 218.127 10.8795C218.261 10.835 218.372 10.7905 218.461 10.7014C218.55 10.6347 218.616 10.5456 218.683 10.4344C218.727 10.3231 218.75 10.2118 218.75 10.0783C218.75 9.967 218.727 9.85572 218.683 9.7667C218.594 9.72219 218.527 9.63317 218.461 9.5664Z" />
                            <path d="M221.638 8.05322L220.749 9.43307L219.86 8.05322H219.327V10.9465H219.816V8.87668L220.727 10.2343H220.749L221.66 8.87668V10.9465H222.171V8.05322H221.638Z" />
                            <path d="M110.974 0.842285H105.709V31.288H110.974V0.842285Z" />
                        </g>
                        <defs>
                            <clipPath id="clip0_997_3522">
                                <rect width="222.171" height="31.1579" transform="translate(0 0.842285)" />
                            </clipPath>
                        </defs>
                    </svg>
                </a>
            </div>
            <div class="footer__copyright">&copy; 2024 All rights reserved. <a href="#">Privacy Policy</a></div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer__top-container">
        <div class="footer__top-content">
                <ul class="footer__links-list">
                    {% for item in footerLinks.items %}
                        <li class="footer__links-list-item">
                            <a href="{{ item.url }}" class="footer__links-list-item-link" target="{{ item.isExternal ? '_blank' : '_self' }}">
                                {{ item.title }}

                                {% if item.isExternal %}
                                    {% include 'bits/icons/external-link.twig' %}
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                <div class="footer__information">
                    {% if contactInfo.address %}
                        <div class="footer__contact-address">
                            <div class="footer__label">Address</div>
                            <a target="_blank"
                               href="https://maps.google.com/maps?q={{ contactInfo.address|url_encode }}"
                               class="footer__address">
                                {{ contactInfo.address|nl2br }}
                            </a>
                        </div>
                    {% endif %}
                    {% if
                        contactInfo.facebookLink or
                        contactInfo.instagramLink or
                        contactInfo.linkedInLink or
                        contactInfo.pinterest or
                        contactInfo.twitterLink or
                        contactInfo.youTubeLink
                    %}
                        <nav class="footer__social" aria-label="footer social media links">
                            <div class="footer__label">Stay Connected</div>
                            {% include 'bits/social-links/social-links.twig' %}
                        </nav>
                    {% endif %}
                </div>
                <div class="footer__contact">
                    {% if contactInfo.phone or contactInfo.email %}
                        <div class="footer__contact-phone-and-email">
                            {% if contactInfo.phone %}
                                <div class="footer__label">Phone</div>
                                <a href="tel:{{ contactInfo.phone }}" class="footer__contact-phone">
                                    {{ contactInfo.phone }}
                                </a>
                            {% endif %}
                            <br>
                            {% if contactInfo.email %}
                                <div class="footer__label">Email</div>
                                <a href="mailto:{{ contactInfo.email }}" class="footer__contact-email">
                                    {{ contactInfo.email }}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>

            </div>
    </div>
    <div class="footer__bottom-container">
        <div class="footer__bottom-content">
            <div class="footer__brand">
                <a class="footer__brand-link" href="/" ><span class="footer__brand-title" aria-label="{{ site.name }}">{{ site.name }}</span>{% include 'bits/logos/footer-logo.twig' %}</a>
            </div>
            <div class="footer__copyright">&copy; {{ 'now' | date('Y') }} {{site.name}} All rights reserved. {{ contactInfo.copyright }}</div>
        </div>
    </div>
</div>
{
  "contactInfo": {
    "phone": "(217) 344-0444",
    "email": "info@pixotech.com",
    "address": "Pixo\n110 W. Main St.\nChampaign, IL 61820",
    "copyright": "<a href=\"#\">Privacy Policy</a>",
    "facebookLink": "https://facebook.com",
    "pinterestLink": "https://pinterest.com",
    "linkedInLink": "https://linkedin.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youtubeLink": "https://youtube.com"
  },
  "footerLinks": {
    "items": [
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#",
        "isExternal": true
      },
      {
        "title": "Additional link",
        "url": "#"
      }
    ]
  }
}
  • Content:
    breakpointSmall = 856px
    breakpointLarge = 1300px
    
    .footer
        --backgroundColor sapphire
        --iconbackgroundColor white
        --listLinkTextColorActive greenApple
        --listLinkTextColor white
    
        background-color var(--backgroundColor)
    
        &__top-content
        &__bottom-content
            @extends $contentContainer
    
        &__top-wrapper
            display flex
    
        &__top-content
            padding-top 48px
            padding-bottom 48px
    
            +above(breakpointSmall)
                display flex
                flex 3
    
        &__brand
            margin-bottom 16px
            cursor pointer
    
            svg
                path
                    fill var(--iconbackgroundColor)
    
            +above(breakpointSmall)
                flex 0 0 100%
    
            +above(breakpointLarge)
                flex 1
    
        &__brand-link
            &:hover
            &:focus
            &:active
                svg
                    path
                        fill var(--listLinkTextColorActive)
    
        &__brand-title
            @extends $visually-hidden
    
        &__contact-address
            &:hover
            &:focus
            &:active
                color greenApple
    
            +above(breakpointSmall)
                padding-right 32px
                flex 1
    
        &__contact-phone-and-email
            +above(breakpointSmall)
                flex 1
    
        &__contact-address
        &__contact-phone-and-email
            font-weight 600
            font-size 18px
            color white
            margin-bottom 24px
            margin-right 32px
            border-top solid 2px var(--borderColor)
    
            +below(breakpointSmall)
                margin-right 0
    
    
        &__links
            +above(breakpointSmall)
                padding-right 32px
                flex 1
    
        &__copyright
            font-size 18px
            color white
    
            a
                &:hover
                &:focus
                &:active
                    color greenApple
    
        &__label
            font-size 20px
            font-weight 600
            color greenApple
    
        &__contact
            display flex
            flex 1
    
        &__contact-phone
        &__contact-email
            display inline-block
    
            &:hover
            &:focus
            &:active
                color greenApple
    
        &__contact-phone
            margin-bottom 24px
    
        &__information
            flex-direction column
            flex-wrap wrap
    
            +above(breakpointSmall)
                flex 4
                margin-bottom 48px
    
            +above(breakpointLarge)
                flex 2
                align-content flex-start
    
        &__social
            margin-bottom 16px
    
        &__links-list
            display flex
            flex-direction column
            flex 6
            margin-bottom 24px
    
            +above(breakpointSmall)
                margin-bottom 48px
    
        &__links-list-item:not(:last-child)
            margin-bottom 16px
    
        &__links-list-item-link
            color var(--listLinkTextColor)
            font-size 18px
            font-weight 600
            text-decoration underline
    
            svg
                width 21px
                height 21px
                vertical-align text-bottom
                margin-left 5px
                margin-bottom 2px
    
                path
                    fill var(--listLinkTextColor)
    
            &:focus
            &:hover
            &:active
                color var(--listLinkTextColorActive)
    
                svg
                    path
                        fill var(--listLinkTextColorActive)
    
        &__bottom-container
            background-color darkSapphire
            padding-bottom 24px
            padding-top 24px
    
  • URL: /components/raw/footer/footer.styl
  • Filesystem Path: patterns/partials/footer/footer.styl
  • Size: 3.3 KB

No notes defined.