Creating a best food HTML template can be fun! Here’s a simple example to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Food Website</title>
<style>
/* Basic Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
h2 {
color: #333;
}
.food-item {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.food-item img {
max-width: 100%;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Best Food Website</h1>
</header>
<div class="container">
<h2>Our Featured Dishes</h2>
<!-- Food Items -->
<div class="food-item">
<img src="https://via.placeholder.com/400" alt="Delicious Food">
<h3>Delicious Dish</h3>
<p>Description of the dish goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="food-item">
<img src="https://via.placeholder.com/400" alt="Tasty Food">
<h3>Tasty Treat</h3>
<p>Description of the dish goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!-- Add more food items as needed -->
</div>
<footer>
<p>© 2024 Best Food Website</p>
</footer>
</body>
</html>
This template includes a header with the title, a container for food items, and a footer with copyright information. You can add more food items by duplicating the .food-item section and changing the content accordingly. Remember to replace placeholder images (https://via.placeholder.com/400) with actual images of your dishes.
