Footer

<div class="footer" data-footer>
    <div class="footer__wrapper">
        <div class="footer__content-container">
            <div class="footer__main-content">
                <div class="footer__brand">
                    <a href="/">
                        <span class="footer__logo-text">National Network of Public Health Institutes</span>
                        <svg role="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" width="191.607" height="80.354" viewBox="0 0 191.607 80.354">
                            <title>National Network of Public Health Institutes (NNPHI)</title>
                            <path fill="#520b4e" d="M29.015 0v13.252c0 4.54.07 9.08.228 13.673L16.345.105H0v41.022h10.745V30.78c0-6.652-.122-13.269-.35-19.938L25.13 41.11h14.63V.106L29.015.018z" />
                            <path fill="#4abded" d="M152.6.106v15.046h-17.378V.106h-11.2v41.021h11.2V24.69H152.6v16.437h11.2V.106ZM179.568.106h-11.2v41.021h11.2z" />
                            <path fill="#520b4e" d="M84.105 18.003V.106H73.36v13.146c0 1.724 0 3.009.035 4.751z" />
                            <path fill="#4abded" d="M88.672 41.127h11.2l-.07-10.26h-11.2ZM65.398 28.932h42.017c8.663 0 14.84-4.083 16.625-10.454.35-1.232.525-2.57.525-3.96 0-1.39-.175-2.78-.525-4.03C122.308 4.137 116.375.107 107.993.107h-19.32v17.897h11.2v-8.94h6.562c4.69 0 6.685 1.9 6.685 5.456 0 3.555-1.995 5.455-6.685 5.455H61.198" />
                            <path fill="#520b4e" d="m75.565 30.867-2.047-4.117L60.69.088H44.345V41.11H55.09V30.762c0-6.67-.122-13.27-.332-19.939l14.735 30.27h14.63v-10.26" />
                            <path fill="#4abded" d="M184.275.757h-1.418V.088h3.64v.669h-1.417v3.889h-.788V.756ZM188.895 4.646 187.74.968v3.678h-.77V.106h1.225l1.102 3.625 1.085-3.625h1.225v4.54h-.77V.968l-1.155 3.678h-.805z" />
                            <path fill="#21415b" d="M1.855 62.017H.14V49.135h2.223L9.17 59.799c-.035-1.619-.052-3.255-.052-4.874v-5.79h1.715v12.882H8.61L1.803 51.352c.035 1.795.052 3.573.052 5.332V62zM19.023 62.017c-.158-.546-.228-1.109-.245-1.954-.508 1.232-1.68 2.165-3.308 2.165-1.627 0-2.607-.722-2.607-2.482 0-1.76.927-2.516 3.36-2.903l2.52-.423v-.475c0-1.584-.823-2.217-2.118-2.217s-2.065.422-2.152 2.147h-1.418c.07-2.394 1.768-3.467 3.675-3.467 1.908 0 3.553 1.285 3.553 3.379v3.537c0 1.197.105 2.041.28 2.693zm-2.958-1.074c1.47 0 2.713-.81 2.713-2.323v-1.109l-1.978.317c-1.662.264-2.345.845-2.345 1.76s.508 1.338 1.61 1.338zM25.34 62.105c-1.645 0-2.467-.792-2.467-2.534v-5.632h-1.295v-1.32h1.295v-1.988h1.575v1.988h2.135v1.32h-2.135v5.42c0 1.039.385 1.39 1.417 1.39h.718v1.268c-.333.052-.7.088-1.243.088zM29.628 49.135v1.619h-1.575v-1.62zm0 3.502v9.38h-1.575v-9.38zM35.98 52.408c2.555 0 4.55 1.918 4.55 4.91s-2.012 4.91-4.55 4.91c-2.537 0-4.55-1.918-4.55-4.91s2.013-4.91 4.55-4.91zm0 8.5c1.575 0 2.905-1.39 2.905-3.59s-1.33-3.59-2.905-3.59c-1.575 0-2.905 1.39-2.905 3.59s1.33 3.59 2.905 3.59zM43.873 52.637v1.883c.472-1.25 1.505-2.094 3.115-2.094 1.61 0 3.097 1.425 3.097 3.607v5.984H48.51v-5.65c0-1.583-.805-2.604-2.275-2.604-1.47 0-2.328 1.003-2.328 2.605v5.649h-1.574v-9.38zM58.048 62.017c-.158-.546-.228-1.109-.245-1.954-.508 1.232-1.68 2.165-3.308 2.165-1.627 0-2.607-.722-2.607-2.482 0-1.76.927-2.516 3.36-2.903l2.52-.423v-.475c0-1.584-.823-2.217-2.118-2.217s-2.065.422-2.152 2.147H52.08c.07-2.394 1.768-3.467 3.675-3.467 1.908 0 3.553 1.285 3.553 3.379v3.537c0 1.197.105 2.041.28 2.693zm-2.958-1.074c1.47 0 2.713-.81 2.713-2.323v-1.109l-1.978.317c-1.662.264-2.345.845-2.345 1.76s.508 1.338 1.61 1.338zM63.315 48.906v13.093H61.74V48.906ZM72.047 62.017h-1.714V49.135h2.222l6.807 10.664c-.034-1.619-.052-3.255-.052-4.874v-5.79h1.715v12.882h-2.223l-6.807-10.665c.035 1.795.052 3.573.052 5.332V62zM84.578 57.423c.052 2.183 1.295 3.485 2.922 3.485 1.628 0 2.188-.95 2.415-2.041h1.435c-.297 2.006-1.82 3.36-3.885 3.36-2.065 0-4.48-1.917-4.48-4.91 0-2.99 1.803-4.909 4.41-4.909 2.608 0 3.99 2.041 3.955 5.015zm.105-1.249h5.057c-.21-1.83-1.225-2.464-2.345-2.464s-2.397.915-2.712 2.464zM95.778 62.105c-1.645 0-2.468-.792-2.468-2.534v-5.632h-1.295v-1.32h1.295v-1.988h1.575v1.988h2.135v1.32h-2.135v5.42c0 1.039.385 1.39 1.417 1.39h.718v1.268a7.56 7.56 0 0 1-1.242.088zM100.1 62.017l-2.765-9.38h1.662l2.24 8.324h.053l2.187-8.324h2.118l2.1 8.324h.07l2.205-8.324h1.575l-2.853 9.38h-2.152l-2.083-7.779-2.222 7.779h-2.153zM116.69 52.408c2.555 0 4.55 1.918 4.55 4.91s-2.012 4.91-4.55 4.91c-2.537 0-4.55-1.918-4.55-4.91s2.013-4.91 4.55-4.91zm0 8.5c1.575 0 2.905-1.39 2.905-3.59s-1.33-3.59-2.905-3.59c-1.575 0-2.905 1.39-2.905 3.59s1.33 3.59 2.905 3.59zM124.582 52.637v2.323c.403-1.443 1.313-2.411 2.573-2.411s.595.017.805.088v1.372h-.91c-1.505 0-2.415.74-2.415 2.728v5.28h-1.575v-9.38h1.54zM133.14 56.65l4.288 5.35h-1.908l-1.68-2.166c-.56-.721-1.137-1.443-1.68-2.164l-1.26 1.337V62h-1.575V48.906h1.575v8.342l4.165-4.611h1.873l-3.78 4.03zM145.758 62.175c-.368 0-.7-.07-1.033-.211a2.415 2.415 0 0 1-.84-.634c-.245-.281-.42-.633-.56-1.038a4.184 4.184 0 0 1-.21-1.373c0-.51.14-1.39.403-2.076a6.355 6.355 0 0 1 1.05-1.813c.437-.528.927-.95 1.47-1.285.56-.316 1.12-.492 1.715-.492s.752.07 1.067.21c.333.142.613.353.84.634.228.282.42.599.543.986.14.387.21.81.21 1.267 0 .686-.14 1.373-.403 2.059a7.425 7.425 0 0 1-1.05 1.865 5.727 5.727 0 0 1-1.487 1.355c-.56.352-1.138.528-1.715.528zm.087-.81c.368 0 .735-.193 1.085-.563.368-.387.683-.862.963-1.443.28-.58.525-1.214.7-1.9a7.912 7.912 0 0 0 .262-1.954c0-.616-.105-.968-.297-1.179-.193-.211-.473-.317-.823-.317s-.472.088-.717.247a3.163 3.163 0 0 0-.683.686c-.21.3-.42.634-.612 1.003-.193.387-.35.775-.49 1.197-.14.422-.245.845-.315 1.285-.07.44-.105.862-.105 1.267 0 .598.105 1.038.297 1.284.193.247.438.37.735.37zM153.475 60.82c-.28 1.109-.56 2.006-.84 2.71-.28.704-.577 1.25-.91 1.654-.315.405-.665.669-1.05.827-.367.159-.787.23-1.26.23-.472 0-.822-.124-1.12-.353-.297-.246-.437-.528-.437-.88s.07-.492.21-.633c.14-.159.332-.229.577-.229.245 0 .385.053.473.176.087.123.157.246.21.387.052.14.122.264.21.387.07.123.227.176.437.176s.473-.123.683-.387c.21-.264.367-.598.472-1.02l2.345-9.152h-1.557l.21-.739h1.54c.245-.968.49-1.795.77-2.481.28-.687.577-1.25.91-1.69.332-.44.665-.756 1.032-.95.368-.194.753-.3 1.173-.3.63 0 1.155.142 1.575.406.402.264.612.598.612 1.003 0 .404-.07.457-.21.633a.696.696 0 0 1-.577.264c-.245 0-.368-.035-.473-.105a.873.873 0 0 1-.262-.3 1.529 1.529 0 0 1-.123-.37l-.105-.369a.683.683 0 0 0-.192-.299c-.088-.07-.21-.105-.385-.105-.175 0-.42.123-.63.352-.21.228-.42.563-.613.967-.192.423-.385.916-.542 1.479-.175.58-.333 1.196-.473 1.883h1.628l-.228.739h-1.575l-1.522 6.124zM.122 67.243h5.53c2.783 0 4.585 1.514 4.585 3.995 0 2.482-1.82 3.995-4.585 3.995H1.855v4.91H.14V67.26zm5.513 6.494c1.837 0 2.835-.933 2.835-2.516 0-1.584-.998-2.517-2.835-2.517H1.837v5.016h3.798zM18.043 80.125v-1.9c-.473 1.25-1.523 2.112-3.133 2.112s-2.975-1.39-2.975-3.538v-6.054h1.575v5.65c0 1.76.787 2.604 2.257 2.604 1.47 0 2.24-1.003 2.24-2.604v-5.65h1.575v9.38zM23.677 67.032v5.913c.455-1.39 1.663-2.41 3.185-2.41 2.223 0 4.06 1.917 4.06 4.91 0 2.99-1.942 4.91-4.007 4.91-2.065 0-2.8-1.004-3.29-2.394v2.182h-1.54V67.05h1.575zm5.6 8.412c0-2.235-1.277-3.59-2.87-3.59-1.592 0-2.765.986-2.765 3.379v.44c0 2.376 1.383 3.379 2.765 3.379 1.383 0 2.87-1.355 2.87-3.59zM34.3 67.032v13.093h-1.575V67.032ZM38.378 67.243v1.62h-1.575v-1.62zm0 3.502v9.38h-1.575v-9.38zM47.04 74.001c-.297-1.337-.997-2.147-2.38-2.147-1.382 0-2.817 1.355-2.817 3.59s1.33 3.59 2.817 3.59c1.488 0 2.153-.81 2.433-2.147h1.47c-.263 2.06-1.628 3.467-3.92 3.467-2.293 0-4.463-1.918-4.463-4.91s2.1-4.91 4.463-4.91c2.362 0 3.657 1.355 3.85 3.467h-1.47zM56.56 67.243V72.7h7.245v-5.456h1.715v12.882h-1.715v-5.948H56.56v5.948h-1.715V67.243zM69.108 75.55c.052 2.182 1.295 3.484 2.922 3.484 1.628 0 2.188-.95 2.415-2.041h1.435c-.297 2.006-1.82 3.361-3.885 3.361-2.065 0-4.48-1.918-4.48-4.91s1.803-4.91 4.41-4.91c2.608 0 3.99 2.042 3.955 5.016zm.105-1.267h5.057c-.21-1.83-1.225-2.464-2.345-2.464s-2.397.915-2.712 2.464zM83.195 80.125c-.157-.545-.227-1.108-.245-1.953-.507 1.232-1.68 2.164-3.307 2.164-1.628 0-2.608-.721-2.608-2.48 0-1.76.928-2.517 3.36-2.905l2.52-.422v-.475c0-1.584-.822-2.217-2.117-2.217s-2.065.422-2.153 2.147h-1.417c.07-2.394 1.767-3.467 3.675-3.467 1.907 0 3.552 1.284 3.552 3.379v3.537c0 1.197.105 2.041.28 2.692zM80.22 79.07c1.47 0 2.713-.81 2.713-2.323v-1.108l-1.978.317c-1.662.264-2.345.844-2.345 1.76 0 .915.508 1.337 1.61 1.337zM88.463 67.032v13.093h-1.575V67.032ZM93.59 80.213c-1.645 0-2.467-.792-2.467-2.534v-5.631h-1.295v-1.32h1.295v-1.989h1.575v1.989h2.134v1.32h-2.134v5.42c0 1.038.384 1.39 1.417 1.39h.717v1.267a7.55 7.55 0 0 1-1.242.088zM97.878 67.032v5.508c.49-1.196 1.505-2.006 3.08-2.006 1.575 0 3.097 1.426 3.097 3.608v5.983h-1.575v-5.649c0-1.584-.805-2.604-2.275-2.604-1.47 0-2.327 1.003-2.327 2.604v5.65h-1.575V67.031ZM112.717 67.243v12.882h-1.715V67.243zM116.952 70.745v1.883c.473-1.25 1.505-2.094 3.115-2.094 1.61 0 3.098 1.426 3.098 3.608v5.983h-1.575v-5.649c0-1.584-.805-2.604-2.275-2.604-1.47 0-2.328 1.003-2.328 2.604v5.65h-1.575v-9.38zM126.21 77.486c.105.95.787 1.583 2.292 1.583s1.96-.492 1.96-1.39c0-.897-.805-1.25-2.187-1.584-2.065-.528-3.255-1.144-3.255-2.868 0-1.725 1.4-2.693 3.465-2.693s3.342 1.109 3.342 2.763h-1.452c-.07-.968-.77-1.478-1.908-1.478-1.137 0-1.837.317-1.837 1.302 0 .986.752 1.214 2.047 1.531 2.135.528 3.413 1.162 3.413 2.922 0 1.76-1.435 2.78-3.605 2.78s-3.728-1.161-3.728-2.868zM136.36 80.213c-1.645 0-2.467-.792-2.467-2.534v-5.631h-1.295v-1.32h1.295v-1.989h1.575v1.989h2.135v1.32h-2.135v5.42c0 1.038.385 1.39 1.417 1.39h.718v1.267c-.333.053-.7.088-1.243.088zM140.648 67.243v1.62h-1.575v-1.62zm0 3.502v9.38h-1.575v-9.38zM145.793 80.213c-1.645 0-2.468-.792-2.468-2.534v-5.631h-1.295v-1.32h1.295v-1.989h1.575v1.989h2.135v1.32H144.9v5.42c0 1.038.385 1.39 1.418 1.39h.717v1.267a7.55 7.55 0 0 1-1.242.088zM154.542 80.125v-1.9c-.472 1.25-1.522 2.112-3.132 2.112s-2.975-1.39-2.975-3.538v-6.054h1.575v5.65c0 1.76.787 2.604 2.257 2.604 1.47 0 2.24-1.003 2.24-2.604v-5.65h1.575v9.38zM161.21 80.213c-1.645 0-2.467-.792-2.467-2.534v-5.631h-1.295v-1.32h1.295v-1.989h1.575v1.989h2.135v1.32h-2.135v5.42c0 1.038.385 1.39 1.417 1.39h.718v1.267c-.333.053-.7.088-1.243.088zM164.797 75.55c.053 2.182 1.295 3.484 2.923 3.484 1.627 0 2.187-.95 2.415-2.041h1.435c-.298 2.006-1.82 3.361-3.885 3.361-2.065 0-4.48-1.918-4.48-4.91s1.802-4.91 4.41-4.91c2.607 0 3.99 2.042 3.955 5.016zm.123-1.267h5.057c-.21-1.83-1.225-2.464-2.345-2.464s-2.397.915-2.712 2.464zM173.968 77.486c.105.95.787 1.583 2.292 1.583s1.96-.492 1.96-1.39c0-.897-.805-1.25-2.188-1.584-2.065-.528-3.255-1.144-3.255-2.868 0-1.725 1.401-2.693 3.466-2.693 2.065 0 3.342 1.109 3.342 2.763h-1.453c-.07-.968-.77-1.478-1.907-1.478-1.138 0-1.838.317-1.838 1.302 0 .986.753 1.214 2.048 1.531 2.135.528 3.413 1.162 3.413 2.922 0 1.76-1.435 2.78-3.605 2.78s-3.728-1.161-3.728-2.868z" />
                        </svg>
                    </a>
                </div>
                <ul class="footer__navigation">
                    <li class="footer__main-nav-item">
                        <a class="footer__main-nav-item-link" href="#">Workforce resources</a>
                        <ul class="footer__main-nav-item-children">
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Resource Directory</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Trainings</a>
                            </li>
                        </ul>
                    </li>
                    <li class="footer__main-nav-item">
                        <a class="footer__main-nav-item-link" href="#">Programs & Projects</a>
                        <ul class="footer__main-nav-item-children">
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Data Modernization</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Environmental Health and Emergency Preparedness</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Evaluation and Impact</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Multisector Strategies and Population Health</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Public Health Events and Convenings Management</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Public Health Infrastructure Grant</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Public health training</a>
                            </li>
                        </ul>
                    </li>
                    <li class="footer__main-nav-item">
                        <a class="footer__main-nav-item-link" href="#">Explore the Network</a>
                        <ul class="footer__main-nav-item-children">
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Member Directory</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Membership paths</a>
                            </li>
                        </ul>
                    </li>
                    <li class="footer__main-nav-item">
                        <a class="footer__main-nav-item-link" href="#">Partner with us</a>
                    </li>
                    <li class="footer__main-nav-item">
                        <a class="footer__main-nav-item-link" href="#">About</a>
                        <ul class="footer__main-nav-item-children">
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Blog</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Events</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Newsletters</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Signature programs</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Contact us</a>
                            </li>
                            <li class="footer__main-nav-child">
                                <a class="footer__main-nav-child-link" href="#">Meet the team</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer__utility-links-container">
            <ul class="footer__links-list">
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Subscribe to our newsletter
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Explore membership benefits
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        See career opportunities
                    </a>
                </li>
            </ul>
            <nav class="footer__social" aria-label="footer social media links">
                <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 role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="currentColor">
                                <title>facebook</title>
                                <g clip-path="url(#facebook-clip-path)">
                                    <path d="M58.08 6.24c-.95-1.53-2.21-2.85-3.69-3.87A13.198 13.198 0 0 0 46.83 0c-2.81 0-5.42.87-7.56 2.36-.8.56-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.33 2.03 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.03zm-14.81 8.51v4.47c0 .24 0 .24-.24.24h-2.49c-.16 0-.22-.04-.22-.21v-8.97c0-.17.05-.22.22-.21h2.53c.17 0 .22.05.22.22v4.47zm-1.48-5.94c-.95 0-1.7-.75-1.7-1.69 0-.96.75-1.71 1.69-1.71s1.71.76 1.7 1.71c0 .94-.76 1.69-1.7 1.69zm12.14 10.65h-2.49c-.19 0-.24-.07-.24-.25 0-1.54.01-3.08 0-4.62 0-.39-.04-.79-.13-1.18-.15-.66-.59-.98-1.27-.99-.22 0-.44 0-.65.06-.68.17-.97.68-1.08 1.31-.05.3-.07.62-.07.93v4.49c0 .19-.05.24-.24.24h-2.49c-.19 0-.24-.06-.24-.24v-8.92c0-.18.04-.24.23-.24h2.4c.17 0 .22.06.22.22-.01.33 0 .67 0 1.06.46-.72 1.04-1.19 1.81-1.39a4.07 4.07 0 0 1 2.75.23c.89.4 1.31 1.17 1.52 2.08.16.66.19 1.34.19 2.01v4.96c0 .17-.05.23-.23.23zM91.14 6.24c-.95-1.53-2.21-2.84-3.68-3.87A13.254 13.254 0 0 0 79.89 0c-2.81 0-5.42.88-7.56 2.37-.81.55-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.36 6.71 3.6 9.08l.97.94c2.33 2.02 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.04 13.04 0 0 0 2.63-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04zm-4.1 10.63c-.17.64-.67 1.15-1.32 1.32-1.16.31-5.83.31-5.83.31s-4.67 0-5.83-.31c-.65-.17-1.15-.68-1.32-1.32-.32-1.16-.32-3.59-.32-3.59s0-2.43.32-3.6c.17-.64.67-1.15 1.32-1.32 1.16-.31 5.83-.31 5.83-.31s4.67 0 5.83.31c.65.17 1.15.68 1.32 1.32.32 1.17.32 3.6.32 3.6s0 2.43-.32 3.59zm-8.64-1.35 3.88-2.24-3.88-2.24zM24.53 6.24c-.96-1.53-2.21-2.84-3.69-3.87a13.254 13.254 0 0 0-15.13 0c-.8.55-1.54 1.2-2.2 1.92A13.206 13.206 0 0 0 0 13.28c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.15 1.86 4.9 3.05 7.93 3.23v-8.79H9.29v-3.67h3.21v-2.79c0-3.18 1.89-4.92 4.79-4.92 1.4 0 2.85.23 2.85.23v3.13h-1.61c-1.58 0-2.07.97-2.07 1.97v2.38h3.52l-.56 3.67h-2.96v8.42c2.04-.5 3.89-1.47 5.43-2.79a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04z" />
                                </g>
                                <defs>
                                    <clipPath id="facebook-clip-path">
                                        <path fill="#fff" d="M0 0h93.16v26.55H0z" />
                                    </clipPath>
                                </defs>
                            </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 role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="currentColor">
                                <title>linkedin</title>
                                <g clip-path="url(#linkedin-clip-path)" transform="translate(-33.56)">
                                    <path d="M58.08 6.24c-.95-1.53-2.21-2.85-3.69-3.87A13.198 13.198 0 0 0 46.83 0c-2.81 0-5.42.87-7.56 2.36-.8.56-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.33 2.03 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.03zm-14.81 8.51v4.47c0 .24 0 .24-.24.24h-2.49c-.16 0-.22-.04-.22-.21v-8.97c0-.17.05-.22.22-.21h2.53c.17 0 .22.05.22.22v4.47zm-1.48-5.94c-.95 0-1.7-.75-1.7-1.69 0-.96.75-1.71 1.69-1.71s1.71.76 1.7 1.71c0 .94-.76 1.69-1.7 1.69zm12.14 10.65h-2.49c-.19 0-.24-.07-.24-.25 0-1.54.01-3.08 0-4.62 0-.39-.04-.79-.13-1.18-.15-.66-.59-.98-1.27-.99-.22 0-.44 0-.65.06-.68.17-.97.68-1.08 1.31-.05.3-.07.62-.07.93v4.49c0 .19-.05.24-.24.24h-2.49c-.19 0-.24-.06-.24-.24v-8.92c0-.18.04-.24.23-.24h2.4c.17 0 .22.06.22.22-.01.33 0 .67 0 1.06.46-.72 1.04-1.19 1.81-1.39a4.07 4.07 0 0 1 2.75.23c.89.4 1.31 1.17 1.52 2.08.16.66.19 1.34.19 2.01v4.96c0 .17-.05.23-.23.23zM91.14 6.24c-.95-1.53-2.21-2.84-3.68-3.87A13.254 13.254 0 0 0 79.89 0c-2.81 0-5.42.88-7.56 2.37-.81.55-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.36 6.71 3.6 9.08l.97.94c2.33 2.02 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.04 13.04 0 0 0 2.63-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04zm-4.1 10.63c-.17.64-.67 1.15-1.32 1.32-1.16.31-5.83.31-5.83.31s-4.67 0-5.83-.31c-.65-.17-1.15-.68-1.32-1.32-.32-1.16-.32-3.59-.32-3.59s0-2.43.32-3.6c.17-.64.67-1.15 1.32-1.32 1.16-.31 5.83-.31 5.83-.31s4.67 0 5.83.31c.65.17 1.15.68 1.32 1.32.32 1.17.32 3.6.32 3.6s0 2.43-.32 3.59zm-8.64-1.35 3.88-2.24-3.88-2.24zM24.53 6.24c-.96-1.53-2.21-2.84-3.69-3.87a13.254 13.254 0 0 0-15.13 0c-.8.55-1.54 1.2-2.2 1.92A13.206 13.206 0 0 0 0 13.28c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.15 1.86 4.9 3.05 7.93 3.23v-8.79H9.29v-3.67h3.21v-2.79c0-3.18 1.89-4.92 4.79-4.92 1.4 0 2.85.23 2.85.23v3.13h-1.61c-1.58 0-2.07.97-2.07 1.97v2.38h3.52l-.56 3.67h-2.96v8.42c2.04-.5 3.89-1.47 5.43-2.79a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04z" />
                                </g>
                                <defs>
                                    <clipPath id="linkedin-clip-path">
                                        <path d="M0 0h93.16v26.55H0z" />
                                    </clipPath>
                                </defs>
                            </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 role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="currentColor">
                                <title>youtube</title>
                                <g clip-path="url(#youtube-clip-path)" transform="translate(-66.62)">
                                    <path d="M58.08 6.24c-.95-1.53-2.21-2.85-3.69-3.87A13.198 13.198 0 0 0 46.83 0c-2.81 0-5.42.87-7.56 2.36-.8.56-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.33 2.03 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.03zm-14.81 8.51v4.47c0 .24 0 .24-.24.24h-2.49c-.16 0-.22-.04-.22-.21v-8.97c0-.17.05-.22.22-.21h2.53c.17 0 .22.05.22.22v4.47zm-1.48-5.94c-.95 0-1.7-.75-1.7-1.69 0-.96.75-1.71 1.69-1.71s1.71.76 1.7 1.71c0 .94-.76 1.69-1.7 1.69zm12.14 10.65h-2.49c-.19 0-.24-.07-.24-.25 0-1.54.01-3.08 0-4.62 0-.39-.04-.79-.13-1.18-.15-.66-.59-.98-1.27-.99-.22 0-.44 0-.65.06-.68.17-.97.68-1.08 1.31-.05.3-.07.62-.07.93v4.49c0 .19-.05.24-.24.24h-2.49c-.19 0-.24-.06-.24-.24v-8.92c0-.18.04-.24.23-.24h2.4c.17 0 .22.06.22.22-.01.33 0 .67 0 1.06.46-.72 1.04-1.19 1.81-1.39a4.07 4.07 0 0 1 2.75.23c.89.4 1.31 1.17 1.52 2.08.16.66.19 1.34.19 2.01v4.96c0 .17-.05.23-.23.23zM91.14 6.24c-.95-1.53-2.21-2.84-3.68-3.87A13.254 13.254 0 0 0 79.89 0c-2.81 0-5.42.88-7.56 2.37-.81.55-1.54 1.2-2.2 1.92a13.206 13.206 0 0 0-3.51 8.99c0 3.47 1.36 6.71 3.6 9.08l.97.94c2.33 2.02 5.37 3.25 8.7 3.25 3.33 0 6.3-1.2 8.62-3.18a13.04 13.04 0 0 0 2.63-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04zm-4.1 10.63c-.17.64-.67 1.15-1.32 1.32-1.16.31-5.83.31-5.83.31s-4.67 0-5.83-.31c-.65-.17-1.15-.68-1.32-1.32-.32-1.16-.32-3.59-.32-3.59s0-2.43.32-3.6c.17-.64.67-1.15 1.32-1.32 1.16-.31 5.83-.31 5.83-.31s4.67 0 5.83.31c.65.17 1.15.68 1.32 1.32.32 1.17.32 3.6.32 3.6s0 2.43-.32 3.59zm-8.64-1.35 3.88-2.24-3.88-2.24zM24.53 6.24c-.96-1.53-2.21-2.84-3.69-3.87a13.254 13.254 0 0 0-15.13 0c-.8.55-1.54 1.2-2.2 1.92A13.206 13.206 0 0 0 0 13.28c0 3.47 1.37 6.71 3.6 9.08l.97.94c2.15 1.86 4.9 3.05 7.93 3.23v-8.79H9.29v-3.67h3.21v-2.79c0-3.18 1.89-4.92 4.79-4.92 1.4 0 2.85.23 2.85.23v3.13h-1.61c-1.58 0-2.07.97-2.07 1.97v2.38h3.52l-.56 3.67h-2.96v8.42c2.04-.5 3.89-1.47 5.43-2.79a13.32 13.32 0 0 0 2.64-3.06c1.28-2.04 2.02-4.45 2.02-7.03s-.74-5-2.02-7.04z" />
                                </g>
                                <defs>
                                    <clipPath id="youtube-clip-path">
                                        <path d="M0 0h93.16v26.55H0z" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="footer__copyright">
        <div class="footer__copyright-text">
            © National Network of Public Health Institutes. All Rights Reserved
        </div>
    </div>
</div>
<div class="footer" data-footer>
    <div class="footer__wrapper">
        <div class="footer__content-container">
            <div class="footer__main-content">
                <div class="footer__brand">
                    <a href="/">
                        <span class="footer__logo-text">{{ site.title }}</span>
                        {% include 'bits/logos/nnphi-stacked-logo.twig' %}
                    </a>
                </div>
                <ul class="footer__navigation">
                    {% for item in primaryNavigation.items %}
                        <li class="footer__main-nav-item">
                            <a class="footer__main-nav-item-link" href="{{ item.url }}">{{ item.title }}</a>
                            {% if item.children %}
                                <ul class="footer__main-nav-item-children">
                                    {% for item in item.children %}
                                        <li class="footer__main-nav-child">
                                            <a class="footer__main-nav-child-link" href="{{ item.url }}">{{ item.title }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="footer__utility-links-container">
            <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">
                            {{ item.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <nav class="footer__social" aria-label="footer social media links">
                {% if
                    contactInfo.facebookLink or
                    contactInfo.linkedInLink or
                    contactInfo.youTubeLink
                %}
                    {% include 'bits/social-links/social-links.twig' %}
                {% endif %}
            </nav>
        </div>
    </div>
    <div class="footer__copyright">
        <div class="footer__copyright-text">
            {{ contactInfo.copyright }}
        </div>
    </div>
</div>
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  }
}
  • Content:
    .footer {
        $breakpointSmall: 31.25rem;
        $breakpointMedium: 57rem;
        $breakpointLarge: 105rem;
    
        --textColor: var(--black);
        --copyrightTextColor: var(--purple);
        --utilityLinksColor: var(--white);
        --utilityLinksHoverColor: var(--lightBlue);
        --navLinksHoverColor: var(--purple);
    
        box-shadow: inset 0 -3rem 0 var(--purpleTint);
        position: relative;
        overflow-x: hidden;
    
        &__wrapper {
            max-width: 103rem;
            margin: auto;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            position: relative;
            width: 100%;
    
            @media (min-width: $breakpointMedium) {
                flex-direction: row;
                gap: 8rem;
            }
        }
    
        &__content-container {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding-inline: $contentPaddingSmall;
    
            @media (min-width: $breakpointLarge) {
                padding-inline: 0;
            }
        }
    
        &__main-content {
            padding-top: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 20px;
    
            @media (min-width: $breakpointSmall) {
                flex-direction: row;
            }
        }
    
        &__logo-text {
            @include invisible
        }
    
        &__brand {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 2rem;
            min-width: 150px;
    
            & svg {
                max-height: 100px;
            }
        }
    
        &__navigation {
            color: var(--textColor);
            display: flex;
            flex-direction: column;
            column-gap: 3rem;
            row-gap: 25px;
            margin-bottom: 2.25rem;
            flex-wrap: wrap;
    
            @media (min-width: $breakpointSmall) {
                flex-direction: row;
            }
        }
    
        &__main-nav-item {
            @include detailBold;
            text-decoration: none;
            font-size: 0.625rem;
        }
    
        &__main-nav-item-link {
            display: block;
            padding: 0.5rem 0;
            text-decoration: none;
            min-width: 1.5rem;
    
            &:focus,
            &:hover,
            &:active {
                color: var(--navLinksHoverColor);
                text-decoration: underline;
            }
        }
    
        &__main-nav-item-children {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
    
        &__main-nav-child {
            @include detail;
            text-decoration: none;
            font-size: 0.75rem;
        }
    
        &__main-nav-child-link {
            text-decoration: none;
    
            &:focus,
            &:hover,
            &:active {
                color: var(--navLinksHoverColor);
                text-decoration: underline;
            }
        }
    
        &__utility-links-container {
            background-color: var(--purple);
            flex-shrink: 0;
            padding-bottom: 1.25rem;
            padding-left: $contentPaddingSmall;
            padding-right: $contentPaddingSmall;
            position: relative;
    
            @media (min-width: $breakpointSmall) {
                padding-right: $contentPaddingLarge;
                padding-left: $contentPaddingLarge;
            }
    
            @media (min-width: $breakpointMedium) {
                padding-left: 3.5rem;
            }
    
            & > * {
                position: relative;
                z-index: 1;
            }
    
            &::before {
                background-color: var(--purple);
                bottom: -3rem;
                content: '';
                display: none;
                left: 0;
                position: absolute;
                top: 0;
                width: 1000px;
    
                @media(min-width: $breakpointMedium) {
                    display: block;
                }
            }
    
            &::after {
                background-color: var(--purple);
                bottom: -3rem;
                content: '';
                display: none;
                position: absolute;
                right: 0;
                top: 0;
                transform-origin: top right;
                transform: skewX(-15deg);
                width: 100%;
    
                @media(min-width: $breakpointMedium) {
                    display: block;
                }
            }
        }
    
        &__links-list {
            padding-top: 2rem;
            width: 100%;
        }
    
        &__links-list-item-link {
            display: block;
            font-size: 0.625rem;
            color: var(--utilityLinksColor);
            padding: 0.5rem 0;
    
            &:focus,
            &:hover,
            &:active {
                color: var(--utilityLinksHoverColor);
            }
        }
    
        &__copyright {
            align-items: center;
            background: var(--purpleTint);
            display: flex;
            padding: 1rem 0;
    
            @media(min-width: $breakpointMedium) {
                height: 3rem;
                padding: 0;
            }
        }
    
        &__copyright-text {
            @include detail;
            @include contentContainer;
            color: var(--copyrightTextColor);
            width: 100%;
        }
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: patterns/partials/footer/footer.scss
  • Size: 4.8 KB

No notes defined.