Description of Footer to come.
<footer class="site-footer"> <section class="blue-bg"> <div class="container-bs"> <div class="row"> <div class="col-12 col-md-6 p-3 light-grey-bg text-center p-2"> <div class="d-flex align-items-center justify-content-center flex-wrap flex-md-nowrap"> <div class="mb-2 mb-md-0 mr-md-2"> <img src="/fa_prototype/assets/images/subscription-cover.png" alt=""> </div> <div> <p class="small-upper-text text-red mb-0">Get the Magazine</p> <h1 class="f-serif mb-0">Save up to 55%</h1> <p class="f-serif font-italic small-text"> on Foreign Affairs magazine! </p> <a class="button-outlined button-red" href="#">subscribe</a> </div> </div> </div> <div class="col-12 col-md-6 text-white text-center py-4 d-flex flex-column justify-content-center align-content-center"> <p class="small-upper-text text-white mb-0">Foreign Affairs</p> <h4 class="f-serif mb-0 footer-newsletter-head ls-0">Weekly Newsletter</h4> <p class="f-serif font-italic small-text"> Get in-depth analysis delivered right to your inbox </p> <div class="d-flex footer-signup-container px-lg-5 flex-wrap flex-lg-nowrap"> <input placeholder="Enter your email" type="text" class="required mr-lg-2 footer-email-input" id="edit-email" name="email" value="" size="60" maxlength="128" /> <input type="submit" class="button-outlined button-white mt-2 mt-lg-0" id="edit-submit--2" name="op" value="sign up" /> </div> </div> </div> </div> </section> <section class="near-black-bg"> <div class="container-bs"> <div class="row py-3 py-md-5"> <div class="col-12 col-lg-8"> <div class="row"> <div class="col-12 col-sm-3"> <nav class="site-footer-section-menu" role="menu"> <h2 class="site-footer-section-menu__title"> <a href="#" role="menuitem">About <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve"> <g> <polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 "/> </g> </svg> </a> </h2> <a class="site-footer-section-menu__item" href="#" role="menuitem">About Us</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">History</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Staff</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Europe</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Careers</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Events</a> </nav> </div> <div class="col-12 col-sm-3 border-md-left"> <nav class="site-footer-section-menu" role="menu"> <h2 class="site-footer-section-menu__title"> <a href="#" role="menuitem">Contact <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve"> <g> <polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 "/> </g> </svg> </a> </h2> <a class="site-footer-section-menu__item" href="#" role="menuitem">Customer Service</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Contact Us</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Submissions</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Permissions</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Advertise</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Press Center</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Leave Us Feedback</a> </nav> </div> <div class="col-12 col-sm-3 border-md-left"> <nav class="site-footer-section-menu" role="menu"> <h2 class="site-footer-section-menu__title"> <a href="#">Subscription <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve"> <g> <polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 "/> </g> </svg> </a> </h2> <a class="site-footer-section-menu__item" href="#" role="menuitem">Subscriptions</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Group Subscriptions</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">My Account</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Give a Gift</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Donate</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Newsletter</a> <a class="site-footer-section-menu__item" href="#" role="menuitem">Download iOS App</a> </nav> </div> <div class="col-12 col-sm-3 border-md-left"> <nav class="site-footer-section-menu" role="menu"> <h2 class="site-footer-section-menu__title"> <a href="#" role="menuitem">Follow <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve"> <g> <polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 "/> </g> </svg> </a> </h2> <nav class="d-flex flex-wrap"> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.66 765.45"><defs><mask id="a" x="0" y="0" width="356.66" height="765.45" maskUnits="userSpaceOnUse"><path d="M4.6 0h356.66v765.45H4.6z" fill="#fff" fill-rule="evenodd" transform="translate(-4.6)"/></mask></defs><g mask="url(#a)"><path d="M356.66 250.82l-13.88 131.93H237.31v382.7H78.96v-382.7H0V250.82h79v-79.43C78.96 64.07 123.51 0 250.4 0h105.33v131.93h-65.92c-49.22 0-52.5 18.6-52.5 52.92v66z"/></g></svg><span class="element-invisible">ForeignAffairs.com on Facebook</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20"><path d="M19.6 6.1v.6c0 5.7-4.4 12.3-12.3 12.3-2.5 0-4.7-.7-6.6-1.9.3 0 .7.1 1 .1 2 0 3.9-.7 5.4-1.8-1.9 0-3.5-1.3-4-3 .3 0 .5.1.8.1.4 0 .8-.1 1.1-.1-2-.6-3.5-2.4-3.5-4.5v-.1c.6.3 1.2.5 2 .5-1.2-.6-2-2-2-3.5 0-.8.2-1.5.6-2.2C4.2 5.3 7.4 7 11 7.2c-.1-.3-.1-.7-.1-1 0-2.4 1.9-4.3 4.3-4.3 1.2 0 2.4.5 3.2 1.4 1-.2 1.9-.5 2.7-1-.3 1-1 1.8-1.9 2.4.9-.1 1.7-.3 2.5-.7-.5.8-1.3 1.5-2.1 2.1z" /></svg><span class="element-invisible">ForeignAffairs.com on Twitter</span></a> <a class="site-footer-social-menu__item" href="https://www.instagram.com/foreignaffairsmag/" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M14.6 20.6H7.5c-3.3 0-6-2.7-6-6V7.5c0-3.3 2.7-6 6-6h7.1c3.3 0 6 2.7 6 6v7.1c0 3.3-2.7 6-6 6z" /><circle cx="11" cy="11.6" r="4"/><circle cx="17" cy="5.6" r="1.2"/></svg><span class="element-invisible">ForeignAffairs.com on Instagram</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M3.5 6C2 6 1 5 1 3.7c0-1.3 1-2.3 2.5-2.3S6 2.4 6 3.7C6 5 5 6 3.5 6zm2.2 15.1H1.3V7.8h4.4v13.3zm15.9 0h-4.4V14c0-1.8-.6-3-2.2-3-1.2 0-1.9.8-2.3 1.6-.1.3-.1.7-.1 1.1v7.4H8.1c.1-12 0-13.3 0-13.3h4.4v1.9c.6-.9 1.6-2.2 4-2.2 2.9 0 5.1 1.9 5.1 6v7.6z"/></svg><span class="element-invisible">ForeignAffairs.com on LinkedIn</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 19"><path d="M24.6 15.2c-.3 1.3-1.3 2.3-2.6 2.4-3 .4-6 .4-9 .4s-6 0-9-.3c-1.3-.1-2.3-1.1-2.6-2.4-.4-1.9-.4-4-.4-5.9s0-4 .4-5.8C1.7 2.3 2.8 1.3 4 1.2c3-.3 6-.3 9-.3s6 0 9 .3c1.3.1 2.3 1.1 2.6 2.4.4 1.9.4 3.9.4 5.8s0 4-.4 5.8zm-6.9-6.5l-6.9-4.3c-.3-.2-.6-.2-.9 0-.2.1-.3.4-.3.7v8.6c0 .3.2.6.4.8.1.1.3.1.4.1.2 0 .3 0 .5-.1l6.9-4.3c.3-.1.4-.4.4-.7s-.2-.7-.5-.8z" /></svg><span class="element-invisible">ForeignAffairs.com on YouTube</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 23"><path d="M11.6 13.2c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.8 1.7 1.7zm0 0"/><path d="M26.2 11.9c0-2.1-1.7-3.8-3.7-3.8-.7 0-1.4.2-1.9.6-1.7-1-4-1.6-6.4-1.7l1.4-4 2.9.7V4c0 1.6 1.3 2.9 2.9 2.9 1.6 0 2.9-1.3 2.9-2.9 0-1.6-1.3-2.9-2.9-2.9-1 0-1.9.6-2.4 1.4l-4.1-1L13 7c-2.5 0-4.7.7-6.4 1.7l.1-.1c-.6-.3-1.3-.6-2-.6C2.7 8 1 9.8 1 11.9c0 1.4.7 2.6 1.8 3.3.5 3.9 5.1 7 10.8 7 5.7 0 10.4-3.1 10.8-7.1 1.2-.7 1.8-1.9 1.8-3.2zm-4.8-9.6c.8 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6zm-16.7 7c.3 0 .6.1.8.2-1.4 1.1-2.3 2.5-2.6 4.1-.4-.5-.6-1-.6-1.7 0-1.4 1.1-2.6 2.4-2.6zm9 11.6c-5.3 0-9.6-2.9-9.6-6.4 0-3.5 4.3-6.4 9.6-6.4s9.6 2.9 9.6 6.4c0 3.5-4.3 6.4-9.6 6.4zm10.7-7.5c-.3-1.5-1.2-2.9-2.6-4 .2-.1.5-.1.7-.1 1.3 0 2.4 1.1 2.4 2.5.1.6-.1 1.2-.5 1.6zm0 0"/><path d="M18.9 13.2c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.8 1.7 1.7zm0 0M16.9 17c-3.6 2.4-6.5.1-6.6 0-.3-.2-.7-.2-.9.1-.2.3-.2.7.1.9 0 0 1.7 1.3 4.1 1.3 1.2 0 2.6-.3 4-1.3.3-.2.4-.6.2-.9-.2-.2-.6-.3-.9-.1zm0 0"/></svg><span class="element-invisible">ForeignAffairs.com on Reddit</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><path d="M0 0v21h21V0H0zm16.4 8.2h-4.1v4.1H8.2v4.1H4.1V4.1h12.3v4.1z"/></svg><span class="element-invisible">ForeignAffairs.com on Flipboard</span></a> <a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 14.8c-.1.1-.3.2-.5.2h-1.4c-.3 0-.6-.3-.6-.6C12.1 8.6 7.4 3.9 1.6 3.6c-.3 0-.6-.3-.6-.7V1.5c0-.2.1-.3.2-.5.1-.1.3-.2.4-.2C5.2 1 8.5 2.5 11 5s4 5.8 4.2 9.3c-.1.2-.1.4-.2.5zm-5.2 0c-.1.1-.3.2-.4.2H8c-.3 0-.6-.3-.6-.6-.3-3.1-2.7-5.5-5.8-5.8-.3 0-.6-.3-.6-.6V6.6c0-.2.1-.4.2-.5.1 0 .3-.1.4-.1 2.1.2 4.2 1.1 5.7 2.6s2.5 3.5 2.6 5.7c.1.2 0 .4-.1.5zm-6.9.2c-1 0-1.9-.9-1.9-1.9s.9-1.9 1.9-1.9 1.9.9 1.9 1.9S4 15 2.9 15z" /></svg><span class="element-invisible">ForeignAffairs.com RSS feed</span></a> </nav> </nav> </div> </div> <div class="row border-md-top py-sm-3 px-sm-0 mt-sm-3"> <div class="col-12"> <div class="site-footer-section-menu d-flex"> <div class="col col-md-3 pl-0"> <h2 class="site-footer-section-menu__more"> <a href="#" role="menuitem">Country Focus</a> </h2> </div> <div class="col col-md-9 pr-0"> <h2 class="site-footer-section-menu__more text-right text-md-left"> <a href="#" role="menuitem">Graduate School Forum</a> </h2> </div> </div> </div> </div> </div> <div class="col-12 col-lg-4 mt-3 mt-md-0"> <div> <div class="site-footer-cofr-menu__brand d-flex align-items-end mb-3"> <img class="site-footer-cofr-menu__logo mr-2" src="/fa_prototype/assets/images/council-on-FA-lockup.png" alt="Council on Foreign Relations" /> <p class="site-footer-cofr-menu__subtitle mb-0"> From the <br> publishers of <br> <em>Foreign Affairs</em> </p> </div> <section class="tabs tabs-footer"> <h2 class="site-footer-cofr-menu__tab-tab mb-0">The Most:</h2> <ul class="site-footer-cofr-menu mb-0"> <li class="site-footer-cofr-menu__tab-tab"> <a href="#fragment-1" class="site-footer-cofr-menu__tab link" href="#" > Recent</a> </li> <li class="site-footer-cofr-menu__tab-tab"> <a href="#fragment-2" class="site-footer-cofr-menu__tab link"> Shared </a> </li> <li class="site-footer-cofr-menu__tab-tab"> <a href="#fragment-3" class="site-footer-cofr-menu__tab link"> Viewed </a> </li> </ul> <div id="fragment-1" class="site-footer-cofr-menu__tab-contents"> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Pakistan's New Generation of Terrorists</a> </h2> <div class="author">by Zachary Laub</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">The High Stakes in Regional Trade Talks</a> </h2> <div class="author">by Serge Schmemann</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Currency Crises in Emerging Markets</a> </h2> <div class="author">by Ray Takeyh</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">A Vague Map for Chinese Reform</a> </h2> <div class="author">by Gayle Tzemach Lemmon</div> </article> </div> <div id="fragment-2" class="site-footer-cofr-menu__tab-contents"> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">The High Stakes in Regional Trade Talks</a> </h2> <div class="author">by Serge Schmemann</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Currency Crises in Emerging Markets</a> </h2> <div class="author">by Ray Takeyh</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">A Vague Map for Chinese Reform</a> </h2> <div class="author">by Gayle Tzemach Lemmon</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Pakistan's New Generation of Terrorists</a> </h2> <div class="author">by Zachary Laub</div> </article> </div> <div id="fragment-3" class="site-footer-cofr-menu__tab-contents"> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">A Vague Map for Chinese Reform</a> </h2> <div class="author">by Gayle Tzemach Lemmon</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Pakistan's New Generation of Terrorists</a> </h2> <div class="author">by Zachary Laub</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">The High Stakes in Regional Trade Talks</a> </h2> <div class="author">by Serge Schmemann</div> </article> <article class="site-footer-cofr-menu-item"> <h2 class="site-footer-cofr-menu-item__title"> <a href="#">Currency Crises in Emerging Markets</a> </h2> <div class="author">by Ray Takeyh</div> </article> </div> </section> </div> </div> </div> </div> </section> <section class="black-bg"> <div class="container-bs"> <div class="p-2 d-flex flex-column flex-md-row align-items-md-end"> <div class="site-footer-legals-container text-white text-center text-md-left order-md-2"> <p class="mb-2 mb-md-1"> Published by the Council on Foreign Relations </p> <div class="d-flex flex-column flex-md-row"> <nav class="site-footer-legals-nav mb-2 mb-md-1"> <a href="#" class="site-footer-legals-link text-white">Privacy Policy</a> <a href="#" class="site-footer-legals-link text-white">Terms of Use</a> </nav> <p class="site-footer-copyright mb-2 mb-md-1"> ©2018 Council on Foreign Relations, Inc. All Rights Reserved. </p> </div> </div> <div class="d-flex justify-content-center order-md-1 mr-md-2"> <img class="site-footer-logo" src="/fa_prototype/assets/images/fa-logotype.svg" alt="Foreign Affairs" /> </div> </div> </div> </section> </footer>