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

Last Updated : 04 Mar, 2024

To design a attractive webpage for an online food delivery system using HTML and CSS, craft a user-friendly interface with navigation, engaging content sections, and responsive design to enhance the overall dining experience. Also add the basic pages “Home,” “About,” “Menu,” and “Contact Us,” featuring the company logo “Online FoodShop”.

Preview Image:

Online Food Delicvery WebPage Preview

Steps to Design Online Food Delivery WebPage:

First, Implement a navigation bar with a logo and links for “Home,” “About,” “Menu,” and “Contact Us” in the HTML structure.
Utilize CSS for responsive and visually appealing design, ensuring a consistent, attractive and responsive layout throughout the webpage.
Add a header with the title “Online FoodShop” and style the header, using different fonts and colours to make it visually attractive.
Create an eye-catching header with the title “Online FoodShop,” using varied fonts and colors for an appealing visual presentation.
Design main content sections with introductory messages, “Order Now” buttons, and featured products, applying CSS for clean and engaging layouts.
Develop a separate “Contact Us” page with a user-friendly form, containing dropdowns, text inputs, radio buttons, and text areas.

Example: This example demonstrates designing an online food delivery webpage.

HTML

<!-- Filename - index.html-->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <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="5.jpeg">
        <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>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <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("./1.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('2.jpeg') 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('3.jpeg') 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('a1.jpeg') 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('a2.jpeg') 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('a3.jpeg') 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
    }
}