Web sederhana berbasis HTML, TailwindCSS, dan JavaScript untuk mensimulasikan sistem pemesanan kopi mulai dari memilih menu, mengisi data, hingga halaman konfirmasi. Cocok untuk tugas sekolah, portofolio, atau latihan frontend.
- Halaman Utama (Landing Page) berisi informasi dan tombol untuk memulai pemesanan.
- Form Pemesanan Kopi dengan pilihan menu, jumlah, dan input data pelanggan.
- Popup/Modal Konfirmasi setelah pemesanan dikirim.
- Halaman Konfirmasi untuk menampilkan ringkasan pesanan.
- Dark Mode Support menggunakan atribut HTML & Tailwind (opsional).
- Desain Responsif memakai TailwindCSS agar nyaman dibuka di HP/PC.
|zharry/
β
βββ assets/
β βββ css/
β β βββ style.css
β βββ img/
β βββ air mineral.jpeg
β βββ americano.jpeg
β βββ back.png
β βββ cappucino.jpeg
β βββ coffe expreso.jpeg
β βββ confirm.png
β βββ index.png
β βββ index+chekout.png
β βββ indexx.png
β βββ latte.jpeg
β βββ order.png
β βββ teh.jpeg
β
βββ script/
β βββ confirm.js
β βββ index.js
β βββ order.js
β
βββ index.html
βββ order.html
βββ confirm.html
βββ README.md
- HTML5 β Struktur halaman
- TailwindCSS β Styling cepat dan responsif
- JavaScript (DOM) β Untuk logic interaktif seperti modal & data pesanan
-
Download atau clone project ini.
-
Pastikan folder terstruktur seperti di atas.
-
Buka file berikut langsung di browser:
index.htmlorder.htmlconfirm.html
Tidak memerlukan server backend β web ini 100% berjalan di sisi frontend.
- Buka index.html.
- Tekan tombol Pesan Sekarang.
- Pilih jenis kopi dan jumlah di halaman form.
- Klik Pesan.
- Popup konfirmasi akan muncul.
- Setelah disetujui, pengguna diarahkan ke halaman confirm.html.
Tambahkan screenshot website di folder assets/img/ lalu tampilkan seperti:

Project ini bebas digunakan untuk belajar, modifikasi, atau tugas sekolah.
Erzha Noverico Ardheva
- Email: falzagaming12@gmail.com
- GitHub: https://github.com/Erzhass
Ferry Ferdianto
- Email: ferryferdianto1624@gmail.com
- GitHub: https://github.com/FerryFerdianto24
