<header>
  <div class="container container-nav">
    <div class="titles">
      <h1>Semantic HTML</h1>
      <p class="subtitle">Semantic HTML Demo</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="container container-body">
  <main>
    <article class="article-featured">
      <section>
        <h2>What Is Cheese?</h2>
        <p>Camembert brie cheddar cream cheese, <em>mascarpone stilton</em>, gouda gruyere havarti haloumi mozzarella. Parmesan pecorino ricotta, roquefort feta wensleydale. Stilton gorgonzola, gouda gruyere havarti. <strong>Haloumi mozzarella</strong>. Roquefort feta wensleydale, stilton gorgonzola, gouda gruyere. Parmesan pecorino ricotta, roquefort feta wensleydale.</p>
        <img src="https://images.unsplash.com/photo-1517999586990-2126f2b0c97d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="brown bar and beans">
      </section>

      <section>
        <h3>Cheese Recipe</h3>
        <p>Parmesan pecorino ricotta, roquefort feta wensleydale. Stilton gorgonzola, gouda gruyere havarti. Haloumi mozzarella. Roquefort feta wensleydale, stilton gorgonzola, gouda gruyere. Parmesan pecorino ricotta, roquefort feta wensleydale. Camembert brie cheddar cream cheese, mascarpone stilton.</p>
        <img src="https://images.unsplash.com/photo-1480951759438-f39a376462f2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80" alt="sliced cheese beside flower petals">
      </section>
    </article>

    <article>
      <h2>Cheesy Cheese</h2>
      <p>Brie stilton gorgonzola, gouda gruyere havarti. Haloumi mozzarella. Roquefort feta wensleydale, stilton gorgonzola, gouda gruyere. Parmesan pecorino ricotta, roquefort feta wensleydale. Camembert brie, roquefort feta wensleydale, stilton gorgonzola, gouda gruyere. Parmesan pecorino ricotta, roquefort feta wensleydale.</p>
      <img src="https://images.unsplash.com/photo-1452195100486-9cc805987862?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="bolognese cheese beside herbs">
    </article>
  </main>

  <div class="sidebar">
    <aside>
      <h2 class="sidebar-title">About Me</h2>
      <p class="sidebar-description">Hard cheese ricotta port-salut. Paneer camembert de normandie brie cheese and wine melted cheese say cheese st. agur blue cheese emmental. Cheese and wine monterey jack cheddar smelly cheese cow melted cheese fromage bocconcini. Parmesan red leicester camembert de normandie chalk and cheese.</p>
      <img class="sidebar-image" src="https://images.unsplash.com/photo-1551212721-f0d4160f0abd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="person holding a cheeseburger">
    </aside>

    <aside class="newsletter">
      <h2>Sign Up For The Newsletter!</h2>
      <form>
        <input type="email" placeholder="your email">
        <button>Submit</button>
      </form>
    </aside>
  </div>
</div>

<div class="container container-footer">
  <footer>
    <p>Ayu@2021</p>
  </footer>
</div>
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap");

/* --------------------------------- */

body {
  margin: 0;
  font-family: "Sora", sans-serif;
}

/* Typography */
h1 {
  margin: 0;
}

.subtitle,
nav a {
  text-transform: uppercase;
}

/* Layout */

.container {
  /*     border: 2px solid red; */
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.titles {
  /*     border: 2px solid green; */
}

header {
  box-shadow: 2px 2px 10px grey;
}

/* navbar */

nav ul {
  /*   border: 2px solid yellow; */
  list-style: none;
  padding: 0;
  display: flex;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  color: #fd5f00;
}

/* -------------- */

.container-body {
  display: flex;
  align-items: baseline;
}

main {
  width: 80%;
  margin-right: 2em;
}

.article-featured {
  padding-bottom: 2em;
  border-bottom: 1px solid gray;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 25%;
  /*   height: 100%; */
  padding: 1em;
  background-color: #c5d86d;
  color: #260c1a;
}

.newsletter {
  margin-top: 2em;
}

img {
  max-width: 100%;
}

.container-footer {
  background-color: #260c1a;
  color: #f7f7f2;
  text-align: center;
  font-weight: 700;
  margin-top: 1.5em;
  padding: 2em;
  box-shadow: -2px -2px 10px grey;
}

@media (max-width: 640px) {
  .container {
    text-align: center;
  }

  .container-nav {
    flex-direction: column;
  }

  nav ul {
    /*     flex-direction: column; */
  }

  nav li {
    margin: -0.3em 1.2em;
  }

  main {
    margin: 0 auto;
  }

  .sidebar {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.