contact.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ahmad Contact</title>
    <!-- Google Font -->
    <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=Noto+Sans+JP:wght@100..900&family=Parkinsans:wght@300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <style>
      .contact-info i {
        font-size: 1.5rem;
        color: #f1a94b;
        margin-right: 10px;
      }
      .form-container {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 30px;
        border-radius: 8px;
        background-color: #f9f9f9;
      }
      .form-container h2 {
        margin-bottom: 20px;
        color: #333;
      }
      .form-container .form-control {
        border-radius: 5px;
      }
      .btn-submit {
        background-color: #f1a94b;
        color: white;
        border-radius: 50px;
      }
      .btn-submit:hover {
        background-color: #d98a3b;
      }
    </style>
  </head>
  <body class="bg-primary">
    <!-- Header Start -->
    <nav class="navbar bg-warning fw-semibold">
      <div class="container-fluid"></div>
      <div class="container-fluid">
        <a class="navbar-brand fs-3" href="#">
          <img
            src="assets/img/logo.jpg"
            alt="Logo"
            width="30"
            height="24"
            class="d-inline-block align-text-top"
          />
          Madtch Store
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="index.html"
                >Halaman Produk</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="shop.html">Keranjang Belanja</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Others
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="social.html">Social Media</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="contact.html">Contact Me</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Header End -->

    <!-- Main Start -->
    <main class="px-4 py-5 mt-3">
      <section>
        <div class="row">
          <!-- Contact Info Section -->
          <div class="col-md-6 mb-4">
            <div class="contact-info">
              <h1 class="text-black fs-1 mb-3">Kontak Saya</h1>
              <h4 class="text-black fs-4">Informasi Kontak</h4>
              <p class="d-flex align-items-center text-black fs-5">
                <i class="fas fa-phone"></i> <span>+62 853-6300-1781</span>
              </p>
              <p class="d-flex align-items-center text-black fs-5">
                <i class="fas fa-envelope"></i>
                <span>zamzamiahmd2112@email.com</span>
              </p>
              <p class="d-flex align-items-center text-black fs-5">
                <i class="fas fa-map-marker-alt"></i>
                <span>Medan, Indonesia.</span>
              </p>
            </div>
          </div>

          <!-- Contact Form Section -->
          <div class="col-md-6">
            <div class="form-container">
              <h2>Hubungi Saya</h2>
              <form action="#" method="POST">
                <div class="mb-3">
                  <label for="name" class="form-label">Nama Lengkap</label>
                  <input type="text" class="form-control" id="name" required />
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">Email</label>
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="message" class="form-label">Pesan</label>
                  <textarea
                    class="form-control"
                    id="message"
                    rows="4"
                    required
                  ></textarea>
                </div>
                <!-- WhatsApp link to send message -->
                <a
                  href="https://wa.me/6285363001781?text=Halo%20Saya%20ingin%20menghubungi%20Anda%20tentang :%20"
                  class="btn btn-warning w-100 fw-semibold"
                  target="_blank"
                >
                  Kirim Pesan
                </a>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- Main End -->

    <!-- Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>