team.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Volti - Book Your Eco-Friendly Ride</title>
  <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />

  <link rel="stylesheet" href="./assets/font/font.css" />
  <link rel="stylesheet" href="./assets/styles/style.css" />
  <link rel="stylesheet" href="./assets/styles/service.css" />
  <link rel="stylesheet" href="./assets/styles/team.css" />
</head>

<body>
  <!-- 
    - #PRELOADER
  -->

  <div class="preload-box" data-preloader>
    <img src="./assets/images/loading.svg" width="45" height="45" alt="loading" />

    <img src="./assets/images/loading-circle.svg" width="75" height="75" alt="loading" class="preload-circle" />
  </div>

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">
      <a href="#" class="logo">
        <img src="./assets/images/logo.svg" width="160" height="50" alt="volti home" />
      </a>

      <nav class="navbar" data-navbar>
        <ul class="navbar-list">
          <li class="navbar-item">
            <a href="./index.html" class="navbar-link">Home</a>
          </li>

          <li class="navbar-item">
            <a href="./service.html" class="navbar-link">Services</a>
          </li>

          <li class="navbar-item">
            <a href="./galery.html" class="navbar-link">Gallery</a>
          </li>

          <li class="navbar-item">
            <a href="./about.html" class="navbar-link">About</a>
          </li>

          <li class="navbar-item">
            <a href="./contacts.html" class="navbar-link">Contact Us</a>
          </li>
        </ul>
      </nav>

      <div class="header-action">
        <a href="tel:+12312345678901" class="contact-number">
          <ion-icon name="call-outline" aria-hidden="true"></ion-icon>

          <span class="span">+(123) 1234-567-8901</span>
        </a>

        <a href="#" class="btn btn-primary">
          <span class="span">Get a quote</span>

          <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
        </a>
      </div>

      <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
        <ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
      </button>
    </div>
  </header>

  <main>
    <div class="about-content-static" data-reveal="right">
      <p class="section-subtitle has-before" id="service-label" data-reveal>What We Do!</p>

      <h2 class="h2 section-title" data-reveal>
        Our Team
      </h2>
    </div>

    <section class="card__container">
      <div class="wrapper">
        <div class="team">
          <div class="team_member">
            <div class="team_img">
              <img src="./assets/images/05.png" alt="Team_image">
            </div>
            <h3>Paul Doe</h3>
            <p class="role">CEO</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Est quaerat tempora, voluptatum quas facere dolorum aut cumque nihil nulla harum nemo
              distinctio quam blanditiis dignissimos.</p>
            <ul class="social social-list">
              <li><a href="" class="fa fa-facebook social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-twitter social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-instagram social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-linkedin social-link" aria-hidden="true"></a></li>
            </ul>
          </div>
          <div class="team_member">
            <div class="team_img">
              <img src="./assets/images/04.png" alt="Team_image">
            </div>
            <h3>Alex Wood</h3>
            <p class="role">Director</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quaerat tempora, voluptatum quas facere
              dolorum aut cumque nihil nulla harum nemo distinctio quam blanditiis dignissimos.</p>
            <ul class="social social-list">
              <li><a href="" class="fa fa-facebook social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-twitter social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-instagram social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-linkedin social-link" aria-hidden="true"></a></li>
            </ul>
          </div>
          <div class="team_member">
            <div class="team_img">
              <img src="./assets/images/03.png" alt="Team_image">
            </div>
            <h3>Rosie Meg</h3>
            <p class="role">Support Lead</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quaerat tempora, voluptatum quas facere
              dolorum aut cumque nihil nulla harum nemo distinctio quam blanditiis dignissimos.</p>
            <ul class="social social-list">
              <li><a href="" class="fa fa-facebook social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-twitter social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-instagram social-link" aria-hidden="true"></a></li>
              <li><a href="" class="fa fa-linkedin social-link" aria-hidden="true"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>


    <!-- 
        - #CONTACT
      -->

    <section class="contact" aria-label="contact" data-reveal="right">
      <div class="container">
        <ul class="contact-list">
          <li>
            <div class="contact-card">
              <div class="card-icon">
                <ion-icon name="call-outline" aria-hidden="true"></ion-icon>
              </div>

              <div>
                <h3 class="h6">Hot Line</h3>

                <a href="tel:+01123457890" class="card-subtitle">+(01) 1234-57-890</a>
              </div>
            </div>
          </li>

          <li>
            <div class="contact-card">
              <div class="card-icon">
                <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
              </div>

              <div>
                <h3 class="h6">E-mail Address</h3>

                <a href="mailto:voltiinfo@gmail.com" class="card-subtitle">voltiinfo@gmail.com</a>
              </div>
            </div>
          </li>

          <li>
            <div class="contact-card">
              <div class="card-icon">
                <ion-icon name="compass-outline" aria-hidden="true"></ion-icon>
              </div>

              <div>
                <h3 class="h6">Our Location</h3>

                <address class="card-subtitle">101 Avenue, S.E. USA</address>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section> 

  </main>


  <!-- 
    - #FOOTER
  -->

  <footer class="footer">
    <div class="container">
      <div class="footer-top section" data-reveal>
        <div class="newsletter-card">
          <div class="card-icon">
            <ion-icon name="mail-unread-outline" aria-hidden="true"></ion-icon>
          </div>

          <h3 class="h3 card-title">Sign up for Electric Car,news & inslights</h3>

          <form action="#" class="newsletter-form">
            <label for="email" class="label">Email address</label>

            <input type="emal" name="email" id="email" placeholder="Email address" required class="email-field" />

            <button type="submit" class="btn btn-primary">Subscribe</button>
          </form>
        </div>

        <div class="footer-list">
          <p class="h6 has-after">Volti WP Theme</p>

          <p class="footer-text">
            A leading developer of A-grade commercial, electric car and bike projects in USA.
            Since its foundation the company has doubled its turnover year on year, with its staff
            numbers.
          </p>

          <a href="#" class="btn-outline">
            <span class="span">Get a quote</span>

            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
          </a>
        </div>

        <ul class="footer-list">
          <li>
            <p class="h6 has-after">Company Info</p>
          </li>

          <li>
            <a href="about.html" class="footer-link">About Us</a>
          </li>

          <li>
            <a href="projects.html" class="footer-link">Our Projects</a>
          </li>

          <li>
            <a href="./team.html" class="footer-link">Meet Our Team</a>
          </li>

          <li>
            <a href="news.html" class="footer-link">News & Media</a>
          </li>

          <li>
            <a href="contacts.html" class="footer-link">Contact Us</a>
          </li>

          <li>
            <a href="carieers.html" class="footer-link">Careers</a>
          </li>
        </ul>

        <ul class="footer-list">
          <li>
            <p class="h6 has-after">Quick Contact</p>
          </li>

          <li>
            <address class="footer-text">
              2307 Beverley Rd Brooklyn, New York 11226 United States.
            </address>
          </li>

          <li>
            <p class="footer-text">
              If you have any questions or need help, feel free to contact with our team.
            </p>
          </li>

          <li>
            <a href="tel:00201061245741" class="contact-link">(002) 01061245741</a>
          </li>
        </ul>
      </div>

      <div class="footer-bottom">
        <div>
          <ul class="footer-bottom-list">
            <li>
              <a href="#" class="footer-bottom-link">Where to Find Us</a>
            </li>

            <li>
              <a href="#" class="footer-bottom-link">Terms of Payment</a>
            </li>

            <li>
              <a href="#" class="footer-bottom-link">Stats Element</a>
            </li>
          </ul>

          <div>
            <p class="copyright" style="display: flex;"><a href="https://github.com/ayshenm">Made with<ion-icon name="heart-outline"></ion-icon> Aisha Mirza</a></p>
          </div>
        </div>

        <img src="./assets/images/footer-logo.svg" width="100" height="63" loading="lazy" alt="Volti home" />

        <ul class="social-list">
          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-facebook" aria-hidden="true"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-twitter" aria-hidden="true"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-youtube" aria-hidden="true"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-linkedin" aria-hidden="true"></ion-icon>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </footer>

  <!-- 
    - #BACK TO TOP
  -->

  <a href="#top" class="back-top-btn" aria-label="go to top" data-go-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>

  <script src="./assets/scripts/main.js"></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script src="https://kit.fontawesome.com/d5c98c56f9.js" crossorigin="anonymous"></script>
</body>

</html>