368 lines
11 KiB
HTML
368 lines
11 KiB
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>complete responsive coffee website design tutorial</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
|
||
|
|
|
||
|
|
<!-- font awesome cdn link -->
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
|
|
|
||
|
|
<!-- custom css file link -->
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- header section starts -->
|
||
|
|
|
||
|
|
<header class="header">
|
||
|
|
|
||
|
|
<div id="menu-btn" class="fas fa-bars"></div>
|
||
|
|
|
||
|
|
<a href="#" class="logo"> coffee <i class="fas fa-mug-hot"></i> </a>
|
||
|
|
|
||
|
|
<nav class="navbar">
|
||
|
|
<a href="#home">home</a>
|
||
|
|
<a href="#about">about</a>
|
||
|
|
<a href="#menu">menu</a>
|
||
|
|
<a href="#review">review</a>
|
||
|
|
<a href="tabel/tabel.html">book</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<a href="tabel/tabel.html" class="btn">pesan sekarang</a>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- header section ends -->
|
||
|
|
|
||
|
|
<!-- home section starts -->
|
||
|
|
|
||
|
|
<section class="home" id="home">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<h3>ngopi di pagi hari</h3>
|
||
|
|
<a href="#" class="btn">beli sekarang</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="image">
|
||
|
|
<img src="image/home-img-1.png" class="main-home-image" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="image-slider">
|
||
|
|
<img src="image/home-img-1.png" alt="">
|
||
|
|
<img src="image/home-img-2.png" alt="">
|
||
|
|
<img src="image/home-img-3.png" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- home section ends -->
|
||
|
|
|
||
|
|
<!-- about section starts -->
|
||
|
|
|
||
|
|
<section class="about" id="about">
|
||
|
|
|
||
|
|
<h1 class="heading"> about us <span>why choose us</span> </h1>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="image">
|
||
|
|
<img src="image/anto.jpg" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<h3 class="title">☕ Apa yang Membuat Kopi Kami Istimewa?</h3>
|
||
|
|
<p>Setiap cangkir kopi kami dibuat dengan sepenuh hati.
|
||
|
|
Kami menggunakan biji kopi pilihan yang dipanen langsung dari petani lokal terbaik, lalu diproses dengan teknik sangrai khusus untuk menghasilkan rasa yang kaya, aroma yang memikat, dan karakter yang kuat.
|
||
|
|
|
||
|
|
Kami percaya bahwa kopi bukan sekadar minuman—tapi momen, cerita, dan pengalaman.
|
||
|
|
Dari pertama diseduh hingga tegukan terakhir, kamu akan merasakan perbedaannya.
|
||
|
|
|
||
|
|
</p>
|
||
|
|
<a href="#" class="btn">read more</a>
|
||
|
|
<div class="icons-container">
|
||
|
|
<div class="icons">
|
||
|
|
<img src="image/about-icon-1.png" alt="">
|
||
|
|
<h3>quality coffee</h3>
|
||
|
|
</div>
|
||
|
|
<div class="icons">
|
||
|
|
<img src="image/about-icon-2.png" alt="">
|
||
|
|
<h3>our branches</h3>
|
||
|
|
</div>
|
||
|
|
<div class="icons">
|
||
|
|
<img src="image/about-icon-3.png" alt="">
|
||
|
|
<h3>free delivery</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- about section ends -->
|
||
|
|
|
||
|
|
<!-- menu section starts -->
|
||
|
|
|
||
|
|
<section class="menu" id="menu">
|
||
|
|
|
||
|
|
<h1 class="heading"> our menu <span>popular menu</span> </h1>
|
||
|
|
|
||
|
|
<div class="box-container">
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-1.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Caffè Latte
|
||
|
|
Perpaduan sempurna antara espresso pekat dan susu steamed yang creamy. Lembut di lidah, pas buat kamu yang suka rasa klasik dan elegan.</p>
|
||
|
|
<span>25K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-2.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Vanilla Cloud Latte
|
||
|
|
Perpaduan espresso dengan susu lembut dan sentuhan sirup vanila yang manis. Dilengkapi dengan foam creamy seperti awan — bikin ngopi jadi lebih dreamy.</p>
|
||
|
|
<span>28K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-3.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Caramel Bliss Coffee
|
||
|
|
Espresso yang dibalur dengan saus karamel spesial dan susu segar. Rasa manis dan pahit yang seimbang, cocok buat kamu yang butuh pelukan rasa.</p>
|
||
|
|
<span>30K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-4.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Mocha Hazelnut Magic
|
||
|
|
Cokelat premium, hazelnut, dan espresso berpadu jadi satu minuman hangat yang bikin nagih. Manis, gurih, dan memanjakan lidah.</p>
|
||
|
|
<span>28K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-5.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Brown Sugar Espresso Latte
|
||
|
|
Espresso bold dengan sirup brown sugar khas, ditambah susu yang creamy. Kaya rasa, manis alami, dan bikin semangat balik lagi!</p>
|
||
|
|
<span>27K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="box">
|
||
|
|
<img src="image/menu-6.png" alt="">
|
||
|
|
<div class="content">
|
||
|
|
<h3>☕ Our Special Coffee</h3>
|
||
|
|
<p>Coconut Cream Cold Brew
|
||
|
|
Cold brew kopi yang ringan dan segar, dipadukan dengan krim kelapa yang unik. Sensasi tropis dalam setiap tegukan — pas banget buat hari yang panas.</p>
|
||
|
|
<span>29K</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- menu section ends -->
|
||
|
|
|
||
|
|
<!-- review section starts -->
|
||
|
|
|
||
|
|
<section class="review" id="review">
|
||
|
|
|
||
|
|
<h1 class="heading"> reviews <span>what people says</span> </h1>
|
||
|
|
|
||
|
|
<div class="swiper review-slider">
|
||
|
|
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
|
||
|
|
<div class="swiper-slide box">
|
||
|
|
<i class="fas fa-quote-left"></i>
|
||
|
|
<i class="fas fa-quote-right"></i>
|
||
|
|
<img src="image/ilham.jpg" alt="">
|
||
|
|
<div class="stars">
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
</div>
|
||
|
|
<p>Kopinya enak sekali, tempatnya rekomended</p>
|
||
|
|
<h3>ilham</h3>
|
||
|
|
<span>satisfied client</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-slide box">
|
||
|
|
<i class="fas fa-quote-left"></i>
|
||
|
|
<i class="fas fa-quote-right"></i>
|
||
|
|
<img src="image/amin.jpg" alt="">
|
||
|
|
<div class="stars">
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
</div>
|
||
|
|
<p>Kopinya auntentik, gak bikin enek best</p>
|
||
|
|
<h3>Amin mendo</h3>
|
||
|
|
<span>satisfied client</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-slide box">
|
||
|
|
<i class="fas fa-quote-left"></i>
|
||
|
|
<i class="fas fa-quote-right"></i>
|
||
|
|
<img src="image/bay.jpg" alt="">
|
||
|
|
<div class="stars">
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
</div>
|
||
|
|
<p>estetik tempatnya, harganya terjangkau</p>
|
||
|
|
<h3>Bayu</h3>
|
||
|
|
<span>satisfied client</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-slide box">
|
||
|
|
<i class="fas fa-quote-left"></i>
|
||
|
|
<i class="fas fa-quote-right"></i>
|
||
|
|
<img src="image/ganjar.jpg" alt="">
|
||
|
|
<div class="stars">
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
<i class="fas fa-star"></i>
|
||
|
|
</div>
|
||
|
|
<p>Kopine maknyosss</p>
|
||
|
|
<h3>Ganja</h3>
|
||
|
|
<span>satisfied client</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- review section ends -->
|
||
|
|
|
||
|
|
<!-- book section starts -->
|
||
|
|
|
||
|
|
<section class="book" id="book">
|
||
|
|
|
||
|
|
<h1 class="heading"> booking <span>reservasi meja</span> </h1>
|
||
|
|
|
||
|
|
<form action="">
|
||
|
|
|
||
|
|
<input type="text" placeholder="nama" class="box">
|
||
|
|
<input type="email" placeholder="no meja" class="box">
|
||
|
|
|
||
|
|
<textarea name="" placeholder="menu yang di pesan" class="box" id="" cols="30" rows="10"></textarea>
|
||
|
|
|
||
|
|
<input type="submit" value="kirim" class="btn">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- book section ends -->
|
||
|
|
|
||
|
|
<!-- footer section starts -->
|
||
|
|
|
||
|
|
<section class="footer">
|
||
|
|
|
||
|
|
<div class="box-container">
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>our branches</h3>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> Semarang </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> Demak </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> Mranggen </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> Ngaliyan </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> Boja </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>quick links</h3>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> home </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> about </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> menu </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> review </a>
|
||
|
|
<a href="#"> <i class="fas fa-arrow-right"></i> book </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>contact info</h3>
|
||
|
|
<a href="#"> <i class="fas fa-phone"></i> +62 85855934750</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h3>contact info</h3>
|
||
|
|
<a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
|
||
|
|
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
|
||
|
|
<a href="#"> <i class="fab fa-instagram"></i> instagram </a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="credit"> creatd by <span>Kelompok 8</span> | all rights reserved </div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- footer section ends -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
|
||
|
|
|
||
|
|
<!-- custom js file link -->
|
||
|
|
<script src="js/script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|