Scribd
Upload
27 views9 pages

Assignment 2

Uploaded by

snehaguptavv
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
27 views9 pages

Assignment 2

Uploaded by

snehaguptavv
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/ 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