The food industry is one industry which is very demanding in today’s time. Everyone is promoting their business in different ways. Increasing the brand value of your business through a website is different. In this article, we will guide you through the step-by-step process to create a webpage for an online food delivery system using HTML and CSS.
Let’s start Create..
We’ll develop a straightforward food delivery website that showcases food items, prices, and special offers. We’ll organize the content using HTML tables, while the layout will be clean and responsive, with text alignments and a navigational header.
We will design a straightforward food delivery website, including Home, menus, Order, About, and Contact.
1. Open the editor of your choice- Example: Notepad++
2. Star writing code-
HTML Code
<!DOCTYPE html>
<html lang=”en”>
<head>
</head>
<body>
<ul>
<li><a class=”active” href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
<div class=”slideshow-container”>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food2.jpg” style=”width:100%”>
</div>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food3.jpg” style=”width:100%”>
</div>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food1.jpg” style=”width:100%”>
</div>
<a class=”prev” onclick=”plusSlides(-1)”>❮</a>
<a class=”next” onclick=”plusSlides(1)”>❯</a>
</div>
<br>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>
<center><h2 style=”color:white; background-color:black;”> Our Menus</h2></center>
<br>
<hr></hr>
<div class=”row”>
<div class=”column”>
<div class=”card”>
<h3>Cold Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Hot Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Snacks</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;” >Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Food</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
</div>
<br>
<div class=”row”>
<div class=”column”>
<div class=”card”>
<h3>Cold Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Hot Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Snacks</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;” >Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Food</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
</div>
<br>
<hr></hr>
<br>
<div class=”container”>
<div class=”form-container”><center>
<h2>Contact Us</h2>
<form>
<input type=”text” placeholder=”Your Name” required>
<input type=”email” placeholder=”Your Email” required>
<textarea placeholder=”Your Message” rows=”4″ required></textarea>
<button type=”submit”>Send Message</button>
</form>
</div>
</div>
<div class=”footer”>
<p>© 2025 Your Company. All rights reserved.</p>
<p>
<a href=”#”>Privacy Policy</a> |
<a href=”#”>Terms of Service</a> |
<a href=”#”>Contact Us</a>
</p>
</div>
<style>
body {
background-color: #f4f4f4;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
.container {
display: flex;
width: 100%;
height:400px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.image-container {
width: 50%;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.form-container {
width: 100%;
padding: 20px;
}
.form-container h2 {
margin-bottom: 15px;
text-align: center;
}
.form-container input,
.form-container textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-container button {
width: 100%;
padding: 10px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-container button:hover {
background: #0056b3;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.image-container, .form-container {
width: 100%;
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
position: fixed;
width: 100%;
bottom: 0;
}
.footer a {
color: #f8b400;
text-decoration: none;
margin: 0 10px;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a class=”active” href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
<div class=”slideshow-container”>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food2.jpg” style=”width:100%”>
</div>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food3.jpg” style=”width:100%”>
</div>
<div class=”mySlides fade”>
<img src=”C:\Users\hp\Downloads\food1.jpg” style=”width:100%”>
</div>
<a class=”prev” onclick=”plusSlides(-1)”>❮</a>
<a class=”next” onclick=”plusSlides(1)”>❯</a>
</div>
<br>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>
<center><h2 style=”color:white; background-color:black;”> Our Menus</h2></center>
<br>
<hr></hr>
<div class=”row”>
<div class=”column”>
<div class=”card”>
<h3>Cold Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Hot Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Snacks</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;” >Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Food</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
</div>
<br>
<div class=”row”>
<div class=”column”>
<div class=”card”>
<h3>Cold Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Hot Coffee</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Snacks</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;” >Order Now</button>
</div>
</div>
<div class=”column”>
<div class=”card”>
<h3>Food</h3>
<br>
<img src=”C:\Users\hp\Downloads\food3.jpg” alt=”Placeholder Image” height=”45%” width=”55%”><br><br>
<button type=”submit” style=”background-color:orange; font-size:25px;”>Order Now</button>
</div>
</div>
</div>
<br>
<hr></hr>
<br>
<div class=”container”>
<div class=”form-container”><center>
<h2>Contact Us</h2>
<form>
<input type=”text” placeholder=”Your Name” required>
<input type=”email” placeholder=”Your Email” required>
<textarea placeholder=”Your Message” rows=”4″ required></textarea>
<button type=”submit”>Send Message</button>
</form>
</div>
</div>
<div class=”footer”>
<p>© 2025 Your Company. All rights reserved.</p>
<p>
<a href=”#”>Privacy Policy</a> |
<a href=”#”>Terms of Service</a> |
<a href=”#”>Contact Us</a>
</p>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName(“mySlides”);
let dots = document.getElementsByClassName(“dot”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].className += ” active”;
}
</script>
</body>
</html>
