index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebStudio</title>
    <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=Raleway:wght@800&family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/lib/modern-normalize.min.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- Header -->
    <header id="header" class="header">
      <div class="container">
        <nav class="header-nav">
          <a class="header-logo logo link" href="./index.html"
            >Web<span class="logo-accent">Studio</span></a
          >
          <ul class="header-list list">
            <li class="header-list-item item">
              <a class="header-list-link link current" href="./index.html"
                >Studio</a
              >
            </li>
            <li class="header-list-item item">
              <a class="header-list-link link" href="./portfolio.html"
                >Portfolio</a
              >
            </li>
            <li class="header-list-item item">
              <a class="header-list-link link" href="">Contacts</a>
            </li>
          </ul>
        </nav>
        <address class="header-adress adress">
          <ul class="header-adress-list list">
            <li class="header-adress-list-item item">
              <a
                class="header-adress-list-link link"
                href="mailto:info@devstudio.com"
                >info@devstudio.com</a
              >
            </li>
            <li class="header-adress-list-item item">
              <a class="header-adress-list-link link" href="tel:+110001111111"
                >+11 (000) 111-11-11</a
              >
            </li>
          </ul>
        </address>
      </div>
    </header>
    <!-- Main -->
    <main id="main-page" class="page main-page">
      <!-- Hero -->
      <section id="hero" class="hero section">
        <div class="container">
          <h1 class="hero-title title">
            Effective Solutions for Your Business
          </h1>
          <button
            id="order-service"
            class="btn btn-accent order-service"
            type="button"
            data-modal-open
          >
            Order Service
          </button>
        </div>
      </section>
      <!-- Our advantages -->
      <section id="our-advantages" class="advantages section">
        <div class="container">
          <h2 class="advantages-title section-title title visually-hidden">
            Our Advantages
          </h2>
          <ul class="advantages-list list">
            <li class="advantages-list-item item">
              <div class="advantages-item-thumb thumb">
                <svg width="64" height="64">
                  <use href="./images/icons.svg#icon-antenna"></use>
                </svg>
              </div>
              <h3 class="advantages-list-title title">Strategy</h3>
              <p class="advantages-list-text text">
                Our goal is to identify the business problem to walk away with
                the perfect and creative solution.
              </p>
            </li>
            <li class="advantages-list-item item">
              <div class="advantages-item-thumb thumb">
                <svg width="64" height="64">
                  <use href="./images/icons.svg#icon-clock"></use>
                </svg>
              </div>
              <h3 class="advantages-list-title title">Punctuality</h3>
              <p class="advantages-list-text text">
                Bring the key message to the brand's audience for the best price
                within the shortest possible time.
              </p>
            </li>
            <li class="advantages-list-item item">
              <div class="advantages-item-thumb thumb">
                <svg width="64" height="64">
                  <use href="./images/icons.svg#icon-diagram"></use>
                </svg>
              </div>
              <h3 class="advantages-list-title title">Diligence</h3>
              <p class="advantages-list-text text">
                Research and confirm brands that present the strongest digital
                growth opportunities and minimize risk.
              </p>
            </li>
            <li class="advantages-list-item item">
              <div class="advantages-item-thumb thumb">
                <svg width="64" height="64">
                  <use href="./images/icons.svg#icon-astronaut"></use>
                </svg>
              </div>
              <h3 class="advantages-list-title title">Technologies</h3>
              <p class="advantages-list-text text">
                Design practice focused on digital experiences. We bring forth a
                deep passion for problem-solving.
              </p>
            </li>
          </ul>
        </div>
      </section>
      <!-- What are we doing -->
      <section id="services" class="services section">
        <div class="container">
          <h2 class="services-title section-title title">What are we doing</h2>
          <ul class="services-list list">
            <li class="services-list-item item">
              <img
                src="./images/wawd-img-1.jpg"
                alt="Computer"
                width="360"
                height="300"
              />
            </li>
            <li class="services-list-item item">
              <img
                src="./images/wawd-img-2.jpg"
                alt="Phones with different layouts"
                width="360"
                height="300"
              />
            </li>
            <li class="services-list-item item">
              <img
                src="./images/wawd-img-3.jpg"
                alt="Phone in a hand infront of macbook"
                width="360"
                height="300"
              />
            </li>
          </ul>
        </div>
      </section>
      <!-- Our team -->
      <section id="our-team" class="team section">
        <div class="container">
          <h2 class="team-title section-title title">Our Team</h2>
          <ul class="team-list list">
            <li class="team-list-item item">
              <div class="thumb">
                <img
                  src="./images/team/img-1.jpg"
                  alt="Mark Guerrero"
                  width="264"
                  height="260"
                />
              </div>
              <div class="team-item-desc">
                <h3 class="team-list-title title">Mark Guerrero</h3>
                <p class="team-list-text text">Product Designer</p>
                <ul class="team-list-social list">
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-instagram"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-twitter"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-facebook"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-linkedin"></use>
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="team-list-item item">
              <img
                src="./images/team/img-2.jpg"
                alt="Tom Ford"
                width="264"
                height="260"
              />
              <div class="team-item-desc">
                <h3 class="team-list-title title">Tom Ford</h3>
                <p class="team-list-text text">Frontend Developer</p>
                <ul class="team-list-social list">
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-instagram"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-twitter"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-facebook"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-linkedin"></use>
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="team-list-item item">
              <img
                src="./images/team/img-3.jpg"
                alt="Camila Garcia"
                width="264"
                height="260"
              />
              <div class="team-item-desc">
                <h3 class="team-list-title title">Camila Garcia</h3>
                <p class="team-list-text text">Marketing</p>
                <ul class="team-list-social list">
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-instagram"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-twitter"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-facebook"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-linkedin"></use>
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="team-list-item item">
              <img
                src="./images/team/img-4.jpg"
                alt="Daniel Wilson"
                width="264"
                height="260"
              />
              <div class="team-item-desc">
                <h3 class="team-list-title title">Daniel Wilson</h3>
                <p class="team-list-text text">UI Designer</p>
                <ul class="team-list-social list">
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-instagram"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-twitter"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-facebook"></use>
                      </svg>
                    </a>
                  </li>
                  <li class="team-list-social-item item">
                    <a href="" class="team-list-social-link link">
                      <svg class="team-list-social-icon" width="16" height="16">
                        <use href="./images/icons.svg#icon-linkedin"></use>
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section id="customers" class="customers section">
        <div class="container">
          <h2 class="customers-title section-title title">Customers</h2>
          <ul class="list customers-list">
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-1"></use>
                </svg>
              </a>
            </li>
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-2"></use>
                </svg>
              </a>
            </li>
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-3"></use>
                </svg>
              </a>
            </li>
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-4"></use>
                </svg>
              </a>
            </li>
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-5"></use>
                </svg>
              </a>
            </li>
            <li class="customers-list-item item">
              <a href="" class="customers-list-link">
                <svg width="104" height="56" class="customers-list-icon">
                  <use href="./images/icons.svg#icon-company-6"></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer id="footer" class="footer">
      <div class="container">
        <div class="footer-quote">
          <a class="footer-logo logo link" href="./index.html"
            >Web<span class="logo-accent">Studio</span></a
          >
          <p class="footer-text text">
            Increase the flow of customers and sales for your business with
            digital marketing & growth solutions.
          </p>
        </div>
        <div class="footer-socials">
          <p class="footer-socials-title title">Social media</p>
          <ul class="footer-list-social list">
            <li class="footer-list-social-item item">
              <a href="" class="footer-list-social-link link">
                <svg class="footer-list-social-icon" width="24" height="24">
                  <use href="./images/icons.svg#icon-instagram"></use>
                </svg>
              </a>
            </li>
            <li class="footer-list-social-item item">
              <a href="" class="footer-list-social-link link">
                <svg class="footer-list-social-icon" width="24" height="24">
                  <use href="./images/icons.svg#icon-twitter"></use>
                </svg>
              </a>
            </li>
            <li class="footer-list-social-item item">
              <a href="" class="footer-list-social-link link">
                <svg class="footer-list-social-icon" width="24" height="24">
                  <use href="./images/icons.svg#icon-facebook"></use>
                </svg>
              </a>
            </li>
            <li class="footer-list-social-item item">
              <a href="" class="footer-list-social-link link">
                <svg class="footer-list-social-icon" width="24" height="24">
                  <use href="./images/icons.svg#icon-linkedin"></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </footer>

    <!-- Modal -->
    <div class="backdrop is-hidden" data-modal>
      <div class="modal">
        <button class="modal-close-btn btn" type="button" data-modal-close>
          <svg class="modal-btn-icon" width="8" height="8">
            <use href="./images/icons.svg#icon-close"></use>
          </svg>
        </button>
      </div>
    </div>
    <script src="./js/modal.js"></script>
  </body>
</html>