index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technology App for adventurous people</title>
    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="sass/main.css">
    <link rel="shortcut icon" type="image/png" href="images/logo-2.png" />
</head>
<body>

  <!--Navigation-->
  <div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle" />

    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon">&nbsp;</span>
    </label>

    <div class="navigation__background">&nbsp;</div>

    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item">
          <a href="#" class="navigation__link"
            ><span>01</span>About technology</a
          >
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link"
            ><span>02</span>Future Technology</a
          >
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link"
            ><span>03</span>Latest Technology</a
          >
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link"><span>04</span>Blockchain</a>
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link"><span>05</span>see future</a>
        </li>
      </ul>
    </nav>
  </div>

  <!--Header-->
  <header class="header">
    <div class="header__logo-box">
      <img src="images/logo-1.png" alt="Logo" class="header__logo" />
    </div>

    <div class="header__text-box">
      <h1 class="heading-primary">
        <span class="heading-primary--main">technology</span>
        <span class="heading-primary--sub">is where life happens</span>
      </h1>

      <a href="#section-tours" class="btn btn--white btn--animated"
        >Discover technology</a
      >
    </div>
  </header>

  <!--Main-->
  <main>
    <section class="section-about">
      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">Exciting technology for tech people</h2>
      </div>

      <div class="row">
        <div class="col-1-of-2">
          <h3 class="heading-tertiary u-margin-bottom-small">
            You're going to fall in love with technology
          </h3>
          <p class="paragraph">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
            ipsum sapiente aspernatur libero repellat quis consequatur ducimus
            quam nisi exercitationem omnis earum qui.
          </p>

          <h3 class="heading-tertiary u-margin-bottom-small">
            Live technology like you never have before
          </h3>
          <p class="paragraph">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Asperiores nulla deserunt voluptatum nam.
          </p>

          <a href="#" class="btn-text">Learn more &rarr;</a>
        </div>
        <div class="col-1-of-2">
          <div class="composition">
            <img
              srcset="images/img-3.jpg 300w, images/img-3.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
              alt="Photo 1"
              class="composition__photo composition__photo--p1"
              src="images/img-3.jpg"
            />

            <img
              srcset="images/img-5.jpg 300w, images/img-5.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
              alt="Photo 2"
              class="composition__photo composition__photo--p2"
              src="images/img-5.jpg"
            />

            <img
              srcset="images/img-4.jpg 300w, images/img-4.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
              alt="Photo 3"
              class="composition__photo composition__photo--p3"
              src="images/img-4.jpg"
            />

          </div>
        </div>
      </div>
    </section>

    <section class="section-features">
      <div class="row">
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-world"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">
              technology world
            </h3>
            <p class="feature-box__text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur.
            </p>
          </div>
        </div>

        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-compass"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">
              AI Technology
            </h3>
            <p class="feature-box__text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur.
            </p>
          </div>
        </div>

        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-map"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">
              Education Industry
            </h3>
            <p class="feature-box__text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur.
            </p>
          </div>
        </div>

        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-heart"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">
              Future of Tech
            </h3>
            <p class="feature-box__text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="section-tours" id="section-tours">
      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">Most popular Technology</h2>
      </div>

      <div class="row">
        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--1">&nbsp;</div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--1"
                  >The Future Technology</span
                >
              </h4>
              <div class="card__details">
                <ul>
                  <li>Bloackchain</li>
                  <li>New Technology</li>
                  <li>Light of tech</li>
                  <li>Note of tech</li>
                  <li>Developer</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-1">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">Only</p>
                  <p class="card__price-value">$297</p>
                </div>
                <a href="#popup" class="btn btn--white">Read now!</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--2">&nbsp;</div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--2"
                  >What To Excepts</span
                >
              </h4>
              <div class="card__details">
                <ul>
                  <li>Morden Gagets</li>
                  <li>Fast business</li>
                  <li>Artifical Technology</li>
                  <li>AI Developement</li>
                  <li>Ease of Business</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-2">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">Only</p>
                  <p class="card__price-value">$497</p>
                </div>
                <a href="#popup" class="btn btn--white">Read now!</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--3">&nbsp;</div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--3"
                  >Skill Development</span
                >
              </h4>
              <div class="card__details">
                <ul>
                  <li>Complete It dreven</li>
                  <li>NFT Services</li>
                  <li>Backing Technology</li>
                  <li>Better Talent</li>
                  <li>System type</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-3">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">Only</p>
                  <p class="card__price-value">$897</p>
                </div>
                <a href="#popup" class="btn btn--white">Read now!</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="u-center-text u-margin-top-huge">
        <a href="#" class="btn btn--green">Discover all tours</a>
      </div>
    </section>

    <section class="section-stories">
      <div class="bg-video">
        <video class="bg-video__content" autoplay muted loop>
          <source src="images/video.mp4" type="video/mp4" />
          Your browser is not supported!
        </video>
      </div>

      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">We make people genuinely happy</h2>
      </div>

      <div class="row">
        <div class="story">
          <figure class="story__shape">
            <img
              src="images/img-3.jpg"
              alt="Person on a tour"
              class="story__img"
            />
            <figcaption class="story__caption">Jack Smith</figcaption>
          </figure>
          <div class="story__text">
            <h3 class="heading-tertiary u-margin-bottom-small">
              Technology changing the life of people
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur libero repellat quis
              consequatur ducimus quam nisi exercitationem omnis earum qui.
              Aperiam, ipsum sapiente aspernatur libero repellat quis
              consequatur ducimus quam nisi exercitationem omnis earum qui.
            </p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="story">
          <figure class="story__shape">
            <img
              src="images/img-4.jpg"
              alt="Person on a tour"
              class="story__img"
            />
            <figcaption class="story__caption">Tom Wilson</figcaption>
          </figure>
          <div class="story__text">
            <h3 class="heading-tertiary u-margin-bottom-small">
              technology and financial industary
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aperiam, ipsum sapiente aspernatur libero repellat quis
              consequatur ducimus quam nisi exercitationem omnis earum qui.
              Aperiam, ipsum sapiente aspernatur libero repellat quis
              consequatur ducimus quam nisi exercitationem omnis earum qui.
            </p>
          </div>
        </div>
      </div>

      <div class="u-center-text u-margin-top-huge">
        <a href="#" class="btn-text">Read all stories &rarr;</a>
      </div>
    </section>

    <section class="section-book">
      <div class="row">
        <div class="book">
          <div class="book__form">
            <form action="#" class="form">
              <div class="u-margin-bottom-medium">
                <h2 class="heading-secondary">Start booking now</h2>
              </div>

              <div class="form__group">
                <input
                  type="text"
                  class="form__input"
                  placeholder="Full name"
                  id="name"
                  required
                />
                <label for="name" class="form__label">Full name</label>
              </div>

              <div class="form__group">
                <input
                  type="email"
                  class="form__input"
                  placeholder="Email address"
                  id="email"
                  required
                />
                <label for="email" class="form__label">Email address</label>
              </div>

              <div class="form__group u-margin-bottom-medium">
                <div class="form__radio-group">
                  <input
                    type="radio"
                    class="form__radio-input"
                    id="small"
                    name="size"
                  />
                  <label for="small" class="form__radio-label">
                    <span class="form__radio-button"></span>
                    Small tour group
                  </label>
                </div>

                <div class="form__radio-group">
                  <input
                    type="radio"
                    class="form__radio-input"
                    id="large"
                    name="size"
                  />
                  <label for="large" class="form__radio-label">
                    <span class="form__radio-button"></span>
                    Large tour group
                  </label>
                </div>
              </div>

              <div class="form__group">
                <button class="btn btn--green">Next step &rarr;</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!--Footer-->
  <footer class="footer">
    <div class="footer__logo-box">
      <picture class="footer__logo">
        <img
          srcset="images/logo-1.png 1x, images/logo-1.png 2x"
          alt="Full logo"
          src="images/logo-1.png"
        />
      </picture>
    </div>
    <div class="row">
      <div class="col-1-of-2">
        <div class="footer__navigation">
          <ul class="footer__list">
            <li class="footer__item">
              <a href="#" class="footer__link">Company</a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">Contact us</a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">Carrers</a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">Privacy policy</a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">Terms</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-1-of-2">
        <p class="footer__copyright">
          Built by <a href="#" class="footer__link">Halil Bilgil</a> for his
          online course
          <a href="#" class="footer__link">Advanced CSS and Sass</a>.
          Copyright &copy; by <a class="footer__link" href="https://github.com/hbilgil" target="_blank"> Halil Bilgil </a> You are 100% allowed to use this
          webpage for both personal and commercial use.
        </p>
      </div>
    </div>
  </footer>

  <!--Popup-->
  <div class="popup" id="popup">
    <div class="popup__content">
      <div class="popup__left">
        <img src="images/img-3.jpg" alt="Tour photo" class="popup__img" />
        <img src="images/img-4.jpg" alt="Tour photo" class="popup__img" />
      </div>
      <div class="popup__right">
        <a href="#section-tours" class="popup__close">&times;</a>
        <h2 class="heading-secondary u-margin-bottom-small">
          Learn Technology
        </h2>
        <h3 class="heading-tertiary u-margin-bottom-small">
          Important &ndash; Please read these terms before booking
        </h3>
        <p class="popup__text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed
          risus pretium quam. Aliquam sem et tortor consequat id. Volutpat
          odio facilisis mauris sit amet massa vitae. Mi bibendum neque
          egestas congue. Placerat orci nulla pellentesque dignissim enim sit.
          Vitae semper quis lectus nulla at volutpat diam ut venenatis.
          Malesuada pellentesque elit eget gravida cum sociis natoque
          penatibus et. Proin fermentum leo vel orci porta non pulvinar neque
          laoreet. Gravida neque convallis a cras semper. Molestie at
          elementum eu facilisis sed odio morbi quis. Faucibus vitae aliquet
          nec ullamcorper sit amet risus nullam eget. Nam libero justo laoreet
          sit. Amet massa vitae tortor condimentum lacinia quis vel eros
          donec. Sit amet facilisis magna etiam. Imperdiet sed euismod nisi
          porta.
        </p>
        <a href="#" class="btn btn--green">Read now</a>
      </div>
    </div>
  </div>
</body>
</html>