Scribd
Upload
8 views6 pages

DIT Project(1)

The document contains HTML and CSS code for a food delivery service website, featuring a menu with items like Pizza, Burger, and Pasta, along with services such as catering and fast delivery. The layout includes sections for a hero image, menu items, services offered, and a shopping cart for users to view their selections and total price. The CSS styles the website for a clean and modern appearance, ensuring responsive design and user-friendly navigation.

Uploaded by

umairahmadmashwani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views6 pages

DIT Project(1)

The document contains HTML and CSS code for a food delivery service website, featuring a menu with items like Pizza, Burger, and Pasta, along with services such as catering and fast delivery. The layout includes sections for a hero image, menu items, services offered, and a shopping cart for users to view their selections and total price. The CSS styles the website for a clean and modern appearance, ensuring responsive design and user-friendly navigation.

Uploaded by

umairahmadmashwani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Delivery & Services</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Food Delivery & Services</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#cart">Cart</a></li>
</ul>
</nav>
</header>

<section id="hero">
<img src="vegetable image 2.jpeg" alt="Hero Image">
<h2>Delicious food delivered to your door</h2>
<p>Order now and enjoy our services!</p>
</section>

<section id="menu">
<h2>Our Menu</h2>
<div class="menu-item" data-name="Pizza" data-price="10">
<img src="pizza image.jpg" alt="Pizza">
<h3>Pizza</h3>
<p>Price: $10</p>
<button onclick="addToCart('Pizza', 10)">Add to Cart</button>
</div>
<div class="menu-item" data-name="Burger" data-price="8">
<img src="burger image.avif" alt="Burger">
<h3>Burger</h3>
<p>Price: $8</p>
<button onclick="addToCart('Burger', 8)">Add to Cart</button>
</div>
<div class="menu-item" data-name="Pasta" data-price="12">
<img src="pasta image.jpg" alt="Pasta">
<h3>Pasta</h3>
<p>Price: $12</p>
<button onclick="addToCart('Pasta', 12)">Add to Cart</button>
</div>
</section>

<section id="services">
<h2>Our Services</h2>
<div class="service-item">
<img src="catering image.jpeg" alt="Catering Service">
<h3>Catering</h3>
<p>We provide full-service catering for events of any size.</p>
</div>
<div class="service-item">
<img src="delivery image.jpeg" alt="Fast Delivery">
<h3>Fast Delivery</h3>
<p>Get your food delivered fast and fresh!</p>
</div>
<div class="service-item">
<img src="private chef.png" alt="Private Chef">
<h3>Private Chef</h3>
<p>Hire a private chef for exclusive dining experiences at your
home.</p>
</div>
</section>

<section id="cart">
<h2>Your Cart</h2>
<ul id="cart-items">
<!-- Items will be added here -->
</ul>
<p>Total: $<span id="total">0</span></p>
<button onclick="checkout()">Checkout</button>
</section>

<footer>
<p>&copy; 2024 Food Delivery & Services. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>

CSS Codes
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
}

header {
text-align: center;
padding: 20px;
background-color: #343a40;
color: white;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

#hero {
text-align: center;
margin: 20px 0;
}

#hero img {
width: 100%;
max-width: 1000px;
height: auto;
}

#menu, #services {
margin: 20px 0;
}

.menu-item, .service-item {
background-color: white;
border: 1px solid #dee2e6;
padding: 10px;
margin-bottom: 10px;
display: inline-block;
width: 30%;
text-align: center;
}

.menu-item img, .service-item img {


width: 100%;
max-width: 200px;
height: auto;
}

h2 {
color: #343a40;
}

button {
background-color: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}

button:hover {
background-color: #218838;
}

#cart {
background-color: white;
border: 1px solid #dee2e6;
padding: 10px;
}

#cart-items {
list-style-type: none;
}

#cart-items li {
padding: 5px 0;
}

#total {
font-weight: bold;
}

footer {
text-align: center;
margin-top: 40px;
color: #6c757d;
}

You might also like