Scribd
Upload
15 views

wpd mp

Uploaded by

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

wpd mp

Uploaded by

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

Anjuman-I-Islam’s

M.H. SABOO SIDDIK POLYTECHNIC


8, Saboo Siddik Polytechnic Road, Mumbai-
08

Web Page Development using html(WPD)

We the students of First Year / 2nd Semester Information Technology


department of Batch 1 would like to present our MICROPROJECT on
Web Page Development using html
We will be covering the topic “Report various formal business
activity” for the project.
Group Members:
SR NO. NAME ROLL NO.
01 Imaad Shaikh 210818
02 Anas Nathani 210820
03 Haaris Ansari 210827
04 Noorain Don 210831

We would like to thank our professor Ms.Salima Khatib for her


guidance and support for making our project a successful one.
Maharashtra State
Board of Technical Education
Certificate of completion
of Micro-project assessment at the end of the Diploma
programme (By respective Head of the Department and Head of
the institute) This is to certify that Imaad Shaikh Anas Nathani
Haaris Ansari, Noorain Don, with Enrolment
number2100020154,2100020171,2100020178,210
0020175 has successfully completed micro-projects for the
subject Web page development using html in Information
Technology from M.H. SABOO SIDDIK POLYTECHNIC
Institute with institute code 0002.
Signature Signature
Head the Department Head of the
Institute
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">

<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">

<title>Shaif's Cuisine</title>

<link rel="stylesheet" href="./reset.css">

<link rel="stylesheet" href="./globalStyles.css">

<link rel="stylesheet" href="./components.css">

<!-- aos library css -->

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<!-- Add your custom css -->

<link rel="stylesheet" href="./home.css">

</head>

<body>

<!-- Nav Section -->

<div class="nav">

<div class="container">

<div class="nav__wrapper">

<a href="./index.html" class="logo">

<img src="./images/logo.svg" alt="shaif's cuisine">

</a>

<nav>

<div class="nav__icon">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"


fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

class="feather feather-menu">

<line x1="3" y1="12" x2="21" y2="12" />

<line x1="3" y1="6" x2="21" y2="6" />

<line x1="3" y1="18" x2="21" y2="18" />

</svg>

</div>

<div class="nav__bgOverlay"></div>

<ul class="nav__list">

<div class="nav__close">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"


fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

class="feather feather-x">

<line x1="18" y1="6" x2="6" y2="18" />

<line x1="6" y1="6" x2="18" y2="18" />

</svg>

</div>

<div class="nav_list_wrapper">

<li><a class="nav__link" href="./index.html">Home</a></li>

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

<li><a class="nav__link" href="./about.html">About</a></li>

<li><a class="nav__link" href="./contact.html">Contact</a></li>

<li><a href="./booking.html" class="btn primary-btn">Book Table</a></li>

</div>

</ul>

</nav>

</div>

</div>

</div>
<!-- End Nav Section -->

<!-- Hero Section -->

<section id="hero">

<div class="container">

<div class="hero__wrapper">

<div class="hero__left" data-aos="fade-left">

<div class="hero_left_wrapper">

<h1 class="hero__heading">The flavor of tradition</h1>

<p class="hero__info">

We are a multi-cuisine restaurant offering a wide variety of food experience in both casual
and fine

dining

environment.

</p>

<div class="button__wrapper">

<a href="./menu.html" class="btn primary-btn">Explore Menu</a>

<a href="./booking.html" class="btn">Book Table</a>

</div>

</div>

</div>

<div class="hero__right" data-aos="fade-right">

<div class="hero__imgWrapper">

<img src="./images/heroImg.png">

</div>

</div>

</div>

</div>

</section>

<!-- End Hero Section -->

<!-- Store Info Section -->


<section id="storeInfo" data-aos="fade-up">

<div class="container">

<div class="storeInfo__wrapper">

<div class="storeInfo__item">

<div class="storeInfo__icon">

<img src="./images/wall-clock-icon.svg" alt="clock icon">

</div>

<h3 class="storeInfo__title">

10 AM - 7 PM

</h3>

<p class="storeInfo__text">

Opening Hour

</p>

</div>

<div class="storeInfo__item">

<div class="storeInfo__icon">

<img src="./images/address-icon.svg" alt="clock icon">

</div>

<h3 class="storeInfo__title">

GEC, Chittagong

</h3>

<p class="storeInfo__text">

Address

</p>

</div>

<div class="storeInfo__item">

<div class="storeInfo__icon">

<img src="./images/phone-icon.svg" alt="clock icon">

</div>

<h3 class="storeInfo__title">

+880123443
</h3>

<p class="storeInfo__text">

Call Now

</p>

</div>

</div>

</div>

</section>

<!-- End Store Info Section -->

<!-- Our Specials Section -->

<section id="ourSpecials" data-aos="fade-up">

<div class="container">

<div class="ourSpecials__wrapper">

<div class="ourSpecials__left">

<div class="ourSpecials__item">

<div class="ourSpecials_item_img">

<img src="./images/food-3.png" alt="food img">

</div>

<h2 class="ourSpecials_item_title">

Sweet Potato Fries Bowl

</h2>

<h3 class="ourSpecials_item_price">

$18

</h3>

<div class="ourSpecials_item_stars">

<img src="./images/3star.png" alt="3 stars">

</div>

<p class="ourSpecials_item_text">

These Sweet Potato Fries bowl are a glorious, messy plate of goodness. Crispy sweet potato
fries loaded

with lots of fresh summer vegetables and a lime ranch. By adding a seasoning blend with
chipotle powder,
garlic, and onion, these spicy sweet potato fries are full of flavor.

</p>

</div>

<div class="ourSpecials__item">

<div class="ourSpecials_item_img">

<img src="./images/food-1.png" alt="food img">

</div>

<h2 class="ourSpecials_item_title">

Vegan Salad bowl

</h2>

<h3 class="ourSpecials_item_price">

$18

</h3>

<div class="ourSpecials_item_stars">

<img src="./images/3star.png" alt="3 stars">

</div>

<p class="ourSpecials_item_text">

Vegan salad bowl are immensely satisfying with any combination of whole grains, pulses,
noodles, raw or

cooked fruits, and veggies all topped off with a delicious sauce or dressing – each bite is an
explosion

of flavors and textures.

</p>

</div>

</div>

<div class="ourSpecials__right">

<h2 class="ourSpecials__title">

Our Specials

</h2>

<p class="ourSpecials__text">

All of our food is prepared daily at our restaurants to ensure the highest quality, freshest
meals are
delivered to our customers

</p>

<a href="./booking.html" class="btn primary-btn">Book Table</a>

</div>

</div>

</div>

</section>

<!-- End Our Specials Section -->

<!-- Top Dishes -->

<section id="dishGrid" data-aos="fade-up">

<div class="container">

<h2 class="dishGrid__title">

Top Dishes

</h2>

<div class="dishGrid__wrapper">

<div class="dishGrid__item">

<div class="dishGrid_item_img">

<img src="./images/food-1.png" alt="food img">

</div>

<div class="dishGrid_item_info">

<h3 class="dishGrid_item_title">

Vegan Salad bowl

</h3>

<h3 class="dishGrid_item_price">$12</h3>

<div class="dishGrid_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

</div>

</div>

<div class="dishGrid__item">

<div class="dishGrid_item_img">
<img src="./images/food-2.png" alt="food img">

</div>

<div class="dishGrid_item_info">

<h3 class="dishGrid_item_title">

Vegan Pesto Zoodles

</h3>

<h3 class="dishGrid_item_price">$12</h3>

<div class="dishGrid_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

</div>

</div>

<div class="dishGrid__item">

<div class="dishGrid_item_img">

<img src="./images/food-7.png" alt="food img">

</div>

<div class="dishGrid_item_info">

<h3 class="dishGrid_item_title">

Hot Green Bowl

</h3>

<h3 class="dishGrid_item_price">$12</h3>

<div class="dishGrid_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

</div>

</div>

</div>

</div>

</section>

<!-- End Top Dishes -->

<!-- Discount Section -->


<section id="discount" data-aos="fade-up">

<div class="container">

<div class="discount__wrapper">

<div class="discount__images">

<div class="discount__img1">

<img src="./images/food-5.png" alt="Food img">

</div>

<div class="discount__img2">

<img src="./images/food-4.png" alt="Food img">

</div>

<div class="discount__img3">

<img src="./images/food-3.png" alt="Food img">

</div>

</div>

<div class="discount__info">

<h3 class="discount__text">20% OFF</h3>

<h3 class="discount__title">Demo Dish For Discount</h3>

<h3 class="discount__price">

<span class="discount__oldPrice">$45</span>

<span class="discount__newPrice">$35</span>

</h3>

<div class="discount__stars">

<img src="./images/3star.png" alt="3 stars">

</div>

<a class="btn primary-btn" href="./booking.html">Book Table</a>

</div>

</div>

</div>

</section>

<!-- End Discount Section -->

<!-- Events Media -->


<section id="eventsMedia" data-aos="fade-up">

<div class="container">

<div class="eventsMedia__wrapper">

<div class="eventsMedia__1">

<img src="./images/eventsMedia1.png" alt="events">

<a href="#" class="eventsMedia_1_playButton">

<img src="./images/playIcon.svg" alt="play button">

</a>

</div>

<div class="eventMedia__2">

<img src="./images/eventsMedia2.png" alt="events">

</div>

</div>

</div>

</section>

<!-- End Events Media -->

<!-- Events Info -->

<section id="eventsInfo" data-aos="fade-up">

<div class="container">

<div class="eventsInfo__wrapper">

<div class="eventsInfo__left">

<div class="eventsInfo__item">

<div class="eventsInfo_item_img">

<img src="./images/event-corporate.png" alt="corporate events">

</div>

<div class="eventsInfo_item_info">

<h2 class="eventsInfo_item_title">Corporate Events</h2>

<p class="eventsInfo_item_text">

Shaif's Cuisine is the perfect venue for your corporate events. We specialize in private
parties.

</p>
</div>

</div>

<div class="eventsInfo__item">

<div class="eventsInfo_item_img">

<img src="./images/event-weedings.png" alt="wedding events">

</div>

<div class="eventsInfo_item_info">

<h2 class="eventsInfo_item_title">Weddings</h2>

<p class="eventsInfo_item_text">

Shaif's Cuisine offers an intimately unique wedding experience set in a spectacular setting
that is

sophisticated and comfortable.

</p>

</div>

</div>

</div>

<div class="eventsInfo__right">

<h2 class="eventsInfo__title">Book For Events</h2>

<p class="eventsInfo__text">Book your private event or corporate function at Shaif's cuisine to


experience a

truly unique experience.</p>

<a href="./contact.html" class="btn primary-btn">Contact Now</a>

</div>

</div>

</div>

</section>

<!-- End Events Info -->

<!-- Why Us section -->

<section id="whyUs">

<div class="container">

<div class="whyUs__wrapper">

<div class="whyUs__left" data-aos="fade-right">


<h2 class="whyUs__title">

Why Choose Our Food

</h2>

<p class="whyUs__text">

Quality of Service, Food, Ambiance, and Value of Money are the primary elements for
choosing a restaurant.

Shaif's Cuisine is one of the most exquisite fine-dinning restaurant in Chittagong cities with a
captivating

view of GEC Hills, perfect ambiance, and scrumptious food.

</p>

</div>

<div class="whyUs__right" data-aos="fade-left">

<div class="whyUs_items_wrapper">

<div class="whyUs__item">

<div class="whyUs_item_icon">

<img src="./images/whyUs-icon1.svg" alt="quality Food">

</div>

<p class="whyUs_item_text">Quality Food</p>

</div>

<div class="whyUs__item">

<div class="whyUs_item_icon">

<img src="./images/whyUs-icon2.svg" alt="Classical taste">

</div>

<p class="whyUs_item_text">Classical taste</p>

</div>

<div class="whyUs__item">

<div class="whyUs_item_icon">

<img src="./images/whyUs-icon3.svg" alt="Skilled chef">

</div>

<p class="whyUs_item_text">Skilled chef</p>

</div>

<div class="whyUs__item">
<div class="whyUs_item_icon">

<img src="./images/whyUs-icon4.svg" alt="Best service">

</div>

<p class="whyUs_item_text">Best service</p>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- End Why Us section -->

<!-- Testimonial Section -->

<section id="testimonial">

<div class="container">

<div class="testimonial__wrapper" data-aos="fade-up">

<h2 class="testimonial__title">What Our Customers Say</h2>

<div class="testimonial_items_wrapper">

<div class="testimonial__item">

<div class="testimonial_item_img">

<img src="./images/testimonial_img1.png" alt="Sayed Ahmed">

</div>

<div class="testimonial_item_info">

<h3 class="testimonial_item_name">Sayed Ahmed</h3>

<div class="testimonial_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

<p class="testimonial_item_text">

“Visited Shaif’s Cuisine with friends last Sunday. Really lovely meal and very warm welcome
– we would

recommend this lovely restaurant and will try to go back again”

</p>
</div>

</div>

<div class="testimonial__item">

<div class="testimonial_item_img">

<img src="./images/testimonial_img1.png" alt="Sayed Ahmed">

</div>

<div class="testimonial_item_info">

<h3 class="testimonial_item_name">Arfan</h3>

<div class="testimonial_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

<p class="testimonial_item_text">

"from start to finish, lovely experience. Hostess very pleasant, wait staff john was wonderful
and

attentive, food plentiful and delicious, desserts out of this world"

</p>

</div>

</div>

<div class="testimonial__item">

<div class="testimonial_item_img">

<img src="./images/testimonial_img1.png" alt="Sayed Ahmed">

</div>

<div class="testimonial_item_info">

<h3 class="testimonial_item_name">Fahim & Nishat</h3>

<div class="testimonial_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

<p class="testimonial_item_text">

“A warm and friendly welcome with fantastic customer service. Always great, tasty food
served piping

hot- just the way we love it . Would definitely recommend. We have been repeatedly and
it's consistently
exceeded our expectations"

</p>

</div>

</div>

<div class="testimonial__item">

<div class="testimonial_item_img">

<img src="./images/testimonial_img1.png" alt="Sayed Ahmed">

</div>

<div class="testimonial_item_info">

<h3 class="testimonial_item_name">Hussain</h3>

<div class="testimonial_item_stars">

<img src="./images/3star.png" alt="3 star">

</div>

<p class="testimonial_item_text">

“I would just like to say thank you for the excellent service we received in your restaurant
last night.

Although the place was very busy we still had an excellent time and really appreciated the
live

entertainment too!“

</p>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- End Testimonial Section -->

<!-- Newsletter Section -->

<section id="newsletter" data-aos="fade-up">

<div class="container">

<div class="newsletter__wrapper">

<div class="newsletter__info">
<h3 class="newsletter__title">Join Newsletter</h3>

<p class="newsletter__text">

Get notified with the latest news and recent offers from the “Shaif’s Cuisine”

</p>

</div>

<div class="newsletter__form">

<form action="">

<label for="email">

<input type="email" placeholder="Your Email Address">

</label>

<button type="submit">Join</button>

</form>

</div>

</div>

</div>

</section>

<!-- End Newsletter Section -->

<!-- Footer -->

<footer>

<div class="container">

<div class="footer__wrapper">

<div class="footer__col1">

<div class="footer__logo">

<img src="./images/logo.svg" alt="shaif's cuisine">

</div>

<p class="footer__desc">

Fresh and delicious traditional Bangladeshi food to delight the whole family.

</p>

<div class="footer__socials">

<h4 class="footer_socials_title">Follow us</h4>


<ol class="footer_socials_list">

<li>

<a href="#">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"


fill="none"

stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"

class="feather feather-facebook">

<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />

</svg>

</a>

</li>

<li>

<a href="#">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"


fill="none"

stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"

class="feather feather-instagram">

<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />

<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />

<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />

</svg>

</a>

</li>

<li>

<a href="#">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"


fill="none"

stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"

class="feather feather-twitter">

<path

d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9
5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>

</a>

</li>

</ol>

</div>

</div>

<div class="footer__col2">

<h3 class="footer_text_title">

Links

</h3>

<ol class="footer__text">

<li>

<a href="/index.html">Home</a>

</li>

<li>

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

</li>

<li>

<a href="./booking.html">Book Table</a>

</li>

<li>

<a href="./about.html">About Us</a>

</li>

<li>

<a href="./contact.html">contact Us</a>

</li>

<li>

<a href="#">Privacy Policy</a>

</li>

</ol>

</div>
<div class="footer__col3">

<h3 class="footer_text_title">

Support

</h3>

<ol class="footer__text">

<li>

<a href="#">Contact</a>

</li>

<li>

<a href="#">Support Center</a>

</li>

<li>

<a href="#">Feedback</a>

</li>

</ol>

</div>

<div class="footer__col4">

<h3 class="footer_text_title">

Contact

</h3>

<ol class="footer__text">

<li>

<a href="#">+880123</a>

</li>

<li>

<a href="#">[email protected]</a>

</li>

<li>

<a href="#">GEC Circle, Chittagong, Bangladesh</a>

</li>

</ol>
</div>

</div>

</div>

</footer>

<div id="copyright">

<div class="container">

<p class="copyright__text">

© copyright 2021 Shaif’s Cuisine | All rights reserved

</p>

</div>

</div>

<!-- End Footer -->

<!-- aos script -->

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<!-- custom script -->

<script src="./main.js"></script>

</body>

</html>

CSS CODE
/* hero section styles */

.hero__wrapper {

display: flex;

align-items: center;

justify-content: center;

flex-direction: column-reverse;

gap: 5rem;

.hero_left_wrapper {

max-width: 350px;
}

.hero__imgWrapper {

max-width: 400px;

width: 80%;

margin: 0 auto;

.hero__heading {

font-family: Poppins;

font-weight: 600;

line-height: 1.4em;

text-align: center;

font-size: 1.8rem;

margin-bottom: 1.5rem;

color: var(--black-1);

.hero__info {

text-align: center;

font-size: 1.4rem;

margin-bottom: 1.5rem;

color: var(--black-2);

.button__wrapper {

text-align: center;

@media only screen and (min-width: 768px) {

.hero__wrapper {

flex-direction: row;

gap: 0;

.hero__left {
flex: 3;

.hero__right {

flex: 4;

.hero__heading {

font-size: 3.6rem;

margin-bottom: 2rem;

text-align: left;

.hero__info {

margin-bottom: 2rem;

text-align: left;

font-size: 1.8rem;

.button__wrapper {

text-align: left;

.hero__imgWrapper {

max-width: none;

width: 90%;

@media only screen and (max-width: 900px) {

.hero__left,

.hero__right {

flex: 1;

}
/* Our Specials Section Styles */

#ourSpecials {

padding-top: 10rem;

.ourSpecials__wrapper {

display: flex;

flex-direction: column;

gap: 3rem;

.ourSpecials__left {

display: flex;

gap: 1rem;

.ourSpecials__item {

background-color: var(--lightGreen-1);

padding: 1.2rem;

padding-top: 5rem;

border-radius: 12px;

width: 45%;

margin: 0 auto;

.ourSpecials_item_img {

margin-top: calc(-50% - 2rem);

margin-bottom: 2rem;

border-radius: 12px;

height: 150px;

overflow: hidden;

.ourSpecials_item_img img {

object-fit: cover;

}
.ourSpecials_item_title {

font-size: 1.4rem;

color: var(--black-1);

font-weight: 600;

margin-bottom: 1rem;

.ourSpecials_item_price {

color: var(--green-1);

font-size: 1.4rem;

font-weight: 600;

margin-bottom: 1rem;

.ourSpecials_item_stars {

height: 1.5rem;

width: max-content;

margin-bottom: 1rem;

.ourSpecials_item_text {

font-size: 1.4rem;

color: var(--black-2);

font-weight: 500;

.ourSpecials__title {

font-size: 1.8rem;

margin-bottom: 1.5rem;

color: var(--black-1);

.ourSpecials__text {

font-size: 1.4rem;

color: var(--black-2);

margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {

#ourSpecials {

padding-top: 15rem;

#ourSpecials .container {

max-width: 900px;

.ourSpecials__wrapper {

flex-direction: row;

.ourSpecials__right {

flex: 2;

.ourSpecials__left {

flex: 4;

gap: 2rem;

.ourSpecials__item {

padding: 2rem;

.ourSpecials_item_title {

font-size: 2.4rem;

line-height: 1.4em;

margin-bottom: 1.5rem;

.ourSpecials_item_price {

font-size: 1.8rem;

margin-bottom: 1rem;

.ourSpecials_item_stars {
margin-bottom: 2rem;

.ourSpecials_item_text {

font-size: 1.6rem;

.ourSpecials__title {

font-size: 3.6rem;

margin-bottom: 1.5rem;

.ourSpecials__text {

font-size: 1.8rem;

margin-bottom: 1.5rem;

@media only screen and (max-width: 300px) {

.ourSpecials__left {

flex-wrap: wrap;

gap: 10rem;

.ourSpecials__item {

width: 100%;

/* Discount Styles */

.discount__wrapper {

display: flex;

flex-direction: column;

padding: 1.5rem;

border-radius: 12px;

background: var(--lightGreen-1) url(./images/discount-illustration.png)

no-repeat bottom right / 100px;


}

.discount__images {

display: flex;

gap: 1rem;

width: 100%;

margin-bottom: 2rem;

.discount__img1 {

flex: 2;

.discount__img2 {

flex: 3;

.discount__images img {

object-fit: cover;

border-radius: 12px;

.discount__text {

font-size: 1.4rem;

font-weight: 900;

color: var(--green-1);

margin-bottom: 0.5rem;

.discount__title {

font-size: 1.8rem;

color: var(--black-1);

font-weight: 600;

margin-bottom: 1rem;

.discount__price {

font-size: 1.4rem;
font-weight: 600;

display: flex;

gap: 1rem;

margin-bottom: 1rem;

.discount__oldPrice {

color: var(--black-2);

text-decoration: line-through;

.discount__newPrice {

color: var(--green-1);

.discount__stars {

width: max-content;

height: 15px;

margin-bottom: 1rem;

@media only screen and (min-width: 768px) {

.discount__wrapper {

flex-direction: row;

gap: 4rem;

padding: 2rem;

align-items: center;

background-size: 150px;

margin: 0 auto;

.discount__images {

flex: 5;

margin-bottom: 0;

gap: 2rem;

}
.discount__img1,

.discount__img2,

.discount__img3 {

flex: 1;

height: 350px;

.discount__info {

flex: 3;

.discount__text {

font-size: 2.4rem;

.discount__title {

font-size: 3.6rem;

margin-bottom: 1.5rem;

.discount__price {

font-size: 2.4rem;

.discount__stars {

height: 20px;

margin-bottom: 2rem;

@media only screen and (max-width: 1000px) {

.discount__wrapper {

gap: 2rem;

.discount__img3 {

display: none;

}
}

/* End Discount Styles */

/* EventsMedia Styles */

.eventsMedia__wrapper {

display: flex;

gap: 1rem;

.eventsMedia__1 {

position: relative;

.eventsMedia_1_playButton {

display: inline-block;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

max-width: 50px;

@media only screen and (min-width: 768px) {

.eventsMedia__wrapper {

gap: 2rem;

.eventsMedia_1_playButton {

max-width: 100px;

/* End EventsMedia Styles */

/* EventsInfo Styles*/

#eventsInfo {

padding-top: 0;

}
.eventsInfo__wrapper {

display: flex;

flex-direction: column;

.eventsInfo__item {

display: flex;

gap: 1rem;

padding: 1rem;

background: var(--lightGreen-1);

margin-bottom: 1.5rem;

border-radius: 12px;

.eventsInfo_item_img {

border-radius: 12px;

overflow: hidden;

flex: 3;

.eventsInfo_item_info {

flex: 4;

.eventsInfo_item_img img {

object-fit: cover;

.eventsInfo_item_title {

font-size: 1.4rem;

margin-bottom: 1rem;

color: var(--black-1);

.eventsInfo_item_text {

font-size: 1.4rem;

color: var(--black-2);
}

.eventsInfo__right {

margin-top: 2rem;

.eventsInfo__title {

font-size: 1.8rem;

color: var(--black-1);

margin-bottom: 1rem;

.eventsInfo__text {

color: var(--black-2);

font-size: 1.4rem;

margin-bottom: 1rem;

@media only screen and (min-width: 760px) {

.eventsInfo__wrapper {

flex-direction: row;

gap: 2rem;

.eventsInfo__left,

.eventsInfo__right {

flex: 1;

.eventsInfo__item {

padding: 2rem;

gap: 2rem;

max-width: 500px;

margin-bottom: 2rem;

.eventsInfo_item_title {

font-size: 1.8rem;
}

.eventsInfo_item_text {

font-size: 1.6rem;

.eventsInfo__title {

font-size: 3.6rem;

.eventsInfo__text {

max-width: 500px;

font-size: 1.8rem;

margin-bottom: 2rem;

/* End EventsInfo Styles*/

/* WhyUs Section */

.whyUs__wrapper {

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

gap: 4rem;

.whyUs__left {

text-align: center;

.whyUs__title {

font-family: Poppins;

font-size: 1.8rem;

color: var(--black-1);

font-weight: 500;

margin-bottom: 1rem;
}

.whyUs__text {

font-size: 1.4rem;

.whyUs__right {

text-align: center;

.whyUs_items_wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 1rem;

.whyUs__item {

background: var(--lightGreen-1);

padding: 2rem;

border-radius: 12px;

.whyUs_item_icon {

max-width: 56px;

margin: 0 auto;

margin-bottom: 1rem;

.whyUs_item_text {

font-family: Poppins;

font-size: 1.4rem;

font-weight: 500;

color: var(--black-1);

@media only screen and (min-width: 768px) {

.whyUs__wrapper {

flex-direction: row;
max-width: 900px;

margin: 0 auto;

.whyUs__left {

flex: 4;

text-align: left;

.whyUs__right {

flex: 3;

.whyUs__title {

font-size: 3.6rem;

margin-bottom: 2rem;

.whyUs__text {

font-size: 1.8rem;

line-height: 1.4em;

.whyUs_items_wrapper {

gap: 1.5rem;

.whyUs__item {

padding: 2rem;

.whyUs_item_icon {

max-width: 65px;

margin-bottom: 1.5rem;

.whyUs_item_text {

font-size: 1.8rem;

}
}

/* End WhyUs Section */

/* Testimonial Section */

.testimonial__wrapper {

max-width: 400px;

margin: 0 auto;

.testimonial__title {

font-size: 1.8rem;

margin-bottom: 3rem;

text-align: center;

color: var(--black-1);

.testimonial_items_wrapper {

display: grid;

grid-template-columns: 1fr;

gap: 1rem;

.testimonial__item {

padding: 1rem;

display: flex;

gap: 1rem;

background-color: var(--lightGreen-1);

border-radius: 12px;

.testimonial_item_info {

flex: 4;

.testimonial_item_img {
flex: 2;

border-radius: 12px;

overflow: hidden;

width: 100%;

height: 100%;

.testimonial_item_img img {

object-fit: cover;

.testimonial_item_name {

font-size: 1.4rem;

font-family: poppins;

margin-bottom: 1rem;

.testimonial_item_stars {

max-height: 15px;

width: max-content;

margin-bottom: 1.5rem;

.testimonial_item_text {

font-size: 1.4rem;

@media only screen and (min-width: 768px) {

.testimonial__wrapper {

max-width: 900px;

.testimonial__title {

font-size: 3.6rem;

margin-bottom: 5rem;

.testimonial_items_wrapper {
grid-template-columns: 1fr 1fr;

gap: 2rem;

.testimonial__item {

padding: 2rem;

.testimonial_item_name {

font-size: 1.8rem;

margin-bottom: 1.5rem;

.testimonial_item_stars {

margin-bottom: 2rem;

.testimonial_item_text {

font-size: 1.6rem;

line-height: 1.4em;

@media only screen and (max-width: 350px) {

.testimonial__item {

flex-direction: column;

.testimonial_item_img,

.testimonial_item_info {

flex: auto;

/* End Testimonial Section */

/* Newsletter Section */

.newsletter__wrapper {
display: flex;

flex-direction: column;

background-color: var(--green-2);

padding: 1.5rem;

border-radius: 8px;

gap: 2rem;

.newsletter__title {

font-size: 1.8rem;

color: var(--black-1);

font-weight: 600;

margin-bottom: 1.3rem;

.newsletter__text {

font-size: 1.4rem;

color: var(--black-2);

font-weight: 500;

.newsletter__form form {

position: relative;

width: 100%;

border-radius: 8px;

overflow: hidden;

.newsletter__form label {

width: 100%;

.newsletter__form input {

width: 100%;

font-size: 1.4rem;

padding: 1.5rem 1rem;


border: none;

.newsletter__form input::placeholder {

color: rgb(168, 166, 166);

.newsletter__form button[type='submit'] {

background-color: var(--green-1);

color: var(--white-1);

border: none;

font-size: 1.4rem;

padding: 0 2rem;

height: 100%;

/* width: 100%; */

position: absolute;

right: 0;

top: 0;

@media only screen and (min-width: 768px) {

.newsletter__wrapper {

flex-direction: row;

padding: 5rem;

align-items: center;

.newsletter__info,

.newsletter__form {

flex: 1;

.newsletter__title {

font-size: 3.6rem;

margin-bottom: 2rem;

}
.newsletter__text {

font-size: 1.8rem;

max-width: 400px;

.newsletter__form {

max-width: 450px;

border-radius: 12px;

.newsletter__form input {

font-size: 1.8rem;

padding: 2rem;

.newsletter__form button[type='submit'] {

font-size: 1.8rem;

padding: 0 3rem;

/* End Newsletter Section */

OUTPUT
Micro-Project Proposal

Annexure-1

Web Page on Travelling

 Aim of the Micro-Project


To find and study about code
 Course Outcomes Addressed
a) We got an idea of different application of the code in real life
 Action Plan.
S. Details of Planned Planned Name of
NO. activity Start dateFinish date Responsible Team
Members
1 Discussion 11/05/202 15/05/2022 Imaad Shaikh,
with teacher 2
Anas Nathani,
Haaris Ansari,
Noorain Don
2 Discussion 12/05/202 16/05/2022 Imaad Shaikh,
with group 2
Anas Nathani,
Haaris Ansari,
Noorain Don
3 Documentation 14/05/202 17/05/2022 Imaad Shaikh,
2
Anas Nathani,
Haaris Ansari,
Noorain Don

 Resources Required (major resources such as raw material,


some machining facility, software etc.)
S. Name of Specifications Qty.
NO. Resource/material Remarks
1 www.wikipedia.org 1 Ok
2 www.google.com 2 Ok
3 www.quora.com 2 Ok
4 www.toppr.com 1 Ok

 Names of Team Members with Roll Nos.


1. 210818 – Imaad Shaikh
2. 210820 – Anas Nathani
3. 210827 – Haaris Ansari
4. 210831 – Noorain Don

 Proposed Methodology.
1) ‌We discussed the topic with teacher.
2) We did a group discussion.
3) Noorain Don & Imaad Shaikh collected information.
4) ‌Anas Nathani and Haaris Ansari made word document.
5) Haaris Ansari made Report on micro project.

 Skill Developed / Learning outcome of this Micro-Project


a) We came to know about various uses of code
b) We got an idea of how to use different syntaxes using code
c) We got to know about different types of Syntaxes

You might also like