Open In App

Design a Webpage for online food delivery system using HTML and CSS

Last Updated : 13 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Preview :

online food delivery system
Fig: Online food delivery System using HTML and CSS

Source Code:

HTML 
<!-- Filename - index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap"
        rel="stylesheet">
</head>
<body>
    <header>
        <h1 id="top">Online</h1>
        <h1 id="top1">FoodShop</h1>
    </header>
    <hr>
    <nav id="navbar">
      <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240711123257/jpeg-optimizer_2151336570.jpg">
        <ul id="navcontent">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="contact.html">ContactUs</a></li>
        </ul>
    </nav>
    <div id="container1">
        <div id="row1">
            Welcome to Online FoodShop
        </div>
        <button class="btn">ORDER NOW</button>
        <div id="container3">
            <div id="row2">
                <button class="btn">Prices</button>
            </div>
            <div id="row3">
                <button class="btn">Specials</button>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="top3">Featured Products</h1>
    <div id="container4">
        <div id="row4">
            <button class="btn">ORDER NOW</button>
        </div>
        <div id="row5">
            <button class="btn">ORDER NOW</button>
        </div>
        <div id="row6">
            <button class="btn">ORDER NOW</button>
        </div>
    </div>
    <footer>Copyright © 2020-2021 OnlineFoodShop.
        All Rights are reserved</footer>
</body>
</html>
HTML 
<!--Filename - contact.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>ContactUs</title>
</head>
<body>
    <div id="ContactUs">
        <h1>Contact Us</h1>
        <form action="#">
            <div class="form-shape">
                <label for="query">
                    Type of Query
                </label>
                <select name="myQuery" id="query">
                    <option value="sel" selected>
                        Select
                    </option>
                    <option value="ord">
                        Order related Issues
                    </option>
                    <option value="Site">
                        Site related Issues
                    </option>
                    <option value="fed">
                        Complaint related Issues
                    </option>
                    <option value="others">
                        Others
                    </option>
                </select>
            </div>
            <div class="form-shape">
                <label for="name">Name</label>
                <input type="text" name="myName" id="name"
                    placeholder="Enter your Name">
            </div>
            <div class="form-shape">
                <label for="email">Email-Id</label>
                <input type="email" name="myEmail" id="email"
                    placeholder="Enter your email">
            </div>
            <div class="form-shape">
                <label for="pho">Phone Number</label>
                <input type="phone" name="myPhone" id="pho"
                    placeholder="Enter your Phone no">
            </div>
            <div id="radio">
                Are you a member of OnlneFoodShop:
                Yes <input type="radio" name="eligible">
                No <input type="radio" name="eligible">
            </div>
            <div class="form-shape">
                <label for="message">
                    Ellaborate your query
                </label>
                <textarea name="mesg" id="message" cols="30" rows="10">
				</textarea>
            </div>
            <input type="submit" value="Submit">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
</html>
CSS 
/* style.css */

/*CSS Reset*/
* {
    margin: 0px;
    padding: 0px;
}

/*Header Styling*/
#top {
    color: rgb(245, 10, 10);
    text-align: center;
    font-size: 46px;
    font-family: 'Ubuntu Mono', monospace;
}

#top1 {
    text-align: center;
    color: black;
    font-size: 21px;
    font-family: 'Ubuntu Mono', monospace;
}

/* Navigation bar styling*/
/*Navbar image styling*/
#navbar img {
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    margin-bottom: 3px;
}

/*Navbar Functionality*/
#navbar {
    display: flex;
    flex-direction: column;
    background-color: gray;
    height: 14vh;
    width: 100vw;
    font-family: 'Ubuntu Mono', monospace;
    margin-top: 10px;
    border: 2px solid black;
    border-radius: 15px;
}

/*Navbar content functionality*/
#navcontent {
    display: flex;
    justify-content: center;
}

/*Navbar content styling*/
ul li {
    list-style: none;
    margin: 15px;
    border-radius: 20px;
}

ul li a {
    padding: 1px;
    color: white;
    text-decoration: none;
    border-radius: 10px;
}

ul li a:hover {
    background-color: red;
    border-radius: 10px;
}

/* website background image designing */
#container1 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 63vh;
}

/*Setting the background image using before pseudo selector*/
#container1::before {
    content: '';
    background: url("https://media.geeksforgeeks.org/wp-content/uploads/20240711124309/8513909_3941598-(2).jpg") no-repeat center center/cover;
    width: 100vw;
    height: 59vh;
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: 'Ubuntu Mono', monospace;
    margin-right: 45px;
    font-weight: bold;
    z-index: -1;
    opacity: 0.89;
    border: 2px solid black;
    border-bottom-left-radius: 100px;
}

#row1 {
    color: black;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin-top: 35px;
}

/*Button Styling*/
.btn {
    margin-top: 15px;
    border: 3px solid white;
    border-radius: 15px;
    background-color: yellow;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Ubuntu Mono', monospace;
}

.btn:hover {
    cursor: pointer;
    background-color: red;
}

#container3 {
    display: flex;
    justify-content: space-evenly;
}

#row2 {
    width: 24vw;
    height: 21vh;
    box-shadow: 2px 7px 16px 19px;
    margin-top: 51px;
    margin-bottom: 51px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    margin-right: 38px;
    border-radius: 40px;
}

#row2::before {
    content: '';
    background: url('https://media.geeksforgeeks.org/wp-content/uploads/20240711123257/jpeg-optimizer_2151336570.jpg') no-repeat center center/cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24vw;
    height: 21vh;
    z-index: -1;
    border-radius: 40px;
}

#row3 {
    position: relative;
    width: 24vw;
    height: 21vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-shadow: 2px 7px 16px 19px;
    margin-top: 51px;
    margin-bottom: 51px;

    margin-left: 38px;
    border-radius: 40px;
}

#row3::before {
    content: '';
    background: url('https://media.geeksforgeeks.org/wp-content/uploads/20240711123256/jpeg-optimizer_6656747_21351.jpg') no-repeat center center/cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24vw;
    height: 21vh;
    z-index: -1;
    border-radius: 40px;
}

#top3 {
    text-align: center;
    color: red;
    font-family: 'Ubuntu Mono', monospace;
}

#container4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    margin: 41px;
}

#row4 {
    width: 29vw;
    height: 360px;
    border: 2px solid black;
    background: url('https://media.geeksforgeeks.org/wp-content/uploads/20240711123258/jpeg-optimizer_various-meals-western-food-platter-dark-background.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 15px;
}

#row5 {
    width: 29vw;
    height: 360px;
    border: 2px solid black;
    background: url('https://media.geeksforgeeks.org/wp-content/uploads/20240711123257/jpeg-optimizer_2151182491.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 15px;
}

#row6 {
    width: 30vw;
    height: 360px;
    border: 2px solid black;
    background: url('https://media.geeksforgeeks.org/wp-content/uploads/20240711123255/jpeg-optimizer_4744.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 15px;
}

/*Designing the footer*/
footer {
    text-align: center;
}

/*Designing of Contact Us*/
#ContactUs {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: gray;
}

.form-shape input,
.form-shape select,
.form-shape textarea {
    width: 92%;
    padding: 0.5rem;
}

/*Changing the color of placeholder*/
::placeholder {
    color: gray;
}

/*Making the webpage responsive using media queries*/
@media only screen and (max-width:1131px) {
    #row4 {
        width: 42vw;
    }

    #row5 {
        width: 45vw;
    }

    #row6 {
        margin-top: 20px;
        width: 90vw;
    }
}

@media only screen and (min-width:600px) and (max-width:781px) {
    #row4 {
        width: 84vw;
        margin: auto;
        margin-left: 22px;
    }

    #row5 {

        width: 84vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 22px;
    }

    #row6 {
        width: 84vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 22px;
    }
}

@media only screen and (max-width:600px) {
    #row4 {
        width: 78vw;
        margin: auto;
        margin-left: 3px;
    }

    #row5 {

        width: 78vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 3px;
    }

    #row6 {
        width: 78vw;
        margin: auto;
        margin-top: 20px;
        margin-left: 3px;
    }
}

@media only screen and (min-height:1000px) {
    #navbar {
        height: 10vh;
    }

    #container1::before {
        height: 39vh;
    }

    #container1 {
        height: 44vh
    }
}

Explanation:

Document Structure:

  • <!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.

Footer:

  • <footer>Copyright © 2020-2021 OnlineFoodShop. All Rights are reserved</footer>: Footer with copyright information.

This structure ensures a clean, organized, and user-friendly webpage that effectively showcases the online food delivery service.

Contact Us Page (contact.html)

  • <body>: Contains all the contents of the Contact Us page.
  • <div id="ContactUs">: Container for the contact form.
  • <h1>Contact Us</h1>: Heading for the contact form.
  • <form action="#">: Form for submitting contact information.

Form Fields:

  • <div class="form-shape">: Container for each form field.
  • <label for="query">Type of Query</label>: Label for the query type dropdown.
  • <select name="myQuery" id="query">: Dropdown for selecting the type of query.
    • <option value="sel" selected>Select</option>: Default option.
    • <option value="ord">Order related Issues</option>: Option for order-related issues.
    • <option value="Site">Site related Issues</option>: Option for site-related issues.
    • <option value="fed">Complaint related Issues</option>: Option for complaint-related issues.
    • <option value="others">Others</option>: Option for other types of queries.

Next Article
CSS Introduction

S
shahbazalam75508
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox