DOCTYPE HTML
DOCTYPE HTML
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
.container {
width: 90%;
max-width: 1200px;
background: #fff;
overflow: hidden;
border-radius: 15px;
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
.logo {
font-size: 24px;
font-weight: bold;
color: #27ae60;
nav ul {
list-style: none;
display: flex;
gap: 15px;
nav ul li a {
text-decoration: none;
color: #333;
.login-btn {
border: none;
background-color: #27ae60;
color: #fff;
border-radius: 5px;
cursor: pointer;
.hero {
display: flex;
align-items: center;
padding: 40px;
.content h1 {
font-size: 3em;
color: #333;
line-height: 1.2;
.content h1 span {
color: #27ae60;
.content p {
margin: 20px 0;
color: #666;
.order-btn {
background-color: #27ae60;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
.image img {
max-width: 100%;
border-radius: 15px;
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<div class="logo">Delicious</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#order">Order</a></li>
</ul>
<button class="login-btn">Login</button>
</nav>
</header>
<section class="hero">
<div class="content">
<p>Learn from the world's famous chefs and the amazing and inspirational industry
leaders.</p>
</div>
<div class="image">
<img
src="https://tse4.mm.bing.net/th?id=OIP.NFx7TqApIFCNaM7Zzd0SnAHaD4&pid=Api&P=0&h=180">
</div>
</section>
</div>
</body>
</html>