Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Untitled"
Bootstrap 4.1.1 Snippet by
jul498
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
11
 
0 Fav
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
Template
Material Kit Pro
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76