WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <header> <h1>RETAURANT</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">A PROPOT</a></li> </ul> </nav> </header> <h1 class="tt"><u>MENU PRINCIPALE</u></h1> <div class="oo"> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> </div> </body> </html>
body{ margin: 0; } header{ background: black; margin: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; } h1{ color: white; padding: 5px 20px 0px; } ul{ display: flex; } li{ list-style: none; } a{ color: white; padding: 10px; text-decoration: none; font-size: 20px; } a:hover{ color: red; } /* pour les commande */ .oo{ display: flex; align-items: ; } .tt{ color: black; margin: 60px auto; font-size: 50px; text-align: center; } .bt{ width: 11em; border: 2px solid black; background: rgb(199, 165, 103); margin: 20px; } h2{ font-family: ARIAL; text-align: center; } button{ padding: 7px 30px; background: orangered; font-size: 20px; display: block; margin: auto; margin-bottom: 5px; transition: 2s; } button:hover{ border: 2px solid black; scale: 1.1; } img{ width: 10em; border: 2px solid black; margin-left: 5px; margin-top: 5px; }
/* 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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <header> <h1>RETAURANT</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">A PROPOT</a></li> </ul> </nav> </header> <h1 class="tt"><u>MENU PRINCIPALE</u></h1> <div class="oo"> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> <div class="bt"> <img src="plat.jpg" alt=""> <h2>plat Italic</h2> <button>commande</button> </div> </div> </body> </html>
body{ margin: 0; } header{ background: black; margin: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; } h1{ color: white; padding: 5px 20px 0px; } ul{ display: flex; } li{ list-style: none; } a{ color: white; padding: 10px; text-decoration: none; font-size: 20px; } a:hover{ color: red; } /* pour les commande */ .oo{ display: flex; align-items: ; } .tt{ color: black; margin: 60px auto; font-size: 50px; text-align: center; } .bt{ width: 11em; border: 2px solid black; background: rgb(199, 165, 103); margin: 20px; } h2{ font-family: ARIAL; text-align: center; } button{ padding: 7px 30px; background: orangered; font-size: 20px; display: block; margin: auto; margin-bottom: 5px; transition: 2s; } button:hover{ border: 2px solid black; scale: 1.1; } img{ width: 10em; border: 2px solid black; margin-left: 5px; margin-top: 5px; }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...