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

27 Oct, 2021
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:15.6 inch Laptops:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201119123537/WhatsApp-Video-2020-11-19-at-11.28.52-AM.mp400:0000:0000:52Use Up/Down Arrow keys to increase or decrease volume.iPhone 6/7/8 Plus:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201120015430/WhatsApp-Video-2020-11-20-at-1.53.32-AM.mp400:0000:0000:14Use Up/Down Arrow keys to increase or decrease volume.iPad Pro:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201120021319/WhatsApp-Video-2020-11-20-at-2.11.45-AM.mp400:0000:0000:14Use Up/Down Arrow keys to increase or decrease volume.Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
/*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:
15.6 inch Laptops:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201119123537/WhatsApp-Video-2020-11-19-at-11.28.52-AM.mp400:0000:0000:52Use Up/Down Arrow keys to increase or decrease volume.
iPhone 6/7/8 Plus:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201120015430/WhatsApp-Video-2020-11-20-at-1.53.32-AM.mp400:0000:0000:14Use Up/Down Arrow keys to increase or decrease volume.
iPad Pro:Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20201120021319/WhatsApp-Video-2020-11-20-at-2.11.45-AM.mp400:0000:0000:14Use Up/Down Arrow keys to increase or decrease volume.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
simmytarika5
CSS-Misc
HTML-Misc
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
HTML Cheat Sheet - A Basic Guide to HTML
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)