06. Semantic Blog Layout

#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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Semantic Blog Layout</title>
  </head>
  <body>
    <header>
      <h1>Developer News</h1>
      <nav>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <header>
          <h2>HTML</h2>
        </header>
        <article>
          <p><strong>New feature: JPEG XL image format</strong></p>
          <p>
            JPEG XL image format is a modern image format optimized for web
            environments. JPEG XL generally has better compression than WebP,
            JPEG, PNG and GIF and is designed to supersede them.
          </p>
          <p>
            Learn more at:
            <a href="https://en.wikipedia.org/wiki/JPEG_XL"
              >https://en.wikipedia.org/wiki/JPEG_XL</a
            >
          </p>
          <p>By The HTTP Working Group. Published <time>January 23rd</time></p>
        </article>
        <article>
          <p><strong>New feature: Cookie Store API</strong></p>
          <p>
            Cookie Store API is a JS API for reading and modifying cookies.
            Compared to the existing `document.cookie` method, the API provides
            a much more modern interface, which can also be used in service
            workers.
          </p>
          <p>
            Learn more at:
            <a
              href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/CookieStore"
              >https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/CookieStore</a
            >
          </p>
          <p>By Joshua Bell. Published <time>December 15th</time></p>
        </article>
      </section>
      <section>
        <header>
          <h2>JavaScript</h2>
        </header>
        <article>
            <p><strong>Billboard.js 3.0: The D3.js-Powered Chart Library</strong></p>
            <p>Billboard.js is a popular library supporting a whole range of chart types out of the box (bar, line, areas, donuts, radars, and various hybrids) – 3.0 brings candlestick / OHLC chart support (often used in financial contexts) and supports D3.js v6.</p>
            <p>Learn more at: <a href="https://github.com/naver/billboard.js">https://github.com/naver/billboard.js</a></p>
            <p>By Jae Sung Park. Published <time>March 24th</time></p>
        </article>
        <article>
            <p><strong>Nine JavaScript and TypeScript ORMs</strong></p>
            <p>A roundup, complete with code examples, showing off a variety of tools like Knex.js, Mongoose, TypeORM, Waterline, and Bookshelf.</p>
            <p>Learn more at: <a href="https://www.sitepoint.com/javascript-typescript-orms/">https://www.sitepoint.com/javascript-typescript-orms/</a></p>
            <p>By Michael Wanyoike. Published <time>March 31rd</time></p>
        </article>
      </section>
    </main>
    <footer>
        <p>&copy; 2021 DeveloperNewsPortal.info</p>
        <p>Please contact <a href="#">Troy McClure</a> for questions about these articles.</p>
        </footer>
  </body>
</html>


#CSS

header {
    border-radius: 3px;
    padding: 8px 10px;
    background-color: #dceaf4;
    border: 1px solid #bfcacb;
}

header * {
    display: inline;
    vertical-align: middle;
}

nav ul {
    margin: 0;
    padding: 10px;
}

nav li a {
    text-decoration: none;
}

body {
    background-color: #b7d7e8;
}

section h2 {
    margin: 15px 10px;
}

article {
    display: table-cell;
    width: 50%;
    padding: 10px 15px;
    background-color: #e5f0f7;
    border: 10px solid #b7d7e8;
}

footer {
    margin: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #dceaf4;
    border: 1px solid #bfcacb;
}

footer p {
    margin: 5px;
}