Design a Webpage for online food delivery system using HTML and CSS
Last Updated : 13 Jan, 2025
Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online.
In this project, we’ll design a simple yet effective food delivery website using HTML and CSS.
What We’re Going to 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.
<!DOCTYPE html>: Declares the document type and version, ensuring the browser renders the page correctly.
<html>: The root element that encompasses all the content of the webpage.
Head Section:
<head>: Contains meta-information about the document, which isn’t displayed directly on the webpage but is crucial for browser handling and SEO.
<link rel="stylesheet" href="style.css">: Links to an external CSS file named style.css that contains the styles for the webpage.
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">: Links to an external font from Google Fonts, specifically the 'Ubuntu Mono' font, to be used in the webpage.
Body Section:
<body>: Contains all the contents of the web page that are visible to the viewer.
Header:
<header>: Serves as the top section of the website.
<h1 id="top">Online</h1>: Displays the word 'Online' in a large font.
<h1 id="top1">FoodShop</h1>: Displays the word 'FoodShop' in a slightly smaller font.
Navigation Bar:
<nav id="navbar">: Defines the navigation bar.
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240711123257/jpeg-optimizer_2151336570.jpg">: Displays an image logo for the website.
<ul id="navcontent">: Unordered list containing navigation links.
<li><a href="#">Home</a></li>: Navigation link to the Home page.
<li><a href="#">About</a></li>: Navigation link to the About page.
<li><a href="#">Menu</a></li>: Navigation link to the Menu page.
<li><a href="contact.html">Contact Us</a></li>: Navigation link to the Contact Us page. This link points to an external HTML file named contact.html, which contains the contact form.
Main Content:
<div id="container1">: Container for the main content.
<div id="row1">: Welcome message.
<button class="btn">ORDER NOW</button>: Button for ordering food.
<div id="container3">: Container for additional buttons.
<div id="row2">: Button for viewing prices.
<div id="row3">: Button for viewing specials.
Featured Products:
<h1 id="top3">Featured Products</h1>: Heading for featured products section.
<div id="container4">: Container for product buttons.
<div id="row4">: Button for ordering a specific product.
<div id="row5">: Button for ordering another product.
<div id="row6">: Button for ordering yet another product.
