Scribd
Upload
13 views

Assignment 2

Uploaded by

snehaguptavv
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Assignment 2

Uploaded by

snehaguptavv
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Assignment 2

HTML:
<!DOCTYPE html>

<html>

<head>

<title>Web technology Assignment2</title>

<link rel="stylesheet" type="text/css" href="style1.css">

</head>

<center>

<body>

<div class ="Wrapper">

<div class="container-fluid">

<div class="navbar">

<h1>Eat n Smile</h1>

<ul>

<li>Home</li>

<li><a href="menu.html">Menu</a></li>

<li>Contact</li>

</ul>

</div>

<div class="content">

<div>

<h3>Welcome to,</h3>

<h1><span>Eat n Smile</span></h1>

<input type="search" name="" placeholder="What do you want??">

<button>Search</button>

</div>

</div>
</div>

</body>

</center>

</html>

Menu.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>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<section class="food-menu">

<div class="container">

<h2 class="text-center">Today's Menu</h2>

<div class="food-menu-box">

<div class="food-menu-img">

<img src="menu-chessepizza.png" alt="Chesse pizza" class="img-responsive img-curve">

</div>

<div class="food-menu-desc">

<h4>Cheese Pizza</h4>

<p class="food-price">₹ 200</p>

<p class="food-detail">

Italian Sauce, Mozzarella chesse and Cheddar chesse

</p>

<br>
<a href="#" class="btn btn-primary">Order Now</a>

</div>

</div>

<div class="food-menu-box">

<div class="food-menu-img">

<img src="menu-chesseburger.jpg" alt="Chesse Burger" class="img-responsive imgcurve">

</div>

<div class="food-menu-desc">

<h4>Chesse Burger</h4>

<p class="food-price">₹ 200</p>

<p class="food-detail">

Mozzarella chesse and fresh vegetables

</p>

<br>

<a href="#" class="btn btn-primary">Order Now</a>

</div>

</div>

<div class="food-menu-box">

<div class="food-menu-img">

<img src="menu-butterchicken.jpg" alt="Butter Chicken" class="img-responsive


imgcurve">

</div>

<div class="food-menu-desc">

<h4>Butter Chicken</h4>

<p class="food-price">₹ 300</p>

<p class="food-detail">

Chicken

</p>

<br>

<a href="#" class="btn btn-primary">Order Now</a>

</div>
</div>

<div class="food-menu-box">

<div class="food-menu-img">

<img src="menu-whitepasta.jpg" alt="White Pasta" class="img-responsive img-curve">

</div>

<div class="food-menu-desc">

<h4>White Pasta</h4>

<p class="food-price">₹ 150</p>

<p class="food-detail">

Italian Sauce and chesse.

</p>

<br>

<a href="#" class="btn btn-primary">Order Now</a>

</div>

</div>

<div class="food-menu-box">

<div class="food-menu-img">

<img src="menu-redpasta.jpg" alt="Red Pasta" class="img-responsive img-curve">

</div>

<div class="food-menu-desc">

<h4>Red Pasta</h4>

<p class="food-price">₹ 150</p>

<p class="food-detail">

Italian Sauce, tomatoes and chesse

</p>

<br>

<a href="#" class="btn btn-primary">Order Now</a>

</div>

</div>

<div class="food-menu-box">

<div class="food-menu-img">
<img src="menu-frenchfries.jpg" alt="French fries" class="img-responsive img-curve">

</div>

<div class="food-menu-desc">

<h4>French fries</h4>

<p class="food-price">₹ 100</p>

<p class="food-detail">

Potatoes

</p>

<br>

<a href="#" class="btn btn-primary">Order Now</a>

</div>

</div>

</div>

</section>

</body>

</html>

CSS:
*{ margin: 0 0; padding: 0 0; font-

family: Arial, Helvetica, sans-serif;

.container{ wid

th: 80%;

margin: 0 auto;

padding: 1%;

.img-responsive{

width: 100%;

.img-curve{ border-

radius: 15px;
}

.text-right{ text-

align: right;

.text-center{ text-

align: center;

} .text-left{

text-align: left;

.text-white{

color: white;

a{ color: #f7c717;

text-decoration: none;

a:hover{ color

: #eaff47;

.btn{ padding: 1%;

border: none;

font-size: 1rem;

border-radius: 5px;

.btn-primary{ background-color: #ff6b81; color: white; cursor: pointer;

.btn-primary:hover{ color:

white; background-color:

#ff4757;

}
.float-text{

position: absolute;

bottom: 50px;

left: 40%;

/*Navbar Section */

.logo{ width:

12%;

float: left; }

.menu{

line-height: 60px;

.menu ul{ list-style-

type: none;

.menu ul li{

display: inline;

padding: 2%;

font-weight: bold;

/* Food Search*/ .food-search{

background-image: url(../images/bg.jpg);

background-size: cover; background-

repeat: no-repeat; background-position:

center; padding: 7% 0;

.food-search input[type="search"]{

width: 50%; padding: 1%;


font-size: 1rem; border: none;

border-radius: 5px;

/* Menu */ .food-menu{

background-color: #bcb8b8;

padding: 4% 0;

.food-menu-box{

width: 38%; margin:

1%; padding: 2%;

float: left;

background-color: rgb(27, 22, 22); border-

radius: 15px;

.food-menu-img{

width: 20%; float:

left;

.food-menu-desc{

width: 70%;

float: left; margin-

left: 8%; color: beige;

.food-price{ font-

size: 1.2rem;

margin: 2% 0;

.food-detail{ font-

size: 1rem; color:

#747d8c;
}

OUTPUT

You might also like