<header>
  <div class="container row header-row">
    <button class="nav-toggle" aria-label="open navigation">
      <span class="hamburger"></span>
    </button>
    <a class="logo" href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/logo.svg" alt="">
    </a>
    <nav class="nav">
      <ul class="nav__list nav__list--primary">
        <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>
      </ul>
      <ul class="nav__list nav__list--secondary">
        <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>
    </nav>
  </div>
</header>

<section 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 src="https://unsplash.it/400/300" alt="UX design sketches" class="hero__img">
  </div>
</section>

<main class="main container row">
  <section class="primary-content">
    <h2 class="section-title">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>
  </section>
  <aside class="sidebar">
    <h2 class="sidebar-title">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>

    <h2 class="sidebar-title">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>

    <h2 class="sidebar-title">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>
  </aside>
</main>

/* Challenge

   Make the navigation layout work
   on both mobile and large screens.

   Mobile-first, so mobile styles first,
   then add the large screen styles
   inside the existing media query

*/

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

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

img {
  max-width: 100%;
}

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

.section-title {
  color: #87629a;
}

.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;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  /* added for nav-toggle positioning */
  position: relative;
}

header {
  background: #136c72;
  padding: 1em 0;
  text-align: center;
}

.nav {
  width: 100%;
}

.nav-toggle {
  cursor: pointer;
  border: 0;
  width: 3rem;
  height: 3rem;
  padding: 0em;
  border-radius: 50%;
  background: #072a2d;
  color: white;
  transition: opacity 250ms ease;

  position: absolute;
  left: 0;
}

.nav-toggle:focus,
.nav-toggle:hover {
  opacity: 0.75;
}

.hamburger {
  width: 50%;
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  margin: 0 auto;
  height: 3px;
  background: white;
}

.hamburger::before,
.hamburger::after {
  content: "";
  width: 100%;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

/* made changes here from video
   to make it more accessible.
   
   Works the same :) */
.nav {
  visibility: hidden;
  height: 0;
  position: absolute;
}
  
.nav__list
{
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list--secondary
{
  margin-top: 2rem;
}

.nav__link
{
  color: #fff;
  text-decoration: none;
}

.nav--visible {
  visibility: visible;
  height: auto;
  position: relative;
}

.nav__item
{
  margin-top: .75em;
}

.nav__link--button
{
  background-color: #fff;
  color: #23424a;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 50px;
}

.logo {
  height: 30px;
}

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

.hero__img {
  margin-top: 2em;
}

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

.main {
  margin-top: 3em;
}

.sidebar {
  padding: 1em;
  text-align: center;
  color: #fff;
  background-color: #136c72;
}

@media (min-width: 800px) {
  .nav-toggle {
    display: none;
  }

  .nav {
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: auto;
    position: relative;
  }
  
  .nav__list
  {
    margin: 0;
    display: flex;
    justify-content: space-between;
  }
  
  .nav__item
  {
    margin: 0 0 0 1.5rem;
  }

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

  .hero__text {
    width: 62%;
  }

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

  .primary-content {
    width: 62%;
  }

  .sidebar {
    width: 32%;
  }
}

const navToggle = document.querySelector(".nav-toggle");
const nav = document.querySelector(".nav");

navToggle.addEventListener("click", () => {
  nav.classList.toggle("nav--visible");
});