Scribd
Upload
14 views13 pages

WTAssignnent 2

The document contains HTML and CSS code for a food ordering website. The HTML code defines the structure and content of the website including sections for navigation, homepage content, menu, reviews, and footer. The CSS code contains styling rules for layout, colors, fonts and other design elements of the website.

Uploaded by

dajiwaj110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views13 pages

WTAssignnent 2

The document contains HTML and CSS code for a food ordering website. The HTML code defines the structure and content of the website including sections for navigation, homepage content, menu, reviews, and footer. The CSS code contains styling rules for layout, colors, fonts and other design elements of the website.

Uploaded by

dajiwaj110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Name – Uditkumar Panda Roll No.

– 02 Class – TE Comp

HTML Code –

<!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 Lover</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="menu">
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn">
<ion-icon name="grid-outline"></ion-icon>
</label>

<label class="logo">Bharti Aahaar Bhuvan</label>

<ul>
<li><a href="#hero-section" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#testimonial">Reviews</a></li>
</ul>
</nav>
</div>

<div class="section flex" id="hero-section">


<div class="text">
<h1 class="primary">
It's Not Just Khana, <br />
It's an <span>Anubhav...</span>
</h1>

<p class="tertiary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa,
provident dolorum. Voluptatum Herr Hitler... quasi unde, voluptatibus
soluta eligendi. Enim, architecto autem.
</p>

<a href="#menu" class="btn">Explore Menu</a>


</div>
<div class="visual">
<img
src="https://raw.githubusercontent.com/programmercloud/foodlover/main/img/home-banner.png"
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

alt=""
/>
</div>
</div>

<div class="section" id="menu">


<div class="container">
<ul class="category">
<li class="active">All</li>
<li>Biryani</li>
<li>Chinese</li>
<li>Pizza</li>
<li>Burger</li>
<li>Pasta</li>
</ul>

<div class="container">
<div class="restaurant-menu">
<div class="menu-item">
<img src="Chinese Food.png" alt="" />

<div class="title">Online Food Website | Indian & Chinese</div>

<div class="location">Pirangut, India</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>

<div class="menu-item">
<img src="indian-food.jpg" alt="" />

<div class="title">Online Food Website | Indian & Chinese</div>

<div class="location">Pirangut, India</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>

<div class="menu-item">
<img src="paneer-food.jpg" alt="" />

<div class="title">Online Food Website | Indian & Chinese</div>


Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

<div class="location">Chakan, Pune</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>

<div class="menu-item">
<img src="South Indian.png" alt="" />

<div class="title">Online Food Website | Indian & Chinese</div>

<div class="location">Chakan, Pune</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>

<div class="menu-item">
<img
src="stir-fry-chicken-zucchini-sweet-peppers-green-onion-with-chopsticks.jpg"
alt=""
/>

<div class="title">Online Food Website | Indian & Chinese</div>

<div class="location">Pirangut, India</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>

<div class="menu-item">
<img src="high-angle-chicken-meal.jpg" alt="" />

<div class="title">Online Food Website | Indian & Chinese</div>

<div class="location">Pirangut, India</div>

<div class="order flex">


<div class="price">₹250.00</div>
<a href="#" class="btn btn-menu">Order Now</a>
</div>
</div>
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

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

<div class="section" id="testimonial">


<div class="container flex">
<div class="text">
<h2 class="secondary">What people say about FoodLover</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore,
eos voluptatem odio, molestias ullam error dolor rem laboriosam illo
quae odit aliquam sint a amet, autem natus! Praesentium, ipsam
mollitia?
</p>

<div class="user flex">


<img src="food expert.jpeg" alt="" />

<div class="name">
<div class="title">Food Expert Manas Deshpande</div>
<div class="location">Pirangut, India</div>
</div>
</div>
</div>
<div class="visual">
<img
src="https://raw.githubusercontent.com/programmercloud/foodlover/main/img/testimonial.png"
alt=""
/>
</div>
</div>
</div>

<div class="footer">
<div class="container flex">
<div class="footer-about">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
aspernatur sit deleniti enim voluptas voluptatum incidunt rerum,
exercitationem voluptate nemo quo impedit ad perspiciatis tempore
nulla dolore fugit, fuga eos.
</p>
</div>

<div class="footer-category">
<h2>Our Menu</h2>
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

<ul>
<li>Biryani</li>
<li>Chinese</li>
<li>Pizza</li>
<li>Vada Pav</li>
<li>Pasta</li>
</ul>
</div>

<div class="quick-links">
<h2>Quick Links</h2>

<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Menu</li>
<li>Order</li>
<li>Services</li>
</ul>
</div>

<div class="get-in-touch">
<h2>Get in touch</h2>
<ul>
<li>Account</li>
<li>Support Center</li>
<li>Feedback</li>
<li>Suggession</li>
</ul>
</div>
</div>

<div class="copyright">
<p>Copyright &copy; 2022. All Rights Reserved.</p>
</div>
</div>

<script
type="module"
src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
></script>
</body>
</html>

CSS Code –
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

@import
url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap");
/* Base */
:root {
--clr-primary: #2727eb;
--clr-secondary: #272d36;
}
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Josefin Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: #fff;
color: var(--clr-secondary);
overflow-x: hidden;
}
.section {
width: 100%;
padding: 40px 0;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding: 0 30px;
}
.primary {
font-size: 64px;
font-weight: 700;
margin-bottom: 20px;
}
.secondary {
font-size: 44px;
font-weight: 700;
margin-bottom: 20px;
}
.tertiary {
font-size: 24px;
font-weight: 400;
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

margin-bottom: 20px;
}
.btn {
padding: 14px 20px;
background: var(--clr-primary);
border-radius: 4px;
color: #fff;
text-decoration: none;
font-size: 22px;
display: inline-block;
margin: 20px 0;
}
nav {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background: #5debfb;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.22);
z-index: 22;
}
label.logo {
font-size: 35px;
line-height: 80px;
padding: 0 30px;
font-weight: 700;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
font-size: 18px;
padding: 7px 13px;
text-decoration: none;
color: var(--clr-secondary);
}
.menu a.active,
.menu a:hover {
border-bottom: 2px solid var(--clr-primary);
transition: 0.3s;
}
.checkbtn {
font-size: 30px;
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

color: #fff;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#hero-section {
background: #fff5f2;
margin-top: 60px;
}
.text,
.visual {
width: 50%;
}
.text {
margin: 0 20px;
}
.visual img {
width: 80%;
height: auto;
display: block;
}
#hero-section .text {
margin-left: 30px;
}
#hero-section .visual img {
margin-left: auto;
}
#how-it-works {
width: 80%;
margin: 0 auto;
text-align: center;
}
.box {
border: 1px solid #b2b2b2;
padding: 25px 5px;
margin: 0 10px;
border-radius: 8px;
font-size: 18px;
transition: 0.3s ease;
cursor: pointer;
}
.box ion-icon {
font-size: 35px;
color: var(--clr-primary);
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

margin: 15px 0;
}
.box.active,
.box:hover {
color: #fff;
border-color: var(--clr-primary);
background: var(--clr-primary);
}
.box.active ion-icon,
.box:hover ion-icon {
color: #fff;
}
#about .visual img,
#app .visual img {
margin-right: auto;
}
.category {
list-style: none;
text-align: center;
margin: 20px 0 40px 0;
}
.category li {
display: inline-block;
margin: 0 15px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
.category li.active {
color: var(--clr-primary);
}
.restaurant-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.menu-item {
width: 260px;
margin: 0 auto;
border-radius: 6px;
overflow: hidden;
}
.menu-item img {
width: 100%;
}

.order {
justify-content: space-between;
}
.btn-menu {
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

padding: 6px 10px;


font-size: 16px;
text-align: center;
background: #fff;
border: 1px solid var(--clr-primary);
color: var(--clr-primary);
}
.title {
font-size: 18px;
font-weight: 300;
margin: 8px 0;
}
.location {
font-size: 18px;
font-weight: 500;
}
#testimonial .visual img {
margin-left: auto;
}
.user {
margin-top: 30px;
justify-content: start;
}
.user img {
width: 50px;
border-radius: 50%;
margin-right: 20px;
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 20px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
color: var(--clr-primary);
}
ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
left: -100%;
top: 80px;
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

transition: all 0.5s;


text-align: center;
background: #fff5f2;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
.menu a:hover,
.menu a.active {
background: none;
color: var(--clr-primary);
}
#check:checked ~ ul {
left: 0;
}
#hero-section {
margin-top: 80px;
}
#hero-section .text {
margin-left: auto;
}
.flex {
flex-direction: column;
}
.visual,
.text {
width: 70%;
margin: 15px auto;
text-align: center;
}
.download,
.user {
flex-direction: row;
}
.user {
justify-content: center;
}
.visual img {
margin: 0 auto;
}
.box {
margin: 15px 0;
}
.restaurant-menu {
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

grid-template-columns: repeat(2, 1fr);


grid-gap: 20px;
}
.faq,
.menu-item {
width: 80%;
}
.primary {
font-size: 56px;
}
.secondary {
font-size: 40px;
}
.tertiary {
font-size: 20px;
}
.footer-about {
width: 100%;
text-align: center;
}
.quick-links,
.get-in-touch,
.footer-category {
display: none;
}
}
@media (max-width: 680px) {
.container {
padding: 0 10px;
}
.text,
.visual {
width: 90%;
}
.restaurant-menu {
grid-template-columns: 1fr;
}
.faq {
width: 90%;
}
.app-store {
margin: 10px 0;
}
.download {
flex-direction: column;
}
.primary {
font-size: 48px;
}
Name – Uditkumar Panda Roll No. – 02 Class – TE Comp

.secondary {
font-size: 32px;
}
.tertiary {
font-size: 17px;
}
}

Output –

You might also like