WTAssignnent 2

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>

<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>
<img src="indian-food.jpg" alt="" />

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

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

</div>
</div>
<img src="South Indian.png" alt="" />
<div class="location">Chakan, Pune</div>

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

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

</div>
</div>
</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>
</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>
<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 © 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 –
@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;
}
.tertiary {
font-size: 24px;
font-weight: 400;
}
.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 {
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;
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);
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 {
margin: 0 15px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
.category li.active {
}
.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 {
padding: 6px 10px;

font-size: 16px;
text-align: center;
background: #fff;
border: 1px solid 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;
}
}
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
left: -100%;
top: 80px;
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;
}
#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 {
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;
}
}
.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;
}
.secondary {
font-size: 32px;
}
.tertiary {
font-size: 17px;
}
}
Output –

WTAssignnent 2

Uploaded by

Copyright:

Available Formats

WTAssignnent 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WTAssignnent 2

Uploaded by

Copyright:

Available Formats

Name – Uditkumar Panda Roll No.

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

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

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

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

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

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

<div class="order flex">

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

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

<div class="order flex">

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

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

<div class="order flex">

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

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

<div class="order flex">

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

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

<div class="order flex">

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

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

<div class="order flex">

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

<div class="user flex">

padding: 6px 10px;

transition: all 0.5s;

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

You might also like