project-tracking-intro-component/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">

  <link rel="stylesheet" href="/project-tracking-intro-component/style.css">

  <title>Frontend Mentor | Project tracking intro component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>

  <div class="bg_curve"></div>
  <main class="wrapper">
    <header>
      <div class="logo">
        <img src="/project-tracking-intro-component/images/logo.svg" alt="">
      </div>
      <nav class="navbar">
        <div class="nav_btn">
          <img src="/project-tracking-intro-component/images/icon-hamburger.svg" alt="" class="nav_open">
          <img src="/project-tracking-intro-component/images/icon-close.svg" alt="" class="nav_close">
        </div>
        <ul>
          <li><a href="#">Product</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#" class="nav_login">Login</a></li>
        </ul>
      </nav>
    </header>

    <div class="bg_illustration"></div>

    <section class="content_cols">
      <div class="col1 content_text">
        <h3><span class="dark">New</span> Monograph Dashboard</h3>
        <h1>Powerful insights into your team</h1>
        <p> Project planning and time tracking for agile teams</p>

        <div class="content_cta">
          <a href="#" class="btn btn-fill">Schedule a demo</a>
          <p class="cta_text">To see a preview</p>
        </div>
      </div><!-- col1-->

      <div class="col2 content_img">
        <img src="/project-tracking-intro-component/images/illustration-devices.svg" alt="">
      </div>
    </section>
    <!--content cols-->

  </main>
  <!--wrapper-->


  <footer>
    Challenge by
    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor.</a> Coded by <a
      href="https://github.com/vimode/frontend-mentor-challenges">vimode</a>
  </footer>

  <script src="/project-tracking-intro-component/script.js"></script>
</body>

</html>