article.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.0">
  <title>NewsGrid | Latest News</title>
  <script src="https://kit.fontawesome.com/7f5dcd9872.js" crossorigin="anonymous"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Staatliches&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" media="screen and (max-width:768px)" href="CSS/mobile.css">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

</head>

<body>
  <!-- Navbar -->
  <nav id="main-nav">
    <div class="container">
      <img src="img/logo.png" alt="NewsGrid" class="logo">
      <div class="social">
        <a href="http:/facebook.com" target="_blank"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="http:/twitter.com" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="http:/instagram.com" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
        <a href="http:/youtube.com" target="_blank"><i class="fab fa-youtube fa-2x"></i></a>
      </div>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a class="current" href="about.html">About</a></li>
      </ul>
    </div>
  </nav>
  <section id="article">
    <div class="container ">
      <div class="page-container">
        <article class="card">
          <img src="img/articles/ent1.jpg" alt="">
          <h1 class="l-heading">Lorem ipsum dolor sit amet.</h1>
          <div class="meta">
            <small>
              <i class="fas fa-user"></i> Written by John Doe January 1, 2019
            </small>
            <div class="category category-ent">Entertainment</div>

          </div>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga consectetur, error ipsa quos dolorem,
            reprehenderit ullam, nam laborum delectus ipsum ad optio architecto enim minus officiis nobis. Nemo itaque
            dolorem in consequatur quos, officia nihil voluptate necessitatibus rem architecto iusto numquam ullam,
            quidem eaque inventore minus. Rerum numquam excepturi a?</p> <br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum id vitae debitis alias voluptatum nam dolor
            aut, explicabo deleniti commodi repellendus aspernatur, eius blanditiis harum veniam porro. Ab aut eaque,
            dolores facere quisquam exercitationem est necessitatibus unde amet officia quasi, velit voluptas tenetur!
            Soluta odio recusandae nostrum obcaecati dignissimos fugit animi saepe, ullam quibusdam totam quasi porro
            pariatur. Eligendi, alias rem itaque fugiat amet rerum assumenda. Ut, harum at. Deserunt quis aspernatur
            sequi quod laboriosam totam perferendis voluptatem neque, eius earum porro nesciunt blanditiis omnis.
            Voluptate est ex facere, rerum qui quia incidunt voluptatum dolorum assumenda soluta, sit porro natus
            quibusdam. Nulla id quasi cum quos, assumenda modi. Dignissimos, corporis. Qui culpa sint alias unde.
            Placeat corrupti harum doloribus consequuntur, molestias dolore quaerat reiciendis deleniti aliquid aliquam
            soluta accusamus autem nisi repellat, alias eius. Nam quae labore aliquid delectus quis amet laudantium,
            nisi quia molestiae soluta dolorem, enim aut. Accusamus.</p>
        </article>
        <aside id="category" class="card">
          <h2>Categories</h2>
          <ul class="list">
            <li><a href="#"><i class="fas fa-chevron-right"></i> Sports</a></li>
            <li><a href="#"><i class="fas fa-chevron-right"></i> Entertainment</a></li>
            <li><a href="#"><i class="fas fa-chevron-right"></i> Technology</a></li>
            <li><a href="#"><i class="fas fa-chevron-right"></i> Fashion</a></li>
            <li><a href="#"><i class="fas fa-chevron-right"></i> Shopping</a></li>
          </ul>
        </aside>
        <aside class="card bg-secondary">
          <h2>Join Our Club</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, exercitationem.</p>
          <a href="#" class="btn btn-dark btn-block">Join Now</a>
        </aside>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer id="main-footer" class="py-2">
    <div class="container footer-container">
      <div>
        <img src="img/logo_light.png" alt="NewsGrid">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi consequuntur reprehenderit qui veritatis
          perspiciatis fugiat quas autem porro magnam voluptas!</p>
      </div>
      <div>
        <h3>Email Newsletter</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <form name="contact" method="POST" data-netlify="true">
          <input type="email" placeholder="Enter Email">
          <input type="submit" value="Subscribe" class="btn btn-primary">
        </form>
      </div>
      <div>
        <h3>Site Links</h3>
        <ul class="list">
          <li><a href="#">Help & Support</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <h2>Join Our Club</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam, cumque?</p>
        <a href="#" class="btn btn-secondary">Join Us</a>
      </div>
      <div>
        <p>
          Copyrigth &copy;2019, All Rigths Reserved
        </p>
      </div>
    </div>


  </footer>
</body>

</html>