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
