BIOBITES

je veux créé un site web /biobites ├── index.html ├── style.css └── images/ ├── logo.png ├── hero.jpg ├── dates.png ├── choco.png ├── nuts.png └── kids.png <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>BIOBITES | Healthy Cookies</title> <link rel="stylesheet" href="style.css"> </head> <body>  <header class="navbar"> <img src="images/logo.png" class="logo"> <nav> <a href="#">Home</a> <a href="#products">Our Products</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> </header>  <section class="hero"> <div class="hero-text"> <h1>Healthy Cookies</h1> <p>Naturally Sweet – No Sugar Added</p> <button>Shop Now</button> </div> </section>  <section id="products" class="products"> <h2>Shop Our Products</h2> <div class="grid"> <div class="card"> <img src="images/dates.png"> <h3>Bio Dates</h3> <p>No Sugar – 100% Natural</p> <button>Shop Now</button> </div> <div class="card"> <img src="images/choco.png"> <h3>Choco Healthy</h3> <p>Cocoa & Fruits</p> <button>Shop Now</button> </div> <div class="card"> <img src="images/nuts.png"> <h3>Fitness Nuts</h3> <p>Energy & Protein</p> <button>Shop Now</button> </div> <div class="card"> <img src="images/kids.png"> <h3>Kids Fruity</h3> <p>Fun & Healthy</p> <button>Shop Now</button> </div> </div> </section>  <section id="about" class="about"> <h2>About BIOBITES</h2> <p> BIOBITES offers delicious healthy cookies sweetened only with dried fruits. No sugar, no additives – just nature. </p> </section>  <footer> <p>© 2026 BIOBITES – All Rights Reserved</p> </footer> </body> </html> body { margin: 0; font-family: 'Arial', sans-serif; background: #f6f6f6; } /* NAVBAR */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 60px; background: #fff; } .logo { height: 50px; } nav a { margin-left: 20px; text-decoration: none; color: #3a3a3a; font-weight: bold; } /* HERO */ .hero { background: url("images/hero.jpg") center/cover; height: 400px; display: flex; align-items: center; padding-left: 60px; } .hero-text { background: rgba(255,255,255,0.9); padding: 30px; border-radius: 12px; } .hero h1 { color: #4b7c2f; } .hero button { background: #4b7c2f; color: white; border: none; padding: 10px 20px; border-radius: 8px; } /* PRODUCTS */ .products { padding: 60px; text-align: center; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .card img { width: 100%; } .card button { margin-top: 10px; background: #4b7c2f; color: white; border: none; padding: 8px 15px; border-radius: 8px; } /* ABOUT */ .about { background: #fff; padding: 60px; text-align: center; } /* FOOTER */ footer { background: #2f2f2f; color: white; text-align: center; padding: 20px; } je veux comme cette image et je veux un site riche

BIOBITES

Pages