first commit

Samiradi · Sep 17, 2024 · 11f63ab · 11f63ab
commit 11f63ab
Show file tree

Hide file tree

Showing 12 changed files with 694 additions and 0 deletions.
diff --git a/img/41e05c1bdb3c0d268efe1620c2d7d741.jpg b/img/41e05c1bdb3c0d268efe1620c2d7d741.jpg
diff --git a/img/66c74a10730707f4dc230e167ed88d17.jpg b/img/66c74a10730707f4dc230e167ed88d17.jpg
diff --git a/img/79de0d5072786a29a4a5921b161c9997.jpg b/img/79de0d5072786a29a4a5921b161c9997.jpg
diff --git a/img/bde75574ec00735ac0adb7c4b3af7619.jpg b/img/bde75574ec00735ac0adb7c4b3af7619.jpg
diff --git a/img/es-boba.png b/img/es-boba.png
diff --git a/img/es-cappucino-bobba.jpg b/img/es-cappucino-bobba.jpg
diff --git a/img/header-img.jpg b/img/header-img.jpg
diff --git a/img/kopi-hitam.jpg b/img/kopi-hitam.jpg
diff --git a/img/taiwan-milk-tea-with-bubble_1339-84368.avif b/img/taiwan-milk-tea-with-bubble_1339-84368.avif
diff --git a/index.html b/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dapoer Blends</title>
+    <!-- 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,400;0,700;1,100;1,700&display=swap" rel="stylesheet">
+
+    <!-- Feather Icons -->
+    <script src="https://unpkg.com/feather-icons"></script>
+
+    <!-- My Style -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <!-- navbar start -->
+    <nav class="navbar">
+      <a href="#" 
+      class="navbar-logo">Dapoer<span>Blends</span></a>
+
+      <div class="navbar-nav">
+        <a href="#home">Home</a>
+        <a href="#about">Tentang Kami</a>
+        <a href="#menu">Menu</a>
+        <a href="#contact">Kontak</a>
+      </div>
+
+      <div class="navbar-extra">
+        <a href="#" id="search-button"><i data-feather="search"></i></a>
+        <a href="#" id="shopping-cart"><i data-feather="shopping-cart"></i></a>
+        <a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
+      </div>
+
+      <!-- Search form Start -->
+
+      <div class="search-form">
+        <input type="search" id="search-box" placeholder="cari disini..."> 
+        <label for="search-box"><i data-feather="search"></i></label>
+      </div>
+
+      <!-- Search form end -->
+
+
+
+    </nav>
+    <!-- navbar end -->
+
+    <!-- Hero Section Start -->
+
+    <section class="hero" id="home">
+      <main class="content">
+        <h1>Segarkan harimu <Span>Sekarang</Span></h1>
+        <p>"Rasakan kesegaran maksimal dalam setiap tegukan Minuman kami!"</p>
+        <a href="#" class="cta">Beli Sekarang</a>
+      </main>
+     </section>
+
+     <!-- Hero Section End -->
+
+     <!-- About Section Start -->
+
+     <section id="about" class="about">
+      <h2><span>Tentang</span> Kami</h2>
+
+     <div class="row">
+      <div class="about-img">
+        <img src="./img/es-boba.png"
+         alt="Tentang kami">
+      </div>
+      <div class="content">
+        <h3>Kenapa Memilih Minuman Kami?</h3>
+        <p>Minuman kami dibuat dengan bahan-bahan berkualitas tinggi untuk memastikan setiap tegukan memberikan rasa yang segar dan memuaskan. Kami selalu menjaga standar kebersihan dan keaslian rasa agar pelanggan bisa menikmati minuman yang tidak hanya menyegarkan, tetapi juga menyehatkan. Setiap minuman di menu kami dirancang untuk memberikan pengalaman yang berbeda, sesuai dengan selera dan preferensi Anda. Dengan komitmen terhadap inovasi rasa, kami yakin minuman kami akan selalu menjadi pilihan terbaik untuk Anda.</p>
+      </div>
+     </div>
+    </section>
+
+    <!-- About Section end -->
+
+    <!-- Menu Section Start -->
+
+    <section id="menu" class="menu">
+      <h2><span>Menu</span> Kami</h2>
+      <p>Terima kasih telah mengunjungi menu kami! Temukan beragam minuman segar yang siap memanjakan selera Anda. Selamat menikmati!.</p>
+
+      <div class="row">
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+        <div class="menu-card">
+          <img src="img/kopi-hitam.jpg" alt="kopi-hitam" class="menu-card-img">
+          <h3 class="menu-card-title">- Kopi hitam -</h3>
+          <p class="menu-card-price">IDR 15K</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Menu Section End  -->
+
+    <!-- Contact Section start -->
+
+    <section id="contact" class="contact">
+      <h2><span>Kontak</span> Kami</h2>
+      <p>"Jangan ragu untuk memesan sekarang! Hubungi kami melalui kontak di bawah, dan nikmati kesegaran minuman pilihan Anda segera."</p>
+
+
+    <div class="row">
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.8058227067077!2d117.4629054560368!3d0.1434085771529225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x320a121b9f0d4a79%3A0x947f65007f5e3670!2sKOPKAR%20PKT!5e0!3m2!1sid!2sid!4v1726320555000!5m2!1sid!2sid" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="maps"></iframe>
+
+<form action="">
+  <div class="input-group">
+    <i data-feather="user"></i>
+    <input type="text" placeholder="nama">
+  </div>
+  <div class="input-group">
+    <i data-feather="mail"></i>
+    <input type="text" placeholder="email">
+  </div>
+  <div class="input-group">
+    <i data-feather="phone"></i>
+    <input type="text" placeholder="No. Hp">
+  </div>
+  <button type="submit" class="btn">Kirim pesan</button>
+</form>
+
+    </div>
+
+  </section>
+
+  <!-- contact section end -->
+
+  <!-- footer star -->
+
+  <footer>
+    <div class="socials">
+      <a href="#"><i data-feather="instagram"></i></a>
+      <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
+      <a href="#"><i data-feather="facebook"></i></a>
+
+  </div>
+
+  <div class="links">
+    <a href="#home">Home</a>
+    <a href="#about">Tentang kami</a>
+    <a href="#menu">Menu</a>
+    <a href="#contact">kontak</a>
+  </div>
+
+  <div class="credit">
+    <p>Created By <a href="">Supriadi</a>. I &copy;2024</p>
+  </div>
+  </footer>
+
+
+
+  <!-- footer end -->
+
+
+
+
+
+
+
+    <!-- feather Icons -->
+    <script>
+      feather.replace();
+    </script>
+
+    <!-- Java Script -->
+    <script src="js/script.js" ></script>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,31 @@
+// Toggle Class Active untuk hamburger menu
+const navbarNav = document.querySelector('.navbar-nav');
+// ketika hamburger di klik
+document.querySelector('#hamburger-menu').onclick = () => {
+  navbarNav.classList.toggle('active');
+};
+
+
+// toggle class active untuk search form
+const searchForm = document.querySelector('.search-form');
+const searchBox = document.querySelector('#search-box');
+
+document.querySelector('#search-button').onclick = (e) => {
+  searchForm.classList.toggle('active');
+  searchBox.focus();
+  e.preventDefault();
+};
+
+// klik diluar elemen
+const hm = document.querySelector('#hamburger-menu');
+const sb = document.querySelector('#search-button');
+
+document.addEventListener('click', function(e) {
+  if(!hm.contains(e.target) && !navbarNav.contains(e.target)) {
+    navbarNav.classList.remove('active');
+  }
+  if(!sb.contains(e.target) && !searchForm.contains(e.target)) {
+    searchForm.classList.remove('active');
+  }
+});
+