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

Read

Discuss

In this article, we will learn how to make a fully responsive webpage for an online food delivery system using HTML and CSS.

Files used:

index.html
contact.html
style.css

index.html: The following HTML code describes the structure of the webpage. First of all it has an header tag to display the name of the company which is “Online FoodShop”. The navigation bar contains tabs of “Home”, “About”, “Menu” and “ContactUs”. The navigation bar also consists of the logo of the company followed by the background image with some more details of the “Online FoodShop” along with the featured products.

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> 

contact.html: The following HTML code describes us what contents are present in the “ContactUs” tab in the navigation bar. We have used input tags to enter the type of “query”, “name”, “email-id”, “phone number” and “explanation” of the query. We have also used radio buttons to enquire about the customer’s membership for “online FoodShop “. The form also provides “Submit” and “Reset” buttons.

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> 

style.css: This is the stylesheet block which gives us the proper look of the webpage.

Header styling: It consists of two “head” tags. We have used font-style “Ubuntu” to style the header and we also used proper colors to make some text look attractive.
Navigation bar styling: It basically consists of logo styling and content styling. First of all we have considered the navigation bar as a flexbox and assigned the flex-direction to “column”. We have centered the logo image by display:block. We have used the margin:auto property to center the image. Then we considered the content of the navigation bar as a flexbox and then we have positioned it properly.

Background image styling: We used before pseudo selectors to set the respective background images.

/*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
    }
}

Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 27 Oct, 2021

How to disable right-click option using the jQuery ?

How to make Expanded collapsibles using jQuery Mobile ?

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

HTML

HTML

Please Login to comment...