/src/templates/story

Story Page

The story page has two available templates — with and with a featured image.

This is the one template where you can find a rich-text component (for the story body). This is component to page attention to - authors can (and will) do anything they want within this space, so developers need to be vigilent in making sure the authors don't break the experience set by the UX designers.

Open story.html Template
Open story--image.html Template
story.html story--image.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/site.css">
    <title>story</title>
    <!-- start `favicon` component;-->
    <link rel="apple-touch-icon" sizes="180x180" href="../images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="../images/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="../images/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="../images/favicons/manifest.json">
    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">
    <!-- end `favicon` component;-->
    <meta name="description" content="">
    <meta property="og:title" content="story">
    <meta property="og:type" content="website">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,500,700">
  </head>
  <body>
    <!-- start `skip-nav` component; -->
    <nav class="skip-nav"><a href="#main">Skip to main content</a></nav>
    <!-- end `skip-nav` component; -->
    <!-- start `page-header` component;-->
    <header class="page-header">
      <div class="page-header__banner">
        <div class="page-header__logo"><img src="../images/page-header/acme__logo.png" alt="ACME Logo"></div>
      </div>
    </header>
    <!-- end `page-header` component; -->
    <!-- start `site-nav` component;-->
    <nav class="site-nav">
      <button class="site-nav__button site-nav__button-icon site-nav__button-icon--open">
        <svg class="icon-bars">
          <title>Open Site Navigation Panel</title>
          <use xlink:href="../images/icons/icons.svg#icon-bars"></use>
        </svg>
      </button>
      <nav class="site-nav__drawer">
        <div class="site-nav__section"><a href="#">Home</a>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Customer Service</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SITE INFORMATION</p>
              <div class="site-nav__links"><a href="#">Contact Us</a><a href="#">About Us</a><a href="#">Store</a><a href="#">RSS Feeds</a><a href="#">Special Sections</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>ADVERTISE</p>
              <div class="site-nav__links"><a href="#">Advertise with Us</a><a href="#">Media Kit</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MOBILE</p>
              <div class="site-nav__links"><a href="#">Mobile Apps &amp; eReaders</a><a href="#">Newsletters</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>SOCIAL</p>
              <div class="site-nav__links"><a href="#">Facebook</a><a href="#">Twitter</a><a href="#">Instagram</a><a href="#">YouTube</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>News</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">News</a><a href="#">Politics</a><a href="#">Weather</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>NATIONAL &amp; WORLD</p>
              <div class="site-nav__links"><a href="#">National</a><a href="#">World</a><a href="#">Americas</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>LOCAL ISSUES</p>
              <div class="site-nav__links"><a href="#">Crime</a><a href="#">Education</a><a href="#">Environment</a><a href="#">Traffic</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Sports</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Sports</a><a href="#">Blogs &amp; Columnists</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>PRO &amp; COLLEGEs</p>
              <div class="site-nav__links"><a href="#">Miami Dolphins</a><a href="#">Miami Heat</a><a href="#">Miami Marlins</a><a href="#">Florida Panthers</a><a href="#">College Sports</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MORE SPORTS</p>
              <div class="site-nav__links"><a href="#">High School Sports</a><a href="#">Auto Racing</a><a href="#">Fighting</a><a href="#">Golf</a><a href="#">Soccer</a><a href="#">Tennis</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Politics</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__links"><a href="#">Politics</a><a href="#">Elections</a>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Business</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__links"><a href="#">Business</a><a href="#">Banking</a><a href="#">International Business</a><a href="#">Personal Finance</a><a href="#">Real Estate News</a>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Living</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Living</a><a href="#">Advice</a><a href="#">Fashion</a><a href="#">Health &amp; Fitness</a><a href="#">Home &amp; Garden</a><a href="#">Travel</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Entertainment</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Entertainment</a><a href="#">Books</a><a href="#">Games &amp; Puzzles</a><a href="#">Movies</a><a href="#">Performing Arts</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MORE ENTERTAINMENT</p>
              <div class="site-nav__links"><a href="#">Events Calendar</a><a href="#">Contests &amp; Promotions</a>
              </div>
            </div>
          </div>
        </div>
        <button class="site-nav__button site-nav__button-icon site-nav__button-icon--close">
          <svg class="icon-times">
            <title>Close Site Navigation Panel</title>
            <use xlink:href="../images/icons/icons.svg#icon-times"></use>
          </svg>
        </button>
      </nav>
    </nav>
    <!-- end `site-nav` component; -->
    <main class="container" id="main">
      <div class="row">
        <div class="col-12 col-md-8">
          <!-- start `story` component; -->
          <article class="story">
            <h1 class="story__title">Maecenas ullamcorper dui ac nulla maximus, egestas facilisis arcu pellentesque</h1>
            <div class="story__author">
              <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
              <div class="story__author-text"><a href="#">John Doe</a>
                <nav class="story__author-social"><a href="#">
                    <svg class="icon-facebook">
                      <title>Facebook</title>
                      <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
                    </svg></a><a href="#">
                    <svg class="icon-twitter">
                      <title>Twitter</title>
                      <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
                    </svg></a><a href="#">
                    <svg class="icon-instagram">
                      <title>Instagram</title>
                      <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
                    </svg></a></nav><span class="story__author-time">Published 2:19pm ET March 26, 2019</span>
              </div>
            </div>
            <div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod luctus quam in ullamcorper. Donec vehicula est at nibh viverra, in dapibus nunc cursus. Pellentesque ultricies sollicitudin lacus, non scelerisque nulla dignissim id. Etiam sollicitudin ex pellentesque, convallis quam eget, molestie tellus. Mauris sit amet nibh id dolor pretium hendrerit. Suspendisse urna libero, dictum vel rutrum sit amet, egestas vel diam. Donec a faucibus nunc, vitae bibendum neque. Aliquam tempus condimentum velit a hendrerit. Morbi tristique nunc et pretium pretium. Quisque viverra dui neque, ac accumsan nunc eleifend non. Suspendisse vel tincidunt elit. Nam elementum dolor quis tempor tristique. Aenean at tortor neque. Fusce vel ipsum a tortor commodo maximus.</p><blockquote class='twitter-tweet' data-lang='en'><p lang='en' dir='ltr'>From easiest to toughest... <br><br>Ranking EVERY team&#39;s strength of schedule in 2019! 📊 <a href='https://t.co/07ktkwVu4r'>pic.twitter.com/07ktkwVu4r</a></p>&mdash; NFL (@NFL) <a href='https://twitter.com/NFL/status/1110625733775224833?ref_src=twsrc%5Etfw'>March 26, 2019</a></blockquote><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script><p>Quisque facilisis vulputate ullamcorper. Donec tristique a enim at dignissim. Cras leo mi, mattis in cursus ac, pellentesque at ligula. Morbi ut mi malesuada, sagittis odio in, feugiat lacus. Mauris malesuada maximus fermentum. Curabitur vehicula nisl ipsum, nec mattis quam bibendum sed. Integer dignissim fermentum tincidunt. In elementum enim non massa suscipit, quis luctus eros rutrum. Proin euismod ex non metus volutpat lacinia. Nulla suscipit faucibus accumsan. Pellentesque et dapibus libero. Quisque dapibus diam augue, sed tempus libero fermentum vitae. Vestibulum scelerisque eros est, in efficitur ligula finibus a. Curabitur id mauris et lectus maximus fermentum.</p><h2>Nam ac lorem et metus venenatis pellentesque</h2><p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean in erat elementum arcu varius ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In placerat id sem nec hendrerit. Curabitur libero metus, tincidunt ac dignissim ut, rutrum sit amet purus. Donec vel ex auctor, vehicula leo in, bibendum arcu.</p><ul><li>Mauris a justo vel dolor molestie condimentum.</li><li>Nullam et arcu porta, maximus tortor at, pretium neque.</li><li>Nam iaculis nibh ac diam dictum maximus.</li><li>Nullam tristique libero eu ex tempus, eu vestibulum mauris ornare.</li></ul><p>Integer vestibulum ante arcu, non pretium neque euismod eget. Curabitur feugiat, arcu sit amet varius faucibus, dolor erat ornare dolor, ac tincidunt diam sapien et nisi. Pellentesque euismod augue at lorem accumsan feugiat. Sed rutrum erat vitae diam maximus, in efficitur enim maximus.</p><p>Donec condimentum laoreet tortor eu cursus. Vivamus nec sem non nibh facilisis molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac leo lorem. Mauris malesuada sed dui sit amet lacinia.</p><ol><li>Morbi ut nisl rutrum, tristique tellus quis, sodales ex.</li><li>Phasellus cursus lectus eu sem scelerisque dictum.</li><li>Duis non enim vel sem sagittis condimentum vel ut velit.</li><li>Suspendisse elementum dui sit amet ultricies vestibulum.</li></ol><p>Aliquam sodales mi vel neque gravida, vitae blandit ipsum tempor. Sed vel dui pulvinar, maximus leo id, sodales dolor. Etiam eleifend odio at pharetra bibendum.</p><p>Nullam finibus vel metus nec varius.</p><blockquote><p>In vel orci at neque venenatis mollis sed a sem. Morbi rutrum non turpis ut auctor. Sed vulputate venenatis ullamcorper. Suspendisse aliquam tellus nec efficitur auctor. Aenean a diam lectus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc id erat nulla. Phasellus imperdiet congue aliquet. Sed leo nibh, molestie interdum dictum vel, dictum quis arcu. Integer sit amet ornare velit.</p><p>Praesent mollis pellentesque orci, id molestie tortor dictum non. In tristique libero vel dictum sodales. Duis consequat tincidunt lacus. Donec ut augue id nulla placerat suscipit. Sed a lectus pharetra, hendrerit nulla vitae, malesuada felis. Donec mollis viverra luctus. Fusce id viverra ligula. Vivamus pellentesque pharetra quam. Aenean diam enim, scelerisque non elit non, auctor facilisis tellus. Cras elementum velit in pellentesque accumsan. Vivamus in velit sit amet elit facilisis placerat.</p></blockquote><p>Vestibulum hendrerit dolor at nibh scelerisque, nec pretium diam consectetur. Nam semper velit eros, non consequat turpis fermentum nec. Morbi quis quam nulla. Pellentesque dapibus ex sed nulla ultricies, eget placerat tortor pulvinar. Nam mollis laoreet eros quis ornare. Nullam maximus purus vitae accumsan iaculis. Donec convallis feugiat porttitor. Morbi euismod dolor risus, quis suscipit nunc congue scelerisque.</p><p>Maecenas suscipit, sem vitae placerat vulputate, metus dolor feugiat ex, non imperdiet leo felis eu purus. Praesent vitae facilisis risus. Fusce vitae est porta, luctus orci a, condimentum enim. Cras justo lectus, lacinia ut vestibulum in, malesuada sed augue. Morbi at dui ac mi dictum luctus. Etiam bibendum vulputate felis nec elementum. Duis non tristique enim.</p><h3>Etiam eleifend diam ut erat condimentum, quis aliquam metus scelerisque</h3><p>Pellentesque gravida metus id bibendum vestibulum. Sed leo ligula, feugiat at tincidunt ut, interdum tincidunt ante. Donec lacus leo, iaculis eu laoreet ut, viverra eget purus. Nunc ex turpis, laoreet vel pulvinar quis, bibendum non libero. Sed vel sapien orci. Maecenas ex lorem, ultrices nec lobortis id, ornare nec ligula. Nullam molestie auctor massa sed lobortis. Nam maximus a ante sagittis ullamcorper. Nam quis luctus lorem, ac varius est.</p><p><em>Nullam tincidunt eros volutpat <a href='#'>vestibulum vehicula</a>.</em></p></div>
          </article>
          <!-- end `story` component; -->
        </div>
        <div class="col-12 col-md-4">
          <!-- start `slat-list` component; -->
          <section class="slat-list">
            <h2 class="slat-list__title">Popular Stories</h2>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Donec vehicula massa nec nisi vestibulum vulputate</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Praesent hendrerit massa sit amet nulla bibendum, non mollis dolor scelerisque</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="slat__text">
                  <h3>Vivamus vel turpis quis nunc aliquet interdum</h3>
                  <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Integer vel sem vitae ligula semper auctor ac sit amet lectus</h3>
                  <div class="slat__trailer">Soccer&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Nam placerat risus faucibus dui vehicula malesuada</h3>
                  <div class="slat__trailer">Golf&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="slat__text">
                  <h3>Vivamus nec lacus quis nulla venenatis viverra et a lectus hendrerit massa sit amet nulla</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Mauris placerat sem elementum leo molestie turpis sollicitudin</h3>
                  <div class="slat__trailer">NBA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Fusce lacinia nunc ac lectus sodales, sed pulvinar ipsum tristique</h3>
                  <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
          </section>
          <!-- end `slat-list` component; -->
        </div>
      </div>
    </main>
    <!-- start `page-footer` component; -->
    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col-12 col-sm-6 col-md-4">
            <div class="img-cover"><img src="../images/page-footer/acme__logo.png" alt="empty placeholder image"></div>
            <nav class="page-footer__social"><a href="#">
                <svg class="icon-facebook">
                  <title>Facebook</title>
                  <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
                </svg></a><a href="#">
                <svg class="icon-twitter">
                  <title>Twitter</title>
                  <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
                </svg></a><a href="#">
                <svg class="icon-instagram">
                  <title>Instagram</title>
                  <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
                </svg></a></nav><small class="page-footer__legal">&copy; 2019 ACME, a division of a Much Bigger Company Network, LLC.</small>
          </div>
          <div class="col-12 col-sm-6 col-md-7 col-md-offset-1">
            <div class="row">
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-sm-none">
                  <h3>Information</h3><a href="#">About Us</a><a href="#">Accessibility</a><a href="#">Corrections</a><a href="#">Press Room</a><a href="#">Advertise</a><a href="#">Jobs</a><a href="#">Developer's Network</a><a href="#">Terms of Service</a><a href="#">Privacy Notice</a><a href="#">Ad Choices</a><a href="#">Support</a>
                </nav>
              </div>
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-md-none">
                  <h3>Media Partners</h3><a href="#">Sports Weekly</a><a href="#">Education</a><a href="#">Grateful</a><a href="#">Studio</a><a href="#">Reviewed</a>
                </nav>
              </div>
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-md-none">
                  <h3>Stay Connected</h3><a href="#">Leave feedback</a><a href="#">Contact Us</a><a href="#">Staff</a><a href="#">Get Home Delivery</a><a href="#">Manage My Subscriptions</a><a href="#">Newsletters</a><a href="#">Podcasts</a>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- end `page-footer` component; -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="../js/site.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/site.css">
    <title>story</title>
    <!-- start `favicon` component;-->
    <link rel="apple-touch-icon" sizes="180x180" href="../images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="../images/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="../images/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="../images/favicons/manifest.json">
    <link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">
    <!-- end `favicon` component;-->
    <meta name="description" content="">
    <meta property="og:title" content="story">
    <meta property="og:type" content="website">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,500,700">
  </head>
  <body>
    <!-- start `skip-nav` component; -->
    <nav class="skip-nav"><a href="#main">Skip to main content</a></nav>
    <!-- end `skip-nav` component; -->
    <!-- start `page-header` component;-->
    <header class="page-header">
      <div class="page-header__banner">
        <div class="page-header__logo"><img src="../images/page-header/acme__logo.png" alt="ACME Logo"></div>
      </div>
    </header>
    <!-- end `page-header` component; -->
    <!-- start `site-nav` component;-->
    <nav class="site-nav">
      <button class="site-nav__button site-nav__button-icon site-nav__button-icon--open">
        <svg class="icon-bars">
          <title>Open Site Navigation Panel</title>
          <use xlink:href="../images/icons/icons.svg#icon-bars"></use>
        </svg>
      </button>
      <nav class="site-nav__drawer">
        <div class="site-nav__section"><a href="#">Home</a>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Customer Service</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SITE INFORMATION</p>
              <div class="site-nav__links"><a href="#">Contact Us</a><a href="#">About Us</a><a href="#">Store</a><a href="#">RSS Feeds</a><a href="#">Special Sections</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>ADVERTISE</p>
              <div class="site-nav__links"><a href="#">Advertise with Us</a><a href="#">Media Kit</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MOBILE</p>
              <div class="site-nav__links"><a href="#">Mobile Apps &amp; eReaders</a><a href="#">Newsletters</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>SOCIAL</p>
              <div class="site-nav__links"><a href="#">Facebook</a><a href="#">Twitter</a><a href="#">Instagram</a><a href="#">YouTube</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>News</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">News</a><a href="#">Politics</a><a href="#">Weather</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>NATIONAL &amp; WORLD</p>
              <div class="site-nav__links"><a href="#">National</a><a href="#">World</a><a href="#">Americas</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>LOCAL ISSUES</p>
              <div class="site-nav__links"><a href="#">Crime</a><a href="#">Education</a><a href="#">Environment</a><a href="#">Traffic</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Sports</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Sports</a><a href="#">Blogs &amp; Columnists</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>PRO &amp; COLLEGEs</p>
              <div class="site-nav__links"><a href="#">Miami Dolphins</a><a href="#">Miami Heat</a><a href="#">Miami Marlins</a><a href="#">Florida Panthers</a><a href="#">College Sports</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MORE SPORTS</p>
              <div class="site-nav__links"><a href="#">High School Sports</a><a href="#">Auto Racing</a><a href="#">Fighting</a><a href="#">Golf</a><a href="#">Soccer</a><a href="#">Tennis</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Politics</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__links"><a href="#">Politics</a><a href="#">Elections</a>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Business</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__links"><a href="#">Business</a><a href="#">Banking</a><a href="#">International Business</a><a href="#">Personal Finance</a><a href="#">Real Estate News</a>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Living</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Living</a><a href="#">Advice</a><a href="#">Fashion</a><a href="#">Health &amp; Fitness</a><a href="#">Home &amp; Garden</a><a href="#">Travel</a>
              </div>
            </div>
          </div>
        </div>
        <div class="site-nav__section">
          <button class="site-nav__button site-nav__button-toggle"><span>Entertainment</span>
            <svg class="icon-angle-down">
              <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
            </svg>
          </button>
          <div class="site-nav__sub-sections">
            <div class="site-nav__sub-section">
              <p>SECTIONS</p>
              <div class="site-nav__links"><a href="#">Entertainment</a><a href="#">Books</a><a href="#">Games &amp; Puzzles</a><a href="#">Movies</a><a href="#">Performing Arts</a>
              </div>
            </div>
            <div class="site-nav__sub-section">
              <p>MORE ENTERTAINMENT</p>
              <div class="site-nav__links"><a href="#">Events Calendar</a><a href="#">Contests &amp; Promotions</a>
              </div>
            </div>
          </div>
        </div>
        <button class="site-nav__button site-nav__button-icon site-nav__button-icon--close">
          <svg class="icon-times">
            <title>Close Site Navigation Panel</title>
            <use xlink:href="../images/icons/icons.svg#icon-times"></use>
          </svg>
        </button>
      </nav>
    </nav>
    <!-- end `site-nav` component; -->
    <!-- start `story-image` component; -->
    <div class="story-image" role="complementary">
      <div class="img-cover"><img src="http://via.placeholder.com/1600x432" alt="empty placeholder image"></div>
    </div>
    <!-- end `story-image` component; -->
    <main class="container" id="main">
      <div class="row">
        <div class="col-12 col-md-8">
          <!-- start `story` component; -->
          <article class="story">
            <h1 class="story__title">Maecenas ullamcorper dui ac nulla maximus, egestas facilisis arcu pellentesque</h1>
            <div class="story__author">
              <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
              <div class="story__author-text"><a href="#">John Doe</a>
                <nav class="story__author-social"><a href="#">
                    <svg class="icon-facebook">
                      <title>Facebook</title>
                      <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
                    </svg></a><a href="#">
                    <svg class="icon-twitter">
                      <title>Twitter</title>
                      <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
                    </svg></a><a href="#">
                    <svg class="icon-instagram">
                      <title>Instagram</title>
                      <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
                    </svg></a></nav><span class="story__author-time">Published 2:19pm ET March 26, 2019</span>
              </div>
            </div>
            <div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod luctus quam in ullamcorper. Donec vehicula est at nibh viverra, in dapibus nunc cursus. Pellentesque ultricies sollicitudin lacus, non scelerisque nulla dignissim id. Etiam sollicitudin ex pellentesque, convallis quam eget, molestie tellus. Mauris sit amet nibh id dolor pretium hendrerit. Suspendisse urna libero, dictum vel rutrum sit amet, egestas vel diam. Donec a faucibus nunc, vitae bibendum neque. Aliquam tempus condimentum velit a hendrerit. Morbi tristique nunc et pretium pretium. Quisque viverra dui neque, ac accumsan nunc eleifend non. Suspendisse vel tincidunt elit. Nam elementum dolor quis tempor tristique. Aenean at tortor neque. Fusce vel ipsum a tortor commodo maximus.</p><blockquote class='twitter-tweet' data-lang='en'><p lang='en' dir='ltr'>From easiest to toughest... <br><br>Ranking EVERY team&#39;s strength of schedule in 2019! 📊 <a href='https://t.co/07ktkwVu4r'>pic.twitter.com/07ktkwVu4r</a></p>&mdash; NFL (@NFL) <a href='https://twitter.com/NFL/status/1110625733775224833?ref_src=twsrc%5Etfw'>March 26, 2019</a></blockquote><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script><p>Quisque facilisis vulputate ullamcorper. Donec tristique a enim at dignissim. Cras leo mi, mattis in cursus ac, pellentesque at ligula. Morbi ut mi malesuada, sagittis odio in, feugiat lacus. Mauris malesuada maximus fermentum. Curabitur vehicula nisl ipsum, nec mattis quam bibendum sed. Integer dignissim fermentum tincidunt. In elementum enim non massa suscipit, quis luctus eros rutrum. Proin euismod ex non metus volutpat lacinia. Nulla suscipit faucibus accumsan. Pellentesque et dapibus libero. Quisque dapibus diam augue, sed tempus libero fermentum vitae. Vestibulum scelerisque eros est, in efficitur ligula finibus a. Curabitur id mauris et lectus maximus fermentum.</p><h2>Nam ac lorem et metus venenatis pellentesque</h2><p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean in erat elementum arcu varius ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In placerat id sem nec hendrerit. Curabitur libero metus, tincidunt ac dignissim ut, rutrum sit amet purus. Donec vel ex auctor, vehicula leo in, bibendum arcu.</p><ul><li>Mauris a justo vel dolor molestie condimentum.</li><li>Nullam et arcu porta, maximus tortor at, pretium neque.</li><li>Nam iaculis nibh ac diam dictum maximus.</li><li>Nullam tristique libero eu ex tempus, eu vestibulum mauris ornare.</li></ul><p>Integer vestibulum ante arcu, non pretium neque euismod eget. Curabitur feugiat, arcu sit amet varius faucibus, dolor erat ornare dolor, ac tincidunt diam sapien et nisi. Pellentesque euismod augue at lorem accumsan feugiat. Sed rutrum erat vitae diam maximus, in efficitur enim maximus.</p><p>Donec condimentum laoreet tortor eu cursus. Vivamus nec sem non nibh facilisis molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac leo lorem. Mauris malesuada sed dui sit amet lacinia.</p><ol><li>Morbi ut nisl rutrum, tristique tellus quis, sodales ex.</li><li>Phasellus cursus lectus eu sem scelerisque dictum.</li><li>Duis non enim vel sem sagittis condimentum vel ut velit.</li><li>Suspendisse elementum dui sit amet ultricies vestibulum.</li></ol><p>Aliquam sodales mi vel neque gravida, vitae blandit ipsum tempor. Sed vel dui pulvinar, maximus leo id, sodales dolor. Etiam eleifend odio at pharetra bibendum.</p><p>Nullam finibus vel metus nec varius.</p><blockquote><p>In vel orci at neque venenatis mollis sed a sem. Morbi rutrum non turpis ut auctor. Sed vulputate venenatis ullamcorper. Suspendisse aliquam tellus nec efficitur auctor. Aenean a diam lectus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc id erat nulla. Phasellus imperdiet congue aliquet. Sed leo nibh, molestie interdum dictum vel, dictum quis arcu. Integer sit amet ornare velit.</p><p>Praesent mollis pellentesque orci, id molestie tortor dictum non. In tristique libero vel dictum sodales. Duis consequat tincidunt lacus. Donec ut augue id nulla placerat suscipit. Sed a lectus pharetra, hendrerit nulla vitae, malesuada felis. Donec mollis viverra luctus. Fusce id viverra ligula. Vivamus pellentesque pharetra quam. Aenean diam enim, scelerisque non elit non, auctor facilisis tellus. Cras elementum velit in pellentesque accumsan. Vivamus in velit sit amet elit facilisis placerat.</p></blockquote><p>Vestibulum hendrerit dolor at nibh scelerisque, nec pretium diam consectetur. Nam semper velit eros, non consequat turpis fermentum nec. Morbi quis quam nulla. Pellentesque dapibus ex sed nulla ultricies, eget placerat tortor pulvinar. Nam mollis laoreet eros quis ornare. Nullam maximus purus vitae accumsan iaculis. Donec convallis feugiat porttitor. Morbi euismod dolor risus, quis suscipit nunc congue scelerisque.</p><p>Maecenas suscipit, sem vitae placerat vulputate, metus dolor feugiat ex, non imperdiet leo felis eu purus. Praesent vitae facilisis risus. Fusce vitae est porta, luctus orci a, condimentum enim. Cras justo lectus, lacinia ut vestibulum in, malesuada sed augue. Morbi at dui ac mi dictum luctus. Etiam bibendum vulputate felis nec elementum. Duis non tristique enim.</p><h3>Etiam eleifend diam ut erat condimentum, quis aliquam metus scelerisque</h3><p>Pellentesque gravida metus id bibendum vestibulum. Sed leo ligula, feugiat at tincidunt ut, interdum tincidunt ante. Donec lacus leo, iaculis eu laoreet ut, viverra eget purus. Nunc ex turpis, laoreet vel pulvinar quis, bibendum non libero. Sed vel sapien orci. Maecenas ex lorem, ultrices nec lobortis id, ornare nec ligula. Nullam molestie auctor massa sed lobortis. Nam maximus a ante sagittis ullamcorper. Nam quis luctus lorem, ac varius est.</p><p><em>Nullam tincidunt eros volutpat <a href='#'>vestibulum vehicula</a>.</em></p></div>
          </article>
          <!-- end `story` component; -->
        </div>
        <div class="col-12 col-md-4">
          <!-- start `slat-list` component; -->
          <section class="slat-list">
            <h2 class="slat-list__title">Popular Stories</h2>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Donec vehicula massa nec nisi vestibulum vulputate</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Praesent hendrerit massa sit amet nulla bibendum, non mollis dolor scelerisque</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="slat__text">
                  <h3>Vivamus vel turpis quis nunc aliquet interdum</h3>
                  <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Integer vel sem vitae ligula semper auctor ac sit amet lectus</h3>
                  <div class="slat__trailer">Soccer&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Nam placerat risus faucibus dui vehicula malesuada</h3>
                  <div class="slat__trailer">Golf&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="slat__text">
                  <h3>Vivamus nec lacus quis nulla venenatis viverra et a lectus hendrerit massa sit amet nulla</h3>
                  <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Mauris placerat sem elementum leo molestie turpis sollicitudin</h3>
                  <div class="slat__trailer">NBA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
            <hr>
            <!-- start `slat` component; -->
            <article class="slat"><a href="#">
                <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image"></div>
                <div class="slat__text">
                  <h3>Fusce lacinia nunc ac lectus sodales, sed pulvinar ipsum tristique</h3>
                  <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
                  </div>
                </div></a></article>
            <!-- end `slat` component; -->
          </section>
          <!-- end `slat-list` component; -->
        </div>
      </div>
    </main>
    <!-- start `page-footer` component; -->
    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col-12 col-sm-6 col-md-4">
            <div class="img-cover"><img src="../images/page-footer/acme__logo.png" alt="empty placeholder image"></div>
            <nav class="page-footer__social"><a href="#">
                <svg class="icon-facebook">
                  <title>Facebook</title>
                  <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
                </svg></a><a href="#">
                <svg class="icon-twitter">
                  <title>Twitter</title>
                  <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
                </svg></a><a href="#">
                <svg class="icon-instagram">
                  <title>Instagram</title>
                  <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
                </svg></a></nav><small class="page-footer__legal">&copy; 2019 ACME, a division of a Much Bigger Company Network, LLC.</small>
          </div>
          <div class="col-12 col-sm-6 col-md-7 col-md-offset-1">
            <div class="row">
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-sm-none">
                  <h3>Information</h3><a href="#">About Us</a><a href="#">Accessibility</a><a href="#">Corrections</a><a href="#">Press Room</a><a href="#">Advertise</a><a href="#">Jobs</a><a href="#">Developer's Network</a><a href="#">Terms of Service</a><a href="#">Privacy Notice</a><a href="#">Ad Choices</a><a href="#">Support</a>
                </nav>
              </div>
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-md-none">
                  <h3>Media Partners</h3><a href="#">Sports Weekly</a><a href="#">Education</a><a href="#">Grateful</a><a href="#">Studio</a><a href="#">Reviewed</a>
                </nav>
              </div>
              <div class="col-12 col-md-4">
                <nav class="page-footer__links"><br class="d-md-none">
                  <h3>Stay Connected</h3><a href="#">Leave feedback</a><a href="#">Contact Us</a><a href="#">Staff</a><a href="#">Get Home Delivery</a><a href="#">Manage My Subscriptions</a><a href="#">Newsletters</a><a href="#">Podcasts</a>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- end `page-footer` component; -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="../js/site.js"></script>
  </body>
</html>
Close Template