"Untitled"
Bootstrap 4.1.1 Snippet by jul498

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bongsu Coffee - Kopi Premium Lokal Lampung</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50 font-sans"> <header class="bg-brown-600 text-white py-4"> <div class="container mx-auto px-4 flex justify-between items-center"> <h1 class="text-2xl font-bold">Bongsu Coffee</h1> <nav> <ul class="flex space-x-4"> <li><a href="#menu" class="hover:text-yellow-300">Menu</a></li> <li><a href="#about" class="hover:text-yellow-300">Tentang Kami</a></li> <li><a href="#contact" class="hover:text-yellow-300">Kontak</a></li> </ul> </nav> </div> </header> <main> <section class="hero bg-cover bg-center h-[500px] flex items-center" style="background-image: url('/api/placeholder/1200/500');"> <div class="container mx-auto px-4 text-white text-center"> <h2 class="text-4xl font-bold mb-4">Stres? Nikmati Saja dengan Kopi Kami</h2> <p class="text-xl mb-6">Temukan Secangkir Kopi Premium yang Sesuai dengan Selera Unikmu</p> <a href="#menu" class="bg-yellow-500 text-brown-900 px-6 py-3 rounded-full hover:bg-yellow-600">Lihat Menu</a> </div> </section> <section id="about" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-8">Tentang Bongsu Coffee</h2> <div class="grid md:grid-cols-2 gap-8 items-center"> <div> <p class="text-gray-700 mb-4"> Bongsu Coffee berfokus pada penjualan berbagai jenis kopi signature kami yang terbuat dari biji kopi premium dengan perpaduan sempurna dan berbagai hidangan penutup. </p> <ul class="list-disc list-inside text-gray-600"> <li>Biji kopi premium</li> <li>Racikan signature</li> <li>Hidangan penutup spesial</li> </ul> </div> <img src="/api/placeholder/600/400" alt="Bongsu Coffee" class="rounded-lg shadow-lg"> </div> </div> </section> <section id="menu" class="py-16 bg-gray-100"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-8">Menu Kami</h2> <div class="grid md:grid-cols-3 gap-6"> <div class="bg-white p-6 rounded-lg shadow-md"> <img src="/api/placeholder/400/300" alt="Kopi Signature" class="mb-4 rounded"> <h3 class="text-xl font-semibold mb-2">Kopi Signature</h3> <p class="text-gray-600">Racikan khusus dari biji kopi pilihan terbaik</p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <img src="/api/placeholder/400/300" alt="Dessert Spesial" class="mb-4 rounded"> <h3 class="text-xl font-semibold mb-2">Dessert Spesial</h3> <p class="text-gray-600">Hidangan penutup yang melengkapi secangkir kopi</p> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <img src="/api/placeholder/400/300" alt="Promo Spesial" class="mb-4 rounded"> <h3 class="text-xl font-semibold mb-2">Promo Spesial</h3> <p class="text-gray-600">Dapatkan penawaran menarik setiap bulannya</p> </div> </div> </div> </section> <section id="contact" class="py-16 bg-brown-700 text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-6">Hubungi Kami</h2> <p class="text-xl mb-4">Jl. Ikan Mas No.10, Yosodadi, Kec. Metro Tim., Kota Metro, Lampung 34381</p> <p class="text-xl mb-4">Telepon: 089560808900</p> <a href="#" class="bg-yellow-500 text-brown-900 px-6 py-3 rounded-full hover:bg-yellow-600">Pesan Sekarang</a> </div> </section> </main> <footer class="bg-brown-800 text-white py-6"> <div class="container mx-auto px-4 text-center"> <p>© 2024 Bongsu Coffee. Hak Cipta Dilindungi.</p> </div> </footer> </body> </html>

Related: See More

Now UI Dashboard React

Questions / Comments: