Scribd
Upload
1K views13 pages

Source Code Food Delivery Webpage

Uploaded by

Apurva Ankushrao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views13 pages

Source Code Food Delivery Webpage

Uploaded by

Apurva Ankushrao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Souce Code For Food Delivery Website.

 index.html
 contact.html
 style.css

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

<!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 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
}
}

You might also like