WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu avec Logo</title> </head> <body> <nav> <div class="logo">MONSHOP</div> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Produits</a></li> <li><a href="#">Boutique</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="cadre"> <div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } /* Navbar */ nav { display: flex; justify-content: space-between; align-items: center; background-color: #111; padding: 15px 40px; } /* Logo */ .logo { color: #00c896; font-size: 22px; font-weight: bold; } /* Menu */ nav ul { list-style: none; display: flex; } nav ul li { margin-left: 25px; } nav ul li a { text-decoration: none; color: white; font-size: 17px; transition: 0.3s; } nav ul li a:hover { color: #00c896; } /* Responsive */ @media (max-width: 768px) { nav { flex-direction: column; } nav ul { margin-top: 10px; flex-direction: column; align-items: center; } nav ul li { margin: 10px 0; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu avec Logo</title> </head> <body> <nav> <div class="logo">MONSHOP</div> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Produits</a></li> <li><a href="#">Boutique</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="cadre"> <div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } /* Navbar */ nav { display: flex; justify-content: space-between; align-items: center; background-color: #111; padding: 15px 40px; } /* Logo */ .logo { color: #00c896; font-size: 22px; font-weight: bold; } /* Menu */ nav ul { list-style: none; display: flex; } nav ul li { margin-left: 25px; } nav ul li a { text-decoration: none; color: white; font-size: 17px; transition: 0.3s; } nav ul li a:hover { color: #00c896; } /* Responsive */ @media (max-width: 768px) { nav { flex-direction: column; } nav ul { margin-top: 10px; flex-direction: column; align-items: center; } nav ul li { margin: 10px 0; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...