Enhanced Ogani Interface - Copy this Html, Bootstrap Component to your project
Sửa code này cho đẹp hơn:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Ogani Interface</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/6.0.0 beta3/css/all.min.css"> <style> body { font family: Arial, sans serif; } .top bar { background color: #f8f9fa; padding: 5px 0; font size: 14px; } .navbar { padding: 0.5rem 1rem; } .navbar brand { font weight: bold; font size: 1.5rem; color: #5cb85c; } .navbar brand span { color: black; } .category dropdown { background color: #5cb85c; color: white; font weight: bold; } .hero section { background color: #f9f9f9; padding: 40px 0; } .hero section h1 { font size: 2.5rem; color: #5cb85c; font weight: bold; } .hero section p { margin: 20px 0; font size: 1.1rem; } .hero section .btn { background color: #5cb85c; color: white; font weight: bold; } </style> </head> <body> <! Top bar > <div class="top bar text center"> <span><i class="fas fa envelope"></i> hello@colorlib.com</span> <span class="mx 3">|</span> <span>Free Shipping for all Order of $99</span> </div> <! Navbar > <nav class="navbar navbar expand lg navbar light bg white"> <div class="container"> <a class="navbar brand" href="#">OGANI</a> <button class="navbar toggler" type="button" data bs toggle="collapse" data bs target="#navbarNav"> <span class="navbar toggler icon"></span> </button> <div class="collapse navbar collapse" id="navbarNav"> <ul class="navbar nav ms auto"> <li class="nav item"> <a class="nav link active" href="#">Home</a> </li> <li class="nav item"> <a class="nav link" href="#">Shop</a> </li> <li class="nav item"> <a class="nav link" href="#">Pages</a> </li> <li class="nav item"> <a class="nav link" href="#">Blog</a> </li> <li class="nav item"> <a class="nav link" href="#">Contact</a> </li> </ul> <div class="d flex align items center ms 3"> <a href="#" class="me 3"><i class="fas fa heart"></i> <span>1</span></a> <a href="#" class="me 3"><i class="fas fa shopping cart"></i> <span>3</span></a> <span class="fw bold">item: $150.00</span> </div> </div> </div> </nav> <! Main Section > <div class="container mt 4"> <div class="row"> <! Sidebar > <div class="col lg 3"> <div class="dropdown"> <button class="btn category dropdown w 100 dropdown toggle" type="button" data bs toggle="dropdown"> <i class="fas fa bars"></i> All departments </button> <ul class="dropdown menu w 100"> <li><a class="dropdown item" href="#">Fresh Meat</a></li> <li><a class="dropdown item" href="#">Vegetables</a></li> <li><a class="dropdown item" href="#">Fruit & Nut Gifts</a></li> <li><a class="dropdown item" href="#">Fresh Berries</a></li> <li><a class="dropdown item" href="#">Ocean Foods</a></li> <li><a class="dropdown item" href="#">Butter & Eggs</a></li> <li><a class="dropdown item" href="#">Fastfood</a></li> <li><a class="dropdown item" href="#">Fresh Onion</a></li> <li><a class="dropdown item" href="#">Papaya & Crisps</a></li> <li><a class="dropdown item" href="#">Oatmeal</a></li> <li><a class="dropdown item" href="#">Fresh Bananas</a></li> </ul> </div> </div> <! Hero Section > <div class="col lg 9 hero section"> <h1>Vegetable 100% Organic</h1> <p>Free Pickup and Delivery Available</p> <button class="btn">Shop Now</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
