web-laundry

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Laundry</title>
  <link rel="stylesheet" href="css/style.css" />

  <!-- css fonts -->
  <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=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,700&display=swap"
    rel="stylesheet" />

  <!-- bootstrap -->
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

  <!-- Feather Icons -->
  <script src="https://unpkg.com/feather-icons"></script>
</head>

<body>
  <div class="containerCSS">
    <header class="headerCSS">
      <div class="nama">
        <p>AAA <span class="judul-dua">Laundry</span></p>
      </div>
      <nav class="menuCSS">
        <ul>
          <li><a class="satu" href="#">Beranda</a></li>
          <li><a class="dua" href="#tentang">Tentang</a></li>
          <li><a class="tiga" href="#paket">Paket</a></li>
          <li><a class="tiga" href="#layanan">Layanan</a></li>
          <li><a class="empat" href="#kontak">Kontak Kami</a></li>
        </ul>
      </nav>
      <a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
    </header>

    <!-- Overlay -->
    <div class="overlay" id="overlay"></div>

    <section class="heroCSS">
      <main class="contentCSS">
        <div class="isi">
          <h1 class="judul">Laundry Terbaik Sejagat Raya</h1>
          <p class="paragrafCSS">
            jasa Laundry Express Dan Satuan Premium Garansi Tepat Waktu Dan
            Gratis Antar Jemput
          </p>
        </div>
      </main>
    </section>
    <!--Tentang Kami-->
    <section id="tentang" class="d-flex align-items-center justify-content-center mt-5 bg-light">
      <div class="container text-center">
        <h2 class="mb-4 font-weight-bold fs-1">
          Tentang <span class="judul-dua">Kami</span>
        </h2>
        <p>
          Selamat datang di
          <strong><span class="judul-dua">AAA</span> Laundry</strong>, layanan
          laundry profesional yang didedikasikan untuk memberikan kebersihan
          dan kenyamanan bagi pakaian Anda. Kami menggunakan peralatan modern
          dan teknologi canggih untuk memastikan setiap pakaian mendapatkan
          perawatan terbaik. Dengan tim staf yang terlatih dan berpengalaman,
          kami berkomitmen untuk memberikan hasil yang memuaskan dan layanan
          yang ramah. Kami percaya bahwa pakaian bersih dan rapi dapat
          meningkatkan kepercayaan diri dan kenyamanan Anda sehari-hari.
        </p>
        <p>
          Butuh bantuan atau ingin mengetahui lebih lanjut tentang layanan
          kami? Tim customer service
          <strong><span class="judul-dua">AAA</span> Laundry</strong> siap
          membantu Anda. Anda bisa menghubungi kami melalui WhatsApp.
        </p>
      </div>
    </section>

    <!--Paket Laundry-->
    <h2 class="headingCSS" id="paket">
      Paket <span class="judul-dua">Laundry</span>
    </h2>
    <div class="paket">
      <div class="cardCSS">
        <div class="cardCSS-body">
          <h5 class="cardCSS-title">
            LAUNDRY EXPRESS<span class="judul-dua"> 4 JAM</span>
          </h5>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan 4 jam selesai
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan antar jemput
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Pakaian sudah di setrika
          </p>
          <a target="_blank" href="https://wa.me/6282291554229?text=Halo%20AAA%20Laundry%20Saya%20Mau%20Laundry
            ">
            <button type="button" class="btn btn-primary btn-lg btn-block">
              Rp 14.000 / KG
            </button>
          </a>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <h5 class="cardCSS-title">
            LAUNDRY EXPRESS<span class="judul-dua"> 12 JAM</span>
          </h5>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan 12 jam selesai
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan antar jemput
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Pakaian sudah di setrika
          </p>
          <a target="_blank" href="https://wa.me/6282291554229?text=Halo%20AAA%20Laundry%20Saya%20Mau%20Laundry
            ">
            <button type="button" class="btn btn-primary btn-lg btn-block">
              Rp 8.000 / KG
            </button>
          </a>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <h5 class="cardCSS-title">
            LAUNDRY REGULER<span class="judul-dua"> 1 HARI</span>
          </h5>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan 1 hari selesai
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Layanan antar jemput
          </p>
          <p class="cardCSS-text">
            <img src="./Assets/check.svg" alt="check" />
            Pakaian sudah di setrika
          </p>
          <a target="_blank" href="https://wa.me/6282291554229?text=Halo%20AAA%20Laundry%20Saya%20Mau%20Laundry
            ">
            <button type="button" class="btn btn-primary btn-lg btn-block">
              Rp 5.000 / KG
            </button>
          </a>
        </div>
      </div>
    </div>

    <h2 class="headingCSS">
      Alasan memilih <span class="judul-dua">Kami</span>
    </h2>
    <section class="alasan">
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-thumbs-up w-25"></i>
                <h5>Service <span class="judul-dua">Berkualitas</span></h5>
                <p>
                  Satu mesin untuk satu Pelanggan (privacy service) yang
                  menyediakan Sistem Kasir Online & Realtime
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-hand-holding-heart"></i>
                <h5>Layanan <span class="judul-dua">Terlengkap</span></h5>
                <p>
                  Semua yang kamu butuhkan ada di AAA laundry, mulai dari Cuci
                  Kiloan hingga Cuci Satuan
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-truck-fast"></i>
                <h5>Layanan Antar <span class="judul-dua">Jemput</span></h5>
                <p>
                  Layanan antar jemput,pelanggan cukup hubungi WA kami Dan Tim
                  kami siap antar dan jemput pakain kamu
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-bag-shopping"></i>
                <h5>
                  Menggunakan Plastik
                  <span class="judul-dua">Biodegradable</span>
                </h5>
                <p>
                  Lebih ramah lingkungan karena plastik pembungkus dapat
                  terurai Plastik biodegradable tidak mengeluarkan aroma bau
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row service">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-shirt"></i>
                <h5>
                  Dengan Laundry anda
                  <span class="judul-dua">Bersedekah</span>
                </h5>
                <p>
                  Ikut berbagi pada sesama dimulai dengan mencuci pakaian 2,5
                  % dari profit akan disalurkan untuk pihak – pihak yang
                  membutuhkan
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <h2 class="headingCSS" id="layanan">
      Layanan <span class="judul-dua">Kami</span>
    </h2>
    <section class="layanan">
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row service">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-shirt"></i>
                <h5>LAUNDRY SATUAN & WET CLEAN</h5>
                <p>
                  Kami membantu merawat pakaian kesayangan kamu seperti Batik,
                  Dress, Jas, Blouse <br />
                  dan sebagainya, dengan pengerjaan lebih detail
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row service">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-shoe-prints"></i>
                <h5>LAUNDRY SEPATU & TAS</h5>
                <p>
                  Kami membantu merawat sepatu dan tas kesayangan yang terbuat
                  dari berbagai macam bahan agar bersih dan wangi
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row service">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-shoe-prints"></i>
                <h5>LAUNDRY CUCI KARPET</h5>
                <p>
                  Kami membantu merawat karpet kesayangan kamu sehingga karpet
                  kamu bersih dan bebas dari debu dan tungau
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cardCSS">
        <div class="cardCSS-body">
          <div class="row service">
            <div class="col-mid-3 text-center">
              <div class="icon">
                <i class="fa-solid fa-baby-carriage"></i>
                <h5>LAUNDRY PERLENGKAPAN BAYI</h5>
                <p>
                  Kami membatu merawat perlengkapan bayi anda seperti
                  stroller, box bayi dan car seat <br />
                  dengan menggunakan sabun anti bacterial
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <h2 class="headingCSS">Lokasi <span class="judul-dua">Kami</span></h2>
    <section class="lokasi">
      <div class="cardCSS">
        <div class="cardCSS-body">
          <img class="icon-rumah" src="./Assets/image.png" alt="ikon rumah" />
          <h3 class="judul-lokasi">
            AAA <span class="judul-dua">Laundry</span>
          </h3>
          <p>Jl. Merdeka No. 123, Jakarta, Indonesia</p>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1976.6333392415206!2d110.41257062214733!3d-7.761517289794301!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a598531e80907%3A0xc861f2f1c580190b!2sBin-Bin%20Laundry!5e0!3m2!1sid!2sid!4v1718482397765!5m2!1sid!2sid"
            class="map" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
    </section>
    <h2 class="headingCSS" id="kontak">
      Kontak <span class="judul-dua">Kami</span>
    </h2>

    <!-- <div class="kontak">
        <div class="cardCSS">
          <div class="cardCSS-body">
            <h5 class="cardCSS-title">Nomor Telepon</h5>
            <p class="cardCSS-text">+62 812-3456-7890</p>
          </div>
        </div>
        <div class="cardCSS">
          <div class="cardCSS-body">
            <h5 class="cardCSS-title">Lokasi</h5>
            <p class="cardCSS-text">Jl. Merdeka No. 123, Jakarta, Indonesia</p>
          </div>
        </div>
        <div class="cardCSS">
          <div class="cardCSS-body">
            <h5 class="cardCSS-title">Buka Setiap Hari</h5>
            <p class="cardCSS-text">08:00 - 21:00</p>
          </div>
        </div>
      </div> -->
      
      
      <!-- Contact form start -->
      
      
      <div class="kontak "  >
        <div class="cardCSS bg-light">
          <div class="cardCSS-body">
            <div class="text-center">
            <form id="contactForm" data-sb-form-api-token="API_TOKEN" >
  
              <!-- Name Input -->
              <div class="form-floating mb-3">
                <input class="form-control" id="name" type="text" placeholder="Name" required
                  data-sb-validations="required" />
                <label for="name">Nama Lengkap</label>
                <div class="invalid-feedback" data-sb-feedback="name:required">Name is required.</div>
              </div>
  
              <!-- Email Input -->
              <div class="form-floating mb-3">
                <input class="form-control" id="emailAddress" type="email" placeholder="Email Address" required
                  data-sb-validations="required,email" />
                <label for="emailAddress">Email</label>
                <div class="invalid-feedback" data-sb-feedback="emailAddress:required">Email Address is required.
                </div>
                <div class="invalid-feedback" data-sb-feedback="emailAddress:email">Email Address Email is not
                  valid.</div>
              </div>
  
              <!-- Message Input -->
              <div class="form-floating mb-3">
                <textarea class="form-control" id="message" type="text" placeholder="Message" required
                  style="height: 10rem;" data-sb-validations="required"></textarea>
                <label for="message">Pesan</label>
                <div class="invalid-feedback" data-sb-feedback="message:required">Message is required.</div>
              </div>
  
              <!-- Submit success message -->
              <div class="d-none" id="submitSuccessMessage">
                <div class="text-center mb-3">
                  <div class="fw-bolder">Sukses</div>
                </div>
              </div>
  
              <!-- Submit error message -->
              <div class="d-none" id="submitErrorMessage">
                <div class="text-center text-danger mb-3">Gagal Mengirim Pesan</div>
              </div>
  
              <!-- Submit button -->
               <a href="mailto:aidilakbr95@gmail.com">
                 <div class="d-grid">
                   <button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit" onsubmit=validateForm()>Kirim</button>
                 </div>
               </a>
            </form>
          </div>
        </div>

      </div>

  </div>
  <!-- Contact form end -->
  <footer>
    <div class="copyrightCSS">
      <p>Copyright © 2024 AAA Laundry</p>
    </div>
  </footer>
  </div>

  <!-- Feather Icons -->
  <script>
    feather.replace();
  </script>

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

  <script src="./javascript/script.js"></script>

  <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>

</html>

Baik, mari kita jelaskan kodingan dari setiap section yang ada dalam file HTML yang diberikan:

Section 1: Header

<header class="headerCSS">
  <div class="nama">
    <p>AAA <span class="judul-dua">Laundry</span></p>
  </div>
  <nav class="menuCSS">
    <ul>
      <li><a class="satu" href="#">Beranda</a></li>
      <li><a class="dua" href="#tentang">Tentang</a></li>
      <li><a class="tiga" href="#paket">Paket</a></li>
      <li><a class="tiga" href="#layanan">Layanan</a></li>
      <li><a class="empat" href="#kontak">Kontak Kami</a></li>
    </ul>
  </nav>
  <a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
</header>
  • Penjelasan: Bagian ini merupakan bagian header dari halaman web. Terdapat logo atau nama perusahaan (AAA Laundry), navigasi dengan daftar menu yang terdiri dari Beranda, Tentang, Paket, Layanan, dan Kontak Kami. Ada juga ikon hamburger menu untuk versi mobile.

Section 2: Hero

<section class="heroCSS">
  <main class="contentCSS">
    <div class="isi">
      <h1 class="judul">Laundry Terbaik Sejagat Raya</h1>
      <p class="paragrafCSS">
        jasa Laundry Express Dan Satuan Premium Garansi Tepat Waktu Dan
        Gratis Antar Jemput
      </p>
    </div>
  </main>
</section>
  • Penjelasan: Bagian ini menampilkan bagian hero atau bagian utama dari halaman web dengan judul besar “Laundry Terbaik Sejagat Raya” dan deskripsi layanan laundry.

Section 3: Tentang Kami

<section id="tentang" class="d-flex align-items-center justify-content-center mt-5 bg-light">
  <div class="container text-center">
    <h2 class="mb-4 font-weight-bold fs-1">
      Tentang <span class="judul-dua">Kami</span>
    </h2>
    <p>
      Selamat datang di
      <strong><span class="judul-dua">AAA</span> Laundry</strong>, layanan
      laundry profesional yang didedikasikan untuk memberikan kebersihan
      dan kenyamanan bagi pakaian Anda. ...
    </p>
    <!-- Paragraf dilanjutkan dengan deskripsi lebih lanjut tentang perusahaan. -->
  </div>
</section>
  • Penjelasan: Bagian ini berisi informasi tentang perusahaan laundry, termasuk visi, misi, dan layanan yang ditawarkan.

Section 4: Paket Laundry

<h2 class="headingCSS" id="paket">
  Paket <span class="judul-dua">Laundry</span>
</h2>
<div class="paket">
  <!-- Daftar paket laundry yang masing-masing terdiri dari detail layanan, harga, dan tombol WhatsApp untuk setiap paket. -->
</div>
  • Penjelasan: Bagian ini menampilkan berbagai paket layanan laundry beserta detailnya seperti layanan yang disertakan, harga per kilogram, dan tombol WhatsApp untuk setiap paket.

Section 5: Alasan Memilih Kami

<h2 class="headingCSS">
  Alasan memilih <span class="judul-dua">Kami</span>
</h2>
<section class="alasan">
  <!-- Setiap alasan dipresentasikan dalam bentuk kartu dengan ikon dan deskripsi yang sesuai. -->
</section>
  • Penjelasan: Bagian ini memberikan alasan-alasan mengapa memilih layanan laundry mereka, yang ditampilkan dalam bentuk kartu dengan ikon yang sesuai.

Section 6: Layanan Kami

<h2 class="headingCSS" id="layanan">
  Layanan <span class="judul-dua">Kami</span>
</h2>
<section class="layanan">
  <!-- Daftar jenis layanan laundry yang ditawarkan, seperti laundry satuan, sepatu & tas, dll. Setiap layanan dideskripsikan dengan detailnya. -->
</section>
  • Penjelasan: Bagian ini menampilkan jenis-jenis layanan laundry yang ditawarkan beserta deskripsi detail untuk masing-masing layanan.

Section 7: Lokasi Kami

<h2 class="headingCSS">Lokasi <span class="judul-dua">Kami</span></h2>
<section class="lokasi">
  <!-- Informasi lokasi fisik laundry beserta peta lokasi menggunakan Google Maps. -->
</section>
  • Penjelasan: Bagian ini menampilkan informasi lokasi fisik laundry serta peta lokasi menggunakan Google Maps.

Section 8: Kontak Kami

<h2 class="headingCSS" id="kontak">
  Kontak <span class="judul-dua">Kami</span>
</h2>
<div class="kontak">
  <!-- Form kontak untuk mengirim pesan kepada pihak laundry, termasuk validasi dan pesan keberhasilan atau kegagalan pengiriman. -->
</div>
  • Penjelasan: Bagian ini berisi form kontak yang pengunjung bisa gunakan untuk mengirim pesan kepada pihak laundry. Juga mencakup pesan keberhasilan atau kegagalan pengiriman form.
<footer>
  <div class="copyrightCSS">
    <p>Copyright © 2024 AAA Laundry</p>
  </div>
</footer>
  • Penjelasan: Bagian footer dengan informasi hak cipta yang menampilkan tahun 2024 dan nama perusahaan (AAA Laundry).
<!-- Script untuk menggantikan ikon dengan Feather Icons -->
<script>
  feather.replace();
</script>

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

<!-- Script JavaScript kustom -->
<script src="./javascript/script.js"></script>

<!-- Script untuk form handling -->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
  • Penjelasan: Bagian ini berisi script JavaScript untuk menggantikan ikon dengan Feather Icons, menghubungkan dengan Bootstrap, script JavaScript kustom, dan script untuk form handling menggunakan sb-forms-latest.js.

Kodingan ini secara keseluruhan menggambarkan sebuah halaman web untuk layanan laundry, dengan berbagai bagian yang menjelaskan tentang perusahaan, layanan, lokasi, dan kontak.