079-creative agency website/index.html

<!-- Based on Creative Agency Website From Scratch by Brad Traversy (2021)
see: https://www.youtube.com/watch?v=lvYnfMOUOJY -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Creative Agency</title>
  </head>
  <body>
    <header>
      <div class="logo"><h1>Creative Agency</h1></div>
      <div class="toggle"></div>
      <div class="navigation">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#work">Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="social-bar">
          <ul>
            <li>
              <a href="https://facebook.com">
                <img
                  src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/facebook.png?raw=true"
                  target="_blank"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="https://twitter.com">
                <img
                  src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/twitter.png?raw=true"
                  target="_blank"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="https://instagram.com">
                <img
                  src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/instagram.png?raw=true"
                  target="_blank"
                  alt=""
                />
              </a>
            </li>
          </ul>
          <a href="mailto:you@email.com" class="email-icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
              alt=""
            />
          </a>
        </div>
      </div>
    </header>
    <!-- home -->
    <section class="home" id="home">
      <img
        src="https://images.unsplash.com/photo-1507206130118-b5907f817163?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80"
        class="home-img"
        alt=""
      />
      <div class="home-content">
        <h2>
          We help <span class="highlight">you</span> to achieve <br />
          <span class="highlight">your goals</span>
        </h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo itaque
          nam saepe vero voluptatem vel fuga a eaque earum alias ipsam
          aspernatur culpa maxime laboriosam, impedit quae officiis consectetur
        </p>
        <a href="#services" class="btn">Get Started</a>
      </div>
    </section>
    <!-- services -->
    <section id="services">
      <div class="title">
        <h2>Services that we can help you with</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
          iusto molestias accusamus rem nobis est, et laborum harum doloremque
          nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
          eaque reiciendis laboriosam corporis fuga vero ratione veritatis
          numquam, libero magni voluptatum omnis molestiae officiis
          exercitationem qui quidem nam.
        </p>
      </div>
      <div class="services">
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/001.png?raw=true"
              alt=""
            />
          </div>
          <h3>Design</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/002.png?raw=true"
              alt=""
            />
          </div>
          <h3>Development</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/003.png?raw=true"
              alt=""
            />
          </div>
          <h3>SEO</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/004.png?raw=true"
              alt=""
            />
          </div>
          <h3>Marketing</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/005.png?raw=true"
              alt=""
            />
          </div>
          <h3>App Development</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
        <div class="service">
          <div class="icon">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/006.png?raw=true"
              alt=""
            />
          </div>
          <h3>Error Fixing</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
          </p>
        </div>
      </div>
    </section>
    <!-- work -->
    <section id="work">
      <div class="title">
        <h1>Some of our finest work</h1>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
          iusto molestias accusamus rem nobis est, et laborum harum doloremque
          nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
          eaque reiciendis laboriosam corporis fuga vero ratione veritatis
          numquam, libero magni voluptatum omnis molestiae officiis
          exercitationem qui quidem nam.
        </p>
      </div>
      <div class="portfolio">
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item1.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item2.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item3.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item4.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item5.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item6.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item7.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item8.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item9.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item10.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item11.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item12.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item13.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item14.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item15.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
        <div class="item">
          <img
            src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item16.jpg?raw=true"
            alt=""
          />
          <div class="action">
            <a href="#">Launch</a>
          </div>
        </div>
      </div>
    </section>
    <!-- contact -->
    <section id="contact">
      <div class="title">
        <h2>Contact us</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
          iusto molestias accusamus rem nobis est, et laborum harum doloremque
          nemo non, minima quos totam labore
        </p>
      </div>
      <div class="contact">
        <div class="contact-form">
          <form>
            <div class="row">
              <div class="input50">
                <input type="text" placeholder="First Name" />
              </div>
              <div class="input50">
                <input type="text" placeholder="Last Name" />
              </div>
            </div>
            <div class="row">
              <div class="input50">
                <input type="text" placeholder="Email" />
              </div>
              <div class="input50">
                <input type="text" placeholder="Subject" />
              </div>
            </div>
            <div class="row">
              <div class="input100">
                <textarea placeholder="Message"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="input100">
                <input type="submit" value="Send" />
              </div>
            </div>
          </form>
        </div>
        <div class="contact-info">
          <div class="info-box">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/address.png?raw=true"
              class="contact-icon"
              alt=""
            />
            <div class="details">
              <h4>Address</h4>
              <p>28 Neon Tower, New York City, USA</p>
            </div>
          </div>
          <div class="info-box">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
              class="contact-icon"
              alt=""
            />
            <div class="details">
              <h4>Email</h4>
              <a href="mailto:anyone@example.com">anyone@example.com</a>
            </div>
          </div>
          <div class="info-box">
            <img
              src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/call.png?raw=true"
              class="contact-icon"
              alt=""
            />
            <div class="details">
              <h4>Call</h4>
              <a href="tel:+19785555555">+1 978 555 5555</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script src="script.js"></script>
  </body>
</html>