Footer

<!-- Department -->
<div class="footer__dept">

    <img class="footer__dept--logo" src="../../img/examples/footer-stratcomm-logo.svg" alt="Strategic Communications Logo">

    <div class="footer__dept--info">
        <address class="footer__dept--contact">
            10889 Wilshire Blvd., Suite 1400<br />Los Angeles, CA 90024<br />(626) 123-4567<br /><a href="mailto:contact@stratcomm.ucla.edu" class="white-link">contact@stratcomm.ucla.edu</a>
        </address>

        <div class="footer__dept--social">
            <a href="#" class="footer__dept--social-facebook">
                <img src="../../icons/social/facebook--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-twitter">
                <img src="../../icons/social/twitter--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-instagram">
                <img src="../../icons/social/instagram--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-snapchat">
                <img src="../../icons/social/snapchat--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-linkedin">
                <img src="../../icons/social/linkedin--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-youtube">
                <img src="../../icons/social/youtube--white.svg" />
            </a>
            <a href="#" class="footer__dept--social-tiktok">
                <img src="../../icons/social/tiktok--white.svg" />
            </a>
        </div>
    </div>

    <nav class="footer__dept--links">
        <div class="footer__dept--links-wrapper">
            <ul>
                <li>Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul>
                <li>Heading</li>
                <li><a href="#" target="_blank">An External Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
        <div class="footer__dept--links-wrapper">
            <ul>
                <li>Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul>
                <li>Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
        <div class="footer__dept--links-wrapper">
            <ul>
                <li>Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
    </nav>
</div>

<!-- Email -->
<div class="email">

    <h3 class="email__heading">SIGN UP</h3>
    <p class="email__description">Get the latest news, stories, and events from UCLA Strategic Communications</p>

    <form class="email__form" method="post" action="#">
        <div class="email__input-container">
            <div class="email__input email__input-email">
                <label class="email__input-label" for="Email">Email</label>
                <input type="text" id="Email" class="email__input-text" name="Email" label="Email" placeholder="joebruin@ucla.edu" aria-label="Your Email Address" required>
            </div>
            <div class="email__input email__input-firstname">
                <label class="email__input-label" for="First_Name">First Name</label>
                <input type="text" id="First_Name" class="email__input-text" name="First_Name" label="FirstName" placeholder="First Name" aria-label="Your First Name" required>
            </div>
            <div class="email__input email__input-lastname">
                <label class="email__input-label" for="Last_Name">Last Name</label>
                <input type="text" id="Last_Name" class="email__input-text" name="Last_Name" label="LastName" placeholder="Last Name" aria-label="Your Last Name" required>
            </div>
            <div class="email__input email__input-zipcode">
                <label class="email__input-label" for="Zip">Zip Code</label>
                <input type="text" id="Zip" class="email__input-text" name="Zip" label="ZipCode" placeholder="Zip Code" aria-label="Your Zipcode" required>
            </div>
            <div class="email__input email__input-button">
                <input class="email__input-submit" type="submit" value="Sign Up" aria-label="Sign Up">
            </div>
        </div>
    </form>

    <p class="email__legal-text">
        You may unsubscribe at any time. Zip code is used to improve the content we share. Refer to our <a class="email__legal-link" href="/terms-of-use/">Terms of Use</a> for more information on how we store and protect your data.
    </p>

</div>

<!-- Global -->
<div class="ucla campus global-foot">
    <div class="global-foot__wrapper">
        <div class="social-links-container">
            <a class="social-icon" href="https://www.facebook.com/UCLA/"><span class="social-icon--facebook"></span><span class="visuallyhidden">Facebook</span></a>
            <a href="https://www.instagram.com/ucla/"><span class="social-icon--instagram"></span><span class="visuallyhidden">Instagram</span></a>
            <a href="https://www.linkedin.com/school/ucla"><span class="social-icon--linkedin"></span><span class="visuallyhidden">Linked</span></a>
            <a href="https://twitter.com/ucla"><span class="social-icon--twitter"></span><span class="visuallyhidden">Twitter</span></a>
            <a href="https://www.youtube.com/user/UCLA"><span class="social-icon--youtube"></span><span class="visuallyhidden">Youtube</span></a>
            <a href="https://www.tiktok.com/@ucla?lang=en"><span class="social-icon--tiktok"></span><span class="visuallyhidden">TikTok</span></a>
            <a href="https://story.snapchat.com/@uclaofficial"><span class="social-icon--snapchat"></span><span class="visuallyhidden">Snapchat</span></a>
        </div>

        <div class="global-foot__legal">

            <p class="global-foot__legal--copyright">&copy; 2022 Regents of the <a class="copy__link-a dark" href="http://www.universityofcalifornia.edu/">University of California</a></p>

            <ul class="global-foot__legal--list">
                <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="https://www.bso.ucla.edu/">Emergency</a></li>
                <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="/accessibility">Accessibility</a></li>
                <!-- <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="https://ucla-gme-advocate.symplicity.com/public_report/index.php/pid031251">Report Misconduct</a></li> -->
                <!-- <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="#">Communication Preferences</a></li> -->
                <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="/terms-of-use/">Privacy &amp; Terms of Use</a></li>
            </ul>

        </div>
    </div>
</div>