contacts.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>Marcho - Contacts</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/contacts.min.css">
  </head>

  <body>
    <!-- === HEADER === -->
    <header class="header">
  <div class="container">
    <div class="header__inner">
      <a class="logo" href="#">
        <img class="logo__image" src="images/logo.png" alt="logo" />
      </a>
      <nav class="menu">
        <button class="menu__btn">
          <span></span>
        </button>
        <ul class="menu__list">
          <li class="menu__item">
            <a class="menu__link" href="index.html"> home </a>
          </li>
          <li class="menu__item">
            <a class="menu__link" href="shop.html"> shop </a>
          </li>
          <li class="menu__item">
            <a class="menu__link" href="product.html"> product page </a>
          </li>
          <li class="menu__item">
            <a class="menu__link" href="blog.html"> blog </a>
          </li>
          <li class="menu__item">
            <span class="menu__link menu__link--active"> contact </span>
          </li>
        </ul>
      </nav>
      <div class="user-nav">
        <a class="user-nav__link" href="register.html">
          <img
            class="user-nav__image"
            src="images/icons/user.svg"
            alt="user icon"
          />
        </a>
        <a class="user-nav__link" href="#">
          <img
            class="user-nav__image"
            src="images/icons/magnifying-glass.svg"
            alt="magnifying glass icon"
          />
        </a>
        <a class="user-nav__link" href="#">
          <img
            class="user-nav__image"
            src="images/icons/heart.svg"
            alt="heart icon"
          />
          <span class="user-nav__number">3</span>
        </a>
        <a class="user-nav__link" href="#">
          <img
            class="user-nav__image"
            src="images/icons/cart.svg"
            alt="cart icon"
          />
          <span class="user-nav__number">7</span>
        </a>
      </div>
    </div>
  </div>
</header>

    <!-- === / HEADER === -->
    <main class="main">

      <div class="top-banner">
  <div
    class="top-banner__container"
    style="background-image: url('images/top-bg.jpg')"
  >
    <div class="container">
      <h2 class="top-banner__title title">CONTACT US</h2>
      <div class="breadcrumbs">
        <ul class="breadcrumbs__list">
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="index.html">Home</a>
          </li>
          <li class="breadcrumbs__item">
            <span class="breadcrumbs__link">Contact</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


      <!-- === MAP === -->
      <section class="map">
  <div class="container">
    <div id="map"></div>
  </div>
</section>

      <!-- === / MAP === -->

      <!-- === CONTACT === -->
      <section class="contact">
  <div class="container">
    <div class="contact__inner">
      <div class="contact__info">
        <h3 class="contact__info-title">
          feel free don't hesitate to contact with us
        </h3>
        <p class="contact__info-text">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae rerum
          harum nobis eveniet. Nisi obcaecati dolorum quos tenetur fugit
          dignissimos eveniet, quae quod officia vel sequi, qui quia quis a.
        </p>
        <ul class="contact__info-list">
          <li class="contact__info-item">
            <a class="contact__info-phone" href="tel:+12345678888"
              >+1-234-567-8888</a
            >
            <a class="contact__info-phone" href="tel:+12345678899"
              >+1-234-567-8899</a
            >
          </li>
          <li class="contact__info-item contact__info-item--pin">
            <address class="contact__info-address">
              Ranlon Market 789 Road, Market Street, New York
            </address>
          </li>
          <li class="contact__info-item contact__info-item--email">
            <a class="contact__info-email" href="mailto:customers@marcho.com"
              >customers@marcho.com</a
            >
            <a class="contact__info-email" href="mailto:partners@marcho.com"
              >partners@marcho.com</a
            >
          </li>
        </ul>
      </div>

      <form class="contact__form" action="#">
        <p class="contact__form-title">Contact Form</p>
        <div class="contact__form-box">
          <input
            class="contact__form-input"
            type="text"
            placeholder="Your Name"
          />
          <input
            class="contact__form-input"
            type="text"
            placeholder="Your E-mail Address"
          />
        </div>
        <input class="contact__form-input" type="text" placeholder="Subject" />
        <textarea
          class="contact__form-textarea"
          placeholder="Message here"
        ></textarea>
        <button class="contact__form-btn" type="submit">send message</button>
      </form>
    </div>
  </div>
</section>

      <!-- === / CONTACT === -->

    </main>
    <!-- === FOOTER === -->
      <footer class="footer">
    <div class="container">
      <div class="footer-top">
        <div class="footer-top__item footer-top__contact">
          <a class="logo footer-top__logo" href="#">
            <img class="logo__image" src="images/logo-footer.png" alt="logo">
          </a>
          <a class="footer-top__address-link" href="contacts.html">
            <address class="footer-top__address">
              No. 342 - London Oxford Street,
              012 United States
            </address>
          </a>
          <a class="footer-top__email" href="mailto:your-email@gmail.com">
            your-email@gmail.com
          </a>
          <a class="footer-top__phone" href="tel:+02838388393">
            +0283 838 8393
          </a>
          <ul class="footer-top__social-list">
            <li class="footer-top__social-item">
              <a class="footer-top__social-link" href="https://www.facebook.com/" target="_blank">
                <svg class="footer-top__social-image" width="12pt" height="19pt" viewBox="0 0 12 19">
                  <path
                    d="M 10.46875 10.6875 L 11 7.25 L 7.667969 7.25 L 7.667969 5.015625 C 7.667969 4.078125 8.132812 3.160156 9.625 3.160156 L 11.140625 3.160156 L 11.140625 0.230469 C 11.140625 0.230469 9.765625 0 8.449219 0 C 5.707031 0 3.910156 1.648438 3.910156 4.628906 L 3.910156 7.25 L 0.859375 7.25 L 0.859375 10.6875 L 3.910156 10.6875 L 3.910156 19 L 7.667969 19 L 7.667969 10.6875 Z M 10.46875 10.6875">
                </svg>
              </a>
            </li>
            <li class="footer-top__social-item">
              <a class="footer-top__social-link" href="https://www.twitter.com/" target="_blank">
                <svg class="footer-top__social-image" width="16pt" height="16pt" viewBox="0 0 16 16">
                  <path
                    d="M 14.355469 4.742188 C 14.367188 4.882812 14.367188 5.027344 14.367188 5.167969 C 14.367188 9.503906 11.066406 14.496094 5.035156 14.496094 C 3.175781 14.496094 1.453125 13.960938 0 13.027344 C 0.265625 13.054688 0.519531 13.066406 0.792969 13.066406 C 2.324219 13.066406 3.734375 12.546875 4.863281 11.664062 C 3.421875 11.632812 2.214844 10.691406 1.796875 9.390625 C 2 9.421875 2.203125 9.441406 2.417969 9.441406 C 2.710938 9.441406 3.003906 9.402344 3.277344 9.328125 C 1.777344 9.023438 0.648438 7.707031 0.648438 6.113281 L 0.648438 6.070312 C 1.085938 6.316406 1.59375 6.46875 2.132812 6.488281 C 1.25 5.898438 0.671875 4.894531 0.671875 3.757812 C 0.671875 3.148438 0.832031 2.589844 1.117188 2.101562 C 2.730469 4.089844 5.15625 5.390625 7.878906 5.53125 C 7.828125 5.289062 7.796875 5.035156 7.796875 4.78125 C 7.796875 2.976562 9.257812 1.503906 11.074219 1.503906 C 12.019531 1.503906 12.871094 1.898438 13.472656 2.539062 C 14.214844 2.394531 14.921875 2.121094 15.554688 1.746094 C 15.308594 2.507812 14.792969 3.148438 14.113281 3.554688 C 14.773438 3.480469 15.410156 3.300781 16 3.046875 C 15.554688 3.695312 14.996094 4.273438 14.355469 4.742188 Z M 14.355469 4.742188">
                </svg>
              </a>
            </li>
            <li class="footer-top__social-item">
              <a class="footer-top__social-link" href="https://www.linkedin.com/" target="_blank">
                <svg class="footer-top__social-image" width="14pt" height="16pt" viewBox="0 0 14 16">
                  <path
                    d="M 3.132812 14 L 0.230469 14 L 0.230469 4.652344 L 3.132812 4.652344 Z M 1.679688 3.378906 C 0.753906 3.378906 0 2.609375 0 1.679688 C 0 0.753906 0.753906 0 1.679688 0 C 2.609375 0 3.363281 0.753906 3.363281 1.679688 C 3.363281 2.609375 2.609375 3.378906 1.679688 3.378906 Z M 13.996094 14 L 11.101562 14 L 11.101562 9.449219 C 11.101562 8.367188 11.078125 6.976562 9.589844 6.976562 C 8.082031 6.976562 7.851562 8.152344 7.851562 9.371094 L 7.851562 14 L 4.953125 14 L 4.953125 4.652344 L 7.734375 4.652344 L 7.734375 5.929688 L 7.777344 5.929688 C 8.164062 5.195312 9.109375 4.417969 10.523438 4.417969 C 13.460938 4.417969 14 6.351562 14 8.867188 L 14 14 Z M 13.996094 14">
                </svg>
              </a>
            </li>
            <li class="footer-top__social-item">
              <a class="footer-top__social-link" href="https://www.instagram.com/" target="_blank">
                <svg width="20" height="20" fill="none">
                  <path
                  d="M10 0C7.28 0 6.94.01 5.87.06a7.31 7.31 0 0 0-2.42.47 4.9 4.9 0 0 0-1.76 1.15c-.52.5-.91 1.1-1.17 1.77a7.31 7.31 0 0 0-.46 2.42C.01 6.95 0 7.29 0 10c0 2.72.01 3.06.06 4.13.05 1.06.22 1.78.47 2.42a4.9 4.9 0 0 0 1.15 1.77c.55.55 1.11.9 1.77 1.16.64.24 1.36.4 2.43.46 1.06.05 1.4.06 4.12.06s3.06-.02 4.13-.06a7.48 7.48 0 0 0 2.42-.46 4.9 4.9 0 0 0 1.77-1.16c.51-.5.9-1.1 1.16-1.77.25-.64.4-1.37.46-2.43.05-1.06.06-1.4.06-4.13 0-2.72-.01-3.05-.06-4.1a7.49 7.49 0 0 0-.46-2.44 4.9 4.9 0 0 0-1.16-1.77c-.5-.51-1.1-.9-1.77-1.16-.78-.29-1.6-.44-2.43-.46C13.06 0 12.72 0 10 0Zm0 1.8c2.67 0 2.99.01 4.04.06.98.05 1.5.2 1.86.35.47.18.8.39 1.15.75.35.34.56.67.75 1.14.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04a5.69 5.69 0 0 1-.35 1.86 3.25 3.25 0 0 1-1.9 1.9c-.35.13-.89.3-1.87.34-1.06.05-1.37.06-4.04.06-2.68 0-3-.01-4.06-.06a5.74 5.74 0 0 1-1.86-.35 3.14 3.14 0 0 1-1.15-.75 3 3 0 0 1-.75-1.16 5.6 5.6 0 0 1-.35-1.86c-.04-1.04-.05-1.38-.05-4.03 0-2.67.01-3 .05-4.05.05-.98.21-1.52.35-1.87.16-.43.41-.83.75-1.15.32-.34.72-.6 1.15-.75.35-.13.88-.3 1.85-.34 1.06-.04 1.38-.06 4.05-.06l.04.03Zm0 3.06a5.13 5.13 0 1 0 0 10.26 5.13 5.13 0 0 0 0-10.25Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm6.54-8.67a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0Z" fill="#000"/>
                </svg>
              </a>
            </li>
            <li class="footer-top__social-item">
              <a class="footer-top__social-link" href="https://www.pinterest.com/" target="_blank">
                <svg class="footer-top__social-image" width="15pt" height="17pt" viewBox="0 0 15 17">
                  <path
                    d="M 6.90625 0.214844 C 3.433594 0.214844 0 2.488281 0 6.164062 C 0 8.5 1.339844 9.828125 2.152344 9.828125 C 2.488281 9.828125 2.679688 8.910156 2.679688 8.652344 C 2.679688 8.34375 1.878906 7.6875 1.878906 6.402344 C 1.878906 3.730469 3.949219 1.839844 6.632812 1.839844 C 8.9375 1.839844 10.644531 3.125 10.644531 5.484375 C 10.644531 7.25 9.921875 10.554688 7.585938 10.554688 C 6.742188 10.554688 6.023438 9.957031 6.023438 9.101562 C 6.023438 7.847656 6.917969 6.628906 6.917969 5.335938 C 6.917969 3.136719 3.738281 3.535156 3.738281 6.191406 C 3.738281 6.75 3.808594 7.367188 4.0625 7.875 C 3.59375 9.847656 2.640625 12.785156 2.640625 14.820312 C 2.640625 15.445312 2.730469 16.0625 2.792969 16.691406 C 2.90625 16.816406 2.851562 16.804688 3.027344 16.742188 C 4.734375 14.449219 4.671875 14 5.445312 11.003906 C 5.859375 11.78125 6.9375 12.199219 7.789062 12.199219 C 11.386719 12.199219 13 8.761719 13 5.664062 C 13 2.367188 10.09375 0.214844 6.90625 0.214844 Z M 6.90625 0.214844">
                </svg>
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-top__item footer-top__nav">
          <h6 class="footer-top__title">
            Useful Links
          </h6>
          <ul class="footer-top__list">
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                About Us
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                Privacy Policy
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                Terms & Conditions
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="contacts.html">
                Contact Us
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                Help & Support
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-top__item footer-top__nav">
          <h6 class="footer-top__title">
            My Account
          </h6>
          <ul class="footer-top__list">
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="login.html">
                My Account
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                My Cart
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                My Wishlist
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="register.html">
                Registration
              </a>
            </li>
            <li class="footer-top__list-item">
              <a class="footer-top__item-link" href="#">
                Check Out
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-top__item footer-top__item-form">
          <h6 class="footer-top__title">
            Subscribe Our Newsletter
          </h6>
          <p class="footer-top__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.
          </p>
          <form class="footer-top__form">
            <input class="footer-top__form-input" type="email" placeholder="your e-mail address" required>
            <button class="footer-top__form-button" type="submit">
              SUBSCRIBE
            </button>
          </form>
        </div>
      </div>
      <div class="footer-bottom">
        <p class="footer-bottom__copyright">
          © 2022 made by Alexey Tsaplin. All Rights Reserved.
        </p>
        <div class="footer-bottom__payments">
          We Accept
          <img class="footer-bottom__payments-icon" src="images/icons/mastercard.png" alt="mastercard icon">
          <img class="footer-bottom__payments-icon" src="images/icons/visa.png" alt="visa icon">
          <img class="footer-bottom__payments-icon" src="images/icons/paypal.png" alt="paypal icon">
        </div>
      </div>
    </div>
  </footer>
    <!-- === / FOOTER === -->

    <!-- === JAVASCRIPT === -->
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly" async></script>
    <script>
      let map;

      function initMap() {
        map = new google
          .maps
          .Map(document.getElementById('map'), {
            center: {
              lat: 40.71241656799338,
              lng: -73.99438135983578
            },
            zoom: 15,
            styles: [
              {
                "featureType": "all",
                "elementType": "geometry.stroke",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }
                ]
              }, {
                "featureType": "administrative",
                "elementType": "all",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              }, {
                "featureType": "administrative",
                "elementType": "labels",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }, {
                    "color": "#a31645"
                  }
                ]
              }, {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [
                  {
                    "weight": "3.79"
                  }, {
                    "visibility": "on"
                  }, {
                    "color": "#ffecf0"
                  }
                ]
              }, {
                "featureType": "landscape",
                "elementType": "geometry",
                "stylers": [
                  {
                    "visibility": "on"
                  }
                ]
              }, {
                "featureType": "landscape",
                "elementType": "geometry.stroke",
                "stylers": [
                  {
                    "visibility": "on"
                  }
                ]
              }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }, {
                    "color": "#a31645"
                  }
                ]
              }, {
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [
                  {
                    "saturation": "0"
                  }, {
                    "lightness": "0"
                  }, {
                    "visibility": "off"
                  }
                ]
              }, {
                "featureType": "poi",
                "elementType": "geometry.stroke",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              }, {
                "featureType": "poi.business",
                "elementType": "all",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }, {
                    "color": "#d89ca8"
                  }
                ]
              }, {
                "featureType": "poi.business",
                "elementType": "geometry",
                "stylers": [
                  {
                    "visibility": "on"
                  }
                ]
              }, {
                "featureType": "poi.business",
                "elementType": "geometry.fill",
                "stylers": [
                  {
                    "visibility": "on"
                  }, {
                    "saturation": "0"
                  }
                ]
              }, {
                "featureType": "poi.business",
                "elementType": "labels",
                "stylers": [
                  {
                    "color": "#a31645"
                  }
                ]
              }, {
                "featureType": "poi.business",
                "elementType": "labels.icon",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }, {
                    "lightness": "84"
                  }
                ]
              }, {
                "featureType": "road",
                "elementType": "all",
                "stylers": [
                  {
                    "saturation": -100
                  }, {
                    "lightness": 45
                  }
                ]
              }, {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [
                  {
                    "visibility": "simplified"
                  }
                ]
              }, {
                "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              }, {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              }, {
                "featureType": "water",
                "elementType": "all",
                "stylers": [
                  {
                    "color": "#d89ca8"
                  }, {
                    "visibility": "on"
                  }
                ]
              }, {
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                  {
                    "visibility": "on"
                  }, {
                    "color": "#fedce3"
                  }
                ]
              }, {
                "featureType": "water",
                "elementType": "labels",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              }
            ]
          });
      }
    </script>

    <script src="js/main.min.js"></script>
    <!-- === / JAVASCRIPT === -->

  </body>

</html>