Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Expert
  • Last Updated : 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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 
      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:




    My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!