Project Mealonline

-

 Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food Delivery Service in India</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" media="screen and (max-width: 1170px )" href="css/phone.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Bree+Serif&display=swap"
        rel="stylesheet">


</head>

<body>
    <nav id="navbar">
        <div id="logo">
            <img src="logo.png" alt="Myonlinemeal.com">
        </div>
        <ul>
            <li class="item"><a href="#home">Home</a>
            </li>
            <li class="item"><a href="#services-container">Services</a></li>
            <li class="item"><a href="#client-section">Our Clients
                    Us</a></li>
            <li class="item"><a href="#contact">Contact
                    us</a></li>

        </ul>
    </nav>
    <section id="home">
        <h1 class="h-primary">Welcome to Arrow
            Meal Services</h1>
        <p>Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Provident cum
            reprehenderit consequatur aliquam
            maiores nemo vero aspernatur </p>
        <p>Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Provident cum
            reprehenderit </p>
        <button class="btn">Order Now</button>

    </section>

    <section id="services-container">
        <h1 class="h-primary center">Our Services
        </h1>
        <div id="services">
            <div class="box">
                <img src="pizzar.png" alt="">
                <h2 class="h-secondry center">Food
                    Catering</h2>
                <p class="center">Lorem ipsum
                    dolor sit amet consectetur
                    adipisicing elit. Nemo
                    veritatis sequi laboriosam,
                    saepe laudantium natus
                    architecto nostrum iure
                    voluptates dignissimos laborum
                    maxime similique omnis
                    quibusdam est perferendis
                    veniam necessitatibus minus
                    voluptatum consectetur minima
                    exercitationem.</p>
            </div>
            <div class="box">
                <img src="bg.jpg" alt="">
                <h2 class="h-secondry center">Bulk
                    Ordering</h2>
                <p class="center">Lorem ipsum
                    dolor sit amet consectetur
                    adipisicing elit. Nemo
                    veritatis sequi laboriosam,
                    saepe laudantium natus
                    architecto nostrum iure
                    voluptates dignissimos laborum
                    maxime similique omnis
                    quibusdam est perferendis
                    veniam necessitatibus minus
                    voluptatum consectetur minima
                    exercitationem.</p>
            </div>
            <div class="box">
                <img src="D1.jpg" alt="">
                <h2 class="h-secondry center">Food
                    Ordering</h2>
                <p class="center">Lorem ipsum
                    dolor sit amet consectetur
                    adipisicing elit. Nemo
                    veritatis sequi laboriosam,
                    saepe laudantium natus
                    architecto nostrum iure
                    voluptates dignissimos laborum
                    maxime similique omnis
                    quibusdam est perferendis
                    veniam necessitatibus minus
                    voluptatum consectetur minima
                    exercitationem.</p>
            </div>
        </div>

    </section>
    <section id="client-section">
        <h1 class="h-primary center">Our Clients
        </h1>
        <div id="clients">
            <div class="client-item">
                <img src="apple1.png" alt="Ourclinets">
            </div>
            <div class="client-item">
                <img src="HP.png" alt="Ourclinets">
            </div>
            <div class="client-item">
                <img src="mic.png" alt="Ourclinets">
            </div>
            <div class="client-item">
                <img src="wall.png" alt="Ourclinets">
            </div>
            <div class="client-item">
                <img src="apple1.png" alt="Ourclinets">
            </div>
        </div>
    </section>

    <section id="contact">
        <h1 class="h-primary center">Contact Us</h1>
        >
        <div id="contact-box">
            <form action="">
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label for="e-mail">Email:</label>
                    <input type="email" name="name" id="e-mail" placeholder="Enter your email">
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number:</label>
                    <input type="phone" name="name" id="phone" placeholder="Enter your phone">
                </div>
                <div class="form-group">
                    <label for="message">Message:</label>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </div>
            </form>
        </div>
    </section>
    <footer>
        <div class="center">
            Copyright &copy; www.myonlinemeal.com All rights reserved;
        </div>
    </footer>

</body>

</html>



Style.css

 /* CSS rest */
   
    *{
     margin: 0px;
     padding :0px;
     font-family: 'Baloo Bhai 2', cursive;
    }
  html{
    scroll-behavior: smooth;
}
   
    /* CSS Variable */
    :root{
    --navbar-height:59px;
    }
    /* Navigaton Bar */
    #navbar{
        display: flex;
        align-items: center;
        position:relative;
        top: 0px;
        position: sticky;
        }
    #navbar::before{
        content: "";
        background-color: black;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.4;
    }

  
    /* Navigation bar: Logo & Image */
    #logo{
        display: flex;
        height: 100px;
        width: 20%;
        }

    #logo img{
        height: 100px;
        margin: 3px 6px;
    }

    /* Navigation bar: Listing Style*/

     #navbar ul{
        display: flex; /*Menu bar staright karne ke liye*/
        font-family: 'Baloo Bhaina 2', cursive;
    }
    

    /* Pseudo Selector */
   
    #navbar ul li{
        /* To remove bullets from menu*/
        list-style: none; 
        font-size: 1.3rem;
    }
    #navbar ul li a{
        color: white;
        display: block;
        padding:3px 22px;
        border-radius: 20px;
        text-decoration: none;

    }
    #navbar ul li a:hover{
        color: black;
        background-color: white;}
        
        /*Home*/
        #home{
            display: flex;
            flex-direction: column;
            height: 654px;
            padding: 3px 200px; /*padding format "top" "leftright" values */
            justify-content: center;
            align-items: center;
        }
        /*before we use for background*/
    #home::before{
        content: "";
        background:url(../bg2.jpg) no-repeat center center/cover ;
        position: absolute;
        height: 100%;
        top:0px;
        left: 0px;
        width: 100%;
        z-index: -1;
        opacity: 0.89;
    }
    #home h1{
        color: white;
        text-align: center;
        font-family: 'Bree Serif', serif;
    }
    #home p{
        color: white;
        text-align: center;
        font-size: 1.5rem;
        font-family: 'Bree Serif', serif;
    }

    /* Services section */
#services {
    margin: 30px;
    display: flex;
}
#services .box{
    border: 2px solid brown;
    border-radius: 28px;
    margin: 25px 55px;
    padding: 5px 6px;
    background-color: #f7f0f0;
}
#services .box img{
    height: 150px;
    display: block;
    margin: auto;
}

#services .box p{
    font-family: 'Bree Serif', serif;
}

/* Client Section */
#client-section{
    position: relative;
    
}
#client-section::before{
    content: "";
    position: absolute;
    background:url(../bg.jpg);
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .4;
}
#clients{
    display: flex;
    justify-content: center;
    align-items: center;
}
.client-item{
    padding: 34px;
}
#clients img{
height: 150px;
}
/* Contact Section */
.contact{
position: relative;
} 

.contact::before{
content: "";
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
background: url(../contact.jpg) no-repeat center center/cover;
} 

footer{
    background:black;
    color: white;
    padding: 12px 10px;
}
#contact-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 34px;
}

#contact-box input{    
    width: 100%;
    padding: 0.5rem;
    border-radius: 9px;
    font-size: 1.1rem;}
#contact-box textarea{
    width: 100%;
    padding: 0.5rem;
    border-radius: 9px;
    font-size: 1.1rem;
}
#contact-box form {
    width: 40%;
}
#contact-box label{
    font-size: 1.3rem;
    font-family: 'Bree Serif', serif;
}
/* Utility Class */
.h-primary{
    font-size: 3.8rem;
    padding: 12px;
    font-family: 'Bree Serif', serif;
}
.h-secondry{
    font-size: 2.3rem;
    padding: 12px;
    font-family: 'Bree Serif', serif;
}
.btn{
    padding: 6px 20px;
    border: 2px solid white;
    background-color: brown;
    color: white;
    margin: 17px;
    font-size: 1.5rem; 
    border-radius: 10px;
    cursor: pointer;
}
.center{
    text-align: center;

}


phone.css

/* Navigation */
#navbar{
flex-direction: column;
}
#navbar ul li a{
    font-size: 1 rem;
    padding: 0px 7px;
    padding-bottom: 8px;
}
/* Home */
#home{
height: 370px;
padding: 3px 28px;
}
#home::before{
height: 400px;
}
#home p{
    font-size: 13px;
    }
/* Services */
#services{
flex-direction: column;
}
#services .box{
padding: 14px;
margin: 2px 0px;
margin-bottom: 20px;
}

/* Clients section*/
#clients{
    flex-wrap: wrap;

}
#clients img{
    width: 66px;
    padding: 6px;
    height: auto;

}

/* Contact us section */
#contact-box form{
    width: 80%;
}

/* Footer */


/* Utility Classes */
.h-primary{
     font-size: 26px;
}
.btn{
    font-size: 13px;
    padding: 4px;

}mm

Comments

Post a Comment

Popular posts from this blog

Java Apni Kak

-
For Loops: package com.company ; import java.util.* ; public class Main { public static void main (String[] args) { //Print sum of n numbers input taken by users, this code will give each step result Scanner sc = new Scanner(System. in ) ; int n = sc.nextInt() ; int sum = 0 ; /* How loops works * sum=0, 0+1, where 1= i * sum=1, 1+2, where 2= i * sum=2, 3+3, where 3(last one)= i * sum=6, 6+4, where 4= i * sum=10, 10+5, where 5= i * i Value reaches to condition * * */ for ( int i = 1 ; i <= n ; i++) { sum = sum+i ; System. out .println(sum) ; } } } public class Main { public static void main (String[] args) { //Print sum of n numbers input taken by users, this code will one result Scanner sc = new Scanner(System. in ) ; int n = sc.nextInt() ; int sum = 0 ; /* How loops works * sum=0, 0+1, where 1= i * sum=1, 1+2, where 2= i * sum=2, 3+3, where 3(la...
Read more

JS

-
  Data Types in JS We assigned data to the variable by using the assignment operator "=". Datatypes in JavaScript are: Number i.e., 11,23,45,6 Strings, i.e., "Hello World." Boolean, i.e., true, false Undefined Null Any of the complex data structures (Array and Objects) Let Block level scope, it works under block { } if call outer side of block the global let value will call console . log ( 'tut3' ) ; // Variables in js // var, let, const var name = 'harry' ; var channel ; var marks = 3454 ; marks = 0 ; channel = 'CodeWithHarry' console . log ( name , channel , marks ) ; // Rules for creating JavaScript Variables /* 1. Cannot start with numbers 2. Can start with letter, numbers, _ or $ 3. Are case sensitive */ var city = 'Delhi' ; console . log ( city ) ; const ownersName = 'Hari Ram' ; // ownersName = 'Harry'; // Cannot do this (error) console . log ( ownersName ) ; const fruit = 'Or...
Read more