Practice for HTML and CSS Web Site | Practice Project Using HTML and CSS | HTML and CSS Project

-

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Best Online Food Delivery Service in India</title>
    <link rel="stylesheet" href="css/Style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aclonica&display=swap" rel="stylesheet">
   
   
</head>
<body>
    <nav id="navbar">
        <div id="logo" class="logo">
            <img src= "img/logo.jpg" alt="MyOnlinemeal.com">        

        </div>
        <ul>
            <li class="item"><a href="#">Home</a></li>
            <li class="item"><a href="#">Services</a></li>
            <li class="item"><a href="#">About us</a></li>
            <li class="item"><a href="#">Contact us</a></li>
           
        </ul>

    </nav>

    <section id="home">
        <h1 class="h-primary">Welcome to My Online Meal</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, ratione! Eligendi beatae ducimus inventore odit incidunt ipsam corporis,</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.odit incidunt.</p>

        <button class="btn">Order Now</button>  

    </section>

    <section>
        <h1 class="h-primary Center">Our Services</h1>
        <div id="Services">

            <div class="box">
                <img src="img/1.jpg" alt="">
                <h2 class="h-Secondary Center">Food Ordering</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste soluta, odit unde laborum dolores sunt maiores impedit rerum quidem sapiente itaque et repellat vero similique laboriosam nulla numquam qui quod labore temporibus natus in.</p>

            </div>
            <div class="box">
                <img src="img/2.jpg" alt="">
                <h2 class="h-Secondary Center">Food Ordering</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste soluta, odit unde laborum dolores sunt maiores impedit rerum quidem sapiente itaque et repellat vero similique laboriosam nulla numquam qui quod labore temporibus natus in.</p>

            </div>
            <div class="box">
                <img src="img/3.jpg" alt="">
                <h2 class="h-Secondary Center">Food Ordering</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste soluta, odit unde laborum dolores sunt maiores impedit rerum quidem sapiente itaque et repellat vero similique laboriosam nulla numquam qui quod labore temporibus natus in.</p>

            </div>
        </div>
    </section>
   

   
</body>
</html>
CSS

* {
    padding: 0;
    margin: 0;
}

/* Navbar container */

/* Logo wrapper */
#logo {
    flex-shrink: 0;
    margin: 8px 9px;
}

/* Logo image */
#logo img {
    height: 60px;
    /* Set desired height */
    width: auto;
    /* Maintain aspect ratio */
    display: block;
    border-radius: 50%;

}

#navbar {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
}

#navbar ul {
    display: flex;
    font-family: "Aclonica", sans-serif;
    font-weight: 400;
    font-style: normal;

}

#navbar ul li {
    list-style: none;
    font-size: 1rem;




}

#navbar ul li a {
    color: white;
    display: block;
    padding: 3px 22px;
    text-decoration: none;


}

#navbar ul li a:hover {

    color: black;
    background-color: white;
    display: block;
    padding: 3px 22px;
    text-decoration: none;
    border-radius: 10px;


}

#navbar::before {
    content: "";
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.3;
    top: 0px;
    left: 0px;


}

#home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 444px;
 


}

#home::before {
    content: "";
    background: url(../bg1.jpg) no-repeat center center/cover;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 60%;
    width: 100%;
    z-index: -1;
    opacity: 0.80;

}

#home h1 {
    color: white;
    text-align: center;
    font-family: "Aclonica", sans-serif;
    font-weight: 400;
    font-style: normal;


}

#home p {
    color: white;
    text-align: center;
    font-size: 1.2rem;

}

.h-primary {
    padding: 12px;
    font-size: 3rem;
    text-align: center;

}
.btn{
    padding: 4px 18px;
    margin: 15px;
    cursor: pointer;
    font-family: "Aclonica", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #0d6b8b;
    border:2px solid white;
    border-radius: 10px;
    color: white;    

}
.btn:hover{ background-color: rgb(10, 107, 176);
    color: yellow   ;

}
#Services{
    display: flex;
    margin: 34px;
}
#Services .box{
    border: 2px solid brown;
    padding: 20px;
    margin: 2px 6px;
    border-radius: 25px;
    background-color: #d9cfcf;

}
#Services .box img{
    height: 200px;
    margin: auto;
    display: block;
   

}
.h-Secondary{
    text-align: center;
}
#Services .box p{
    text-align: center;
   
}





Comments

Post a Comment

Popular posts from this blog

ARRAY IN C#

-
Image
 //int[] array = new int[5];             //array[0] = 55;             //array[1] = 563;             //array[2] = 56;             //array[3] = 586;             //array[4] = 556;             //Console.WriteLine(array[2]);             //Console.ReadLine();             //string[] array = new string[4];             //array[0]="ashish";             //array[1] = "aman";             //Console.WriteLine(array[1]);             //int[] array = new int[]{1,2,3};             //Console.WriteLine(array[2]);             //string[] array = { "ashish","aman"};        ...
Read more

Multiplication of three numbers in C#

-
  Write a C# Sharp program to print the output of multiplication of three numbers which will be entered by the user Test Data: Input the first number to multiply: 2 Input the second number to multiply: 3 Input the third number to multiply: 6 Expected Output: 2 x 3 x 6 = 36 solution             int a, b, c, total;             Console.WriteLine("Input the first number to multiply");             a =Convert.ToInt32( Console.ReadLine());             Console.WriteLine("Input the second number to multiply");             b = Convert.ToInt32(Console.ReadLine());             Console.WriteLine("Input the third number to multiply");             c = Convert.ToInt32(Console.ReadLine());             total = a * b * c;             C...
Read more

switch in c#

-
 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {     }     protected void Button1_Click(object sender, EventArgs e)     {         //int a=0, b=0,c=0;         //a =  Convert.ToInt32(txt1.Text);         //b = Convert.ToInt32(txt2.Text) ;          //c = a + b;         //Label1.Text = Convert.ToString(c);         cal("+");     }     protected void Button2_Click(object sender, EventArgs e)     {         cal("-");              }     protected void Button3_Click(object sender, EventArgs e)     {   ...
Read more