<header>
  <div class="container">
    <a href="#"><img src="https://i.ibb.co/Bz08b14/New-Project.png" alt="logo"></a>
    <div class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
        <li class="nav__item"><a href="#" class="nav__link">About</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Sign In</a></li>
        <li class="nav__item"><a href="#" class="nav__link nav__link--button">Sign Up</a></li>
      </ul>
    </div>
  </div>
</header>
<div class="hero">
  <div class="container row">
    <div class="hero__text">
      <h1>Responsive layouts don’t have to be a struggle</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <a href="#" class="btn">I want to learn</a>
    </div>

    <img class="hero__img" src="https://source.unsplash.com/1600x900/?family" alt="family">
  </div>
</div>

<div class="container row">
  <div class="body-content">
    <h2>Quality designs made custom, on demand, just for you</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </p>
  </div>
  <div class="sidebar side-row">
    <div class="side-col">
      <h2>Cheap</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>
    </div>

    <div class="side-col">
      <h2>Quick</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>
    </div>

    <div class="side-col">
      <h2>Quality</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>
    </div>
  </div>
</div>

/* 
////// For this challenge ///////

- All text is in the JS section
  this pen
- Use this code for the image
  (not the same image!)
  <img src="https://unsplash.it/386/292" alt="">

// Requirements
1. Refer to the design specs for the
   overall layout 
2. The image should line up with
   the sidebar in the section
   below

*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
}

header {
  background: #136c72;
  padding: 0.8em 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__list {
  margin: 0;
  list-style: none;
  display: flex;
}

.nav__link {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 0.5em;
}

.nav__link--button {
  background: #fff;
  color: #136c72;
  padding: 0.25em 1em;
  border-radius: 10em;
}

.nav__link:hover {
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: 3rem;
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  /* display: flex => flex container */
  display: flex;
  justify-content: space-between;

  /* can't use yet */
  /* gap: 100px; */
}

.col {
  /* these are now flex items */
  width: 100%;
}

.col + .col {
  margin-left: 30px;
}

.hero {
  padding: 100px 0;
  background-color: #23424a;
  color: #fff;
}

.hero__text {
  width: 62%;
}

.hero__img {
  width: 32%;
  align-self: flex-start;
}

.hero p {
  margin-bottom: 3em;
}

.btn {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #23424a;
  font-weight: 900;
  background-color: #38cfd9;
  padding: 0.75em 2em;
  border-radius: 100px;
}

.btn:hover,
.btn:focus {
  opacity: 0.75;
}

.body-content h2 {
  color: #136c72;
}

.body-content p {
  color: #3a3a3a;
}

.sidebar {
  background: #136c72;
  color: #fff;
  margin: 40px 0;
}

.side-col {
  text-align: center;
  padding: 16px;
}

## Quality designs made custom, on demand, just for you

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

## Cheap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

## Quick
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

## Quality
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.