index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <!-- CSS file -->
  <link rel="stylesheet" href="style.css">
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Sunnyside agency landing page</title>
</head>
<body>
<!-- Start header -->
<header>
  <div class="container">
    <div class="logo">
      <img src="./images/logo.svg" alt="SunnySide">
    </div>
    <nav>
      <ul>
        <li><a href="#About">About</a></li>
        <li><a href="#Services">Services</a></li>
        <li><a href="#Projects">Projects</a></li>
      </ul>
      <button>Contact</button>
    </nav>
    <div class="ham-icon">
      <img src="./images/icon-hamburger.svg" alt="">
    </div>
  </div>
</header>
<!-- End header -->
<!-- Start landing -->
<div class="landing">
  <div class="intro">
    <h1>We are creatives</h1>
    <img src="./images/icon-arrow-down.svg" alt="Down arrow icon">
  </div>
</div>
<!-- End landing -->
<!-- Start services -->
<div class="services" id="#Services">
  <div class="card">
  </div>
  <div class="card">
    <div class="text">
      <h2>Transform your brand</h2>
      <p>
        We are a full-service creative agency specializing in helping brands grow fast. 
        Engage your clients through compelling visuals that do most of the marketing for you.
      </p>
      <a href="#">Learn more</a>
    </div>
  </div>
  <div class="card">
  </div>
  <div class="card">
    <div class="text">
      <h2>Stand out to the right audience</h2>
      <p>
        Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.
      </p>
      <a href="#">Learn more</a>
    </div>
  </div>
  <div class="card1 cherry">
    <h2>Graphic design</h2>
    <p>
      Great design makes you memorable. We deliver artwork that underscores your brand message and captures potential clients’ attention.
    </p>
  </div>
  <div class="card1 orange">
    <h2>Photography</h2>
    <p>
      Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
    </p>
  </div>
</div>
<!-- End services -->
<!-- Start  client testimonials-->
<div class="client-testimonials">
  <h2>Client testimonials</h2>
  <div class="container">
    <div class="card">
      <img src="./images/image-emily.jpg" alt="">
      <p>
        We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.
      </p>
      <p class="name">Emily R.</p>
      <p class="job">Marketing Director</p>
    </div>
    <div class="card">
      <img src="./images/image-thomas.jpg" alt="">
      <p>
        Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.
      </p>
      <p class="name">Thomas S.</p>
      <p class="job">Chief Operating Officer</p>
    </div>
    <div class="card">
      <img src="./images/image-jennie.jpg" alt="">
      <p>
        Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
      </p>
      <p class="name">Jennie F.</p>
      <p class="job">Business Owner</p>
    </div>
  </div>
</div>
<!-- End client testimonials-->
<!-- Start bottom images -->
<div class="images-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<!-- End bottom images -->
<!-- Start footer -->
<footer>
  <img src="./images/logo1.svg" alt="SunnySide">
  <div class="links">
    <ul>
      <li><a href="#About">About</a></li>
      <li><a href="#Services">Services</a></li>
      <li><a href="#Projects">Projects</a></li>
    </ul>
  </div>
  <div class="find-us">
    <ul>
      <li><a href="https://www.facebook.com/"><img src="./images/icon-facebook.svg" alt=""></a></li>
      <li><a href="https://www.instagram.com/"><img src="./images/icon-instagram.svg" alt=""></a></li>
      <li><a href="https://twitter.com/"><img src="./images/icon-twitter.svg" alt=""></a></li>
      <li><a href="https://www.pinterest.com/"><img src="./images/icon-pinterest.svg" alt=""></a></li>
    </ul>
  </div>
</footer>
<!-- End footer -->
<script>
  const hamIcon = document.querySelector('.ham-icon');
  const nav = document.querySelector('header nav');
  let isActive = false;

  hamIcon.addEventListener('click', () => {
    isActive = !isActive;

    if (isActive) {
      nav.style.display = 'flex';
    } else {
      nav.style.display = 'none';
    }
  });

  window.addEventListener('resize', () => {
    if (window.innerWidth > 768) {
      hamIcon.style.display = 'none';
      nav.style.display = 'flex';
      isActive = true;
    } else {
      hamIcon.style.display = 'block';
      nav.style.display = 'none';
      isActive = false;
    }
  });

  if (window.innerWidth > 768) {
    hamIcon.style.display = 'none';
    nav.style.display = 'flex';
    isActive = true;
  } else {
    hamIcon.style.display = 'block';
    nav.style.display = 'none';
    isActive = false;
  }
</script>
</body>
</html>