"Untitled"
Bootstrap 4.1.1 Snippet by sultoniagustiputra

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 ----------> <html lang="en"> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <title> NusaGlobalCoffee </title> <script src="https://cdn.tailwindcss.com"> </script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/> <style> body { font-family: 'Roboto', sans-serif; } </style> </head> <body class="bg-[#3E2622] text-white"> <header class="bg-[#3E2622] text-white py-4"> <div class="container mx-auto flex justify-between items-center px-4"> <div class="text-2xl font-bold"> NusaGlobalCoffee </div> <nav class="space-x-4"> <a class="hover:text-[#D6C6A4]" href="#"> Home </a> <a class="hover:text-[#D6C6A4]" href="#"> About </a> <a class="hover:text-[#D6C6A4]" href="#"> Menu </a> <a class="hover:text-[#D6C6A4]" href="#"> Contact </a> </nav> </div> </header> <section class="relative"> <img alt="Coffee beans and a cup of coffee" class="w-full h-96 object-cover" height="1080" src="https://storage.googleapis.com/a1aa/image/Jh5y9xZ9ODLGMNvvcmSiRXoD1ElFrfaqvIQz6aehfOON9wQoA.jpg" width="1920"/> <div class="absolute inset-0 bg-[#3E2622] bg-opacity-50 flex flex-col justify-center items-center text-center"> <h1 class="text-4xl font-bold mb-4"> Energized by Coffee. Inspired by NusaGlobalCoffee </h1> <button class="bg-[#6A8E22] text-white py-2 px-4 rounded"> Order Now </button> </div> </section> <section class="bg-[#6A8E22] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> Why Choose Us? </h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div> <i class="fas fa-coffee text-4xl mb-4"> </i> <h3 class="text-xl font-bold mb-2"> Best Quality </h3> <p> We use only the best beans for our coffee. </p> </div> <div> <i class="fas fa-leaf text-4xl mb-4"> </i> <h3 class="text-xl font-bold mb-2"> Eco-Friendly </h3> <p> Our coffee is grown with care for nature. </p> </div> <div> <i class="fas fa-heart text-4xl mb-4"> </i> <h3 class="text-xl font-bold mb-2"> Passion for Coffee </h3> <p> We love what we do, and it shows in our coffee. </p> </div> </div> </div> </section> <section class="bg-[#D6C6A4] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> About Us </h2> <p class="mb-8 text-[#3E2622]"> Established in 2025, NusaGlobalCoffee is a team of professionals dedicated to offering you the best coffee. Our baristas are trained in the art of coffee making, and we take pride in providing you with a unique experience. </p> <img alt="Cup of coffee with artistic foam" class="mx-auto" height="400" src="https://storage.googleapis.com/a1aa/image/YHDPmzxesTWqO6PKdcGy2V42orzNWFRDjq0DJrofurHpewQoA.jpg" width="600"/> </div> </section> <section class="bg-[#3E2622] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> Our Menu </h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-[#D6C6A4] p-4 rounded"> <img alt="Cup of cappuccino" class="w-full mb-4" height="200" src="https://storage.googleapis.com/a1aa/image/tq71CX4cCEYBFhEwOtJMGlXeDaJG1qpxmT0loQoy4NWWPMEKA.jpg" width="300"/> <h3 class="text-xl font-bold mb-2 text-[#3E2622]"> Cappuccino </h3> <p class="mb-4 text-[#3E2622]"> Delicious cappuccino with a creamy foam. </p> <button class="bg-[#6A8E22] text-white py-2 px-4 rounded"> Order Now </button> </div> <div class="bg-[#D6C6A4] p-4 rounded"> <img alt="Cup of latte" class="w-full mb-4" height="200" src="https://storage.googleapis.com/a1aa/image/5sEeY3XrvNyhD65OrEM4qz0F3349aFdq5xbTyQstwtrWPMEKA.jpg" width="300"/> <h3 class="text-xl font-bold mb-2 text-[#3E2622]"> Latte </h3> <p class="mb-4 text-[#3E2622]"> Smooth latte with a milk foam. </p> <button class="bg-[#6A8E22] text-white py-2 px-4 rounded"> Order Now </button> </div> <div class="bg-[#D6C6A4] p-4 rounded"> <img alt="Cup of espresso" class="w-full mb-4" height="200" src="https://storage.googleapis.com/a1aa/image/3sl0YmJdrv5cP1vW9pc8AeeUoWmKIaDnn7nVrKxOY2fQ9wQoA.jpg" width="300"/> <h3 class="text-xl font-bold mb-2 text-[#3E2622]"> Espresso </h3> <p class="mb-4 text-[#3E2622]"> Strong espresso for true coffee lovers. </p> <button class="bg-[#6A8E22] text-white py-2 px-4 rounded"> Order Now </button> </div> </div> </div> </section> <section class="bg-[#6A8E22] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> Our Services </h2> <p class="mb-8"> We offer a wide range of services, including coffee delivery, event organization, and more. Contact us to learn more. </p> <img alt="Coffee beans and a cup of coffee" class="mx-auto" height="400" src="https://storage.googleapis.com/a1aa/image/Jh5y9xZ9ODLGMNvvcmSiRXoD1ElFrfaqvIQz6aehfOON9wQoA.jpg" width="600"/> </div> </section> <section class="bg-[#3E2622] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> Export Services </h2> <p class="mb-8"> NusaGlobalCoffee also specializes in exporting high-quality coffee beans, including Excelsa, Robusta, and Arabica. We ensure that our beans meet international standards and are delivered fresh to our global customers. </p> <img alt="Coffee beans ready for export" class="mx-auto" height="400" src="https://storage.googleapis.com/a1aa/image/59NqePAiwfrgpkf79SVFOJqbjqIbjb2H22g0eEcK6Cqp6hhQB.jpg" width="600"/> </div> </section> <section class="bg-[#6A8E22] py-12"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-8"> Contact Us </h2> <p class="mb-8"> If you have any questions or suggestions, please contact us. We are always happy to help you. </p> <form class="space-y-4"> <input class="w-full p-2 rounded bg-[#D6C6A4] text-[#3E2622]" placeholder="Your Name" type="text"/> <input class="w-full p-2 rounded bg-[#D6C6A4] text-[#3E2622]" placeholder="Your Email" type="email"/> <textarea class="w-full p-2 rounded bg-[#D6C6A4] text-[#3E2622]" placeholder="Your Message"></textarea> <button class="bg-[#3E2622] text-white py-2 px-4 rounded"> Send </button> </form> </div> </section> <footer class="bg-[#3E2622] py-4"> <div class="container mx-auto px-4 text-center"> <p> © 2025 NusaGlobalCoffee. All rights reserved. </p> <div class="space-x-4 mt-4"> <a class="hover:text-[#D6C6A4]" href="#"> <i class="fab fa-facebook-f"> </i> </a> <a class="hover:text-[#D6C6A4]" href="#"> <i class="fab fa-twitter"> </i> </a> <a class="hover:text-[#D6C6A4]" href="#"> <i class="fab fa-instagram"> </i> </a> </div> </div> </footer> </body> </html>

Questions / Comments: