<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- Recoleta Alt Font -->
    <link rel="stylesheet" href="assets/css/fonts.css" />

    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- animation -->
    <link rel="stylesheet" href="assets/css/animation.css" />

    <!-- responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css" />
  </head>

  <body>
    <main class="overflow-hidden">
      <div class="container">
        <!-- wrapper -->
        <div class="wrapper slideTop">
          <div class="row">
            <div class="col-md-12">
              <!-- POp Content -->
              <div class="popInner">
                <!-- Text -->
                <article>
                  <h1>contact us</h1>
                  <p>
                    Since the early 1998s, our jewelry has been coveted and
                    loved
                  </p>
                </article>

                <!-- contact form -->
                <form class="contact">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="textField">
                        <input
                          type="text"
                          name="name"
                          placeholder="Your Name"
                        />
                        <i class="fa-solid fa-user"></i>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="textField">
                        <input
                          type="email"
                          name="email"
                          placeholder="Your Email"
                        />
                        <i class="fa-solid fa-envelope"></i>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="textField">
                        <input
                          type="text"
                          name="subject"
                          placeholder="Subject"
                        />
                        <i class="fa-solid fa-user"></i>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="textField">
                        <textarea
                          name="message"
                          placeholder="Message"
                        ></textarea>
                      </div>
                    </div>
                  </div>

                  <!-- social icons -->
                  <div
                    class="mt-4 d-flex justify-content-between align-items-center flex-wrap"
                  >
                    <div class="socialIcon">
                      <a href="#"
                        ><img
                          src="assets/images/socialIcons/facebook.png"
                          alt="socialIcon"
                      /></a>
                      <a href="#"
                        ><img
                          src="assets/images/socialIcons/twitter.png"
                          alt="socialIcon"
                      /></a>
                      <a href="#"
                        ><img
                          src="assets/images/socialIcons/rss.png"
                          alt="socialIcon"
                      /></a>
                      <a href="#"
                        ><img
                          src="assets/images/socialIcons/google+.png"
                          alt="socialIcon"
                      /></a>
                      <a href="#"
                        ><img
                          src="assets/images/socialIcons/youtube.png"
                          alt="socialIcon"
                      /></a>
                    </div>

                    <!-- send button -->
                    <button class="apply" type="button">
                      Send Message<i class="fa-solid fa-paper-plane"></i>
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!-- close button -->
          <button class="close">X</button>
        </div>
      </div>
    </main>
    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>

    <!-- jQuery -->
    <script src="assets/js/jQuery/jquery-3.7.0.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/custom.js"></script>
  </body>
</html>
