Scribd
Upload
102 views

Report On Multi-Page Responsive Website

The document describes a multi-page responsive food ordering website created with HTML, CSS, and Vanilla JavaScript. The website includes 10 pages: a home page with search, menu, and comments; an about page; a menu page to search and view items; a products page; a comments page; a blog with recipes; and a cart page to pay. Code screenshots show the HTML, CSS, and JavaScript files used to build navigation, search, and cart functionality.

Uploaded by

Shubham Prakash
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
102 views

Report On Multi-Page Responsive Website

The document describes a multi-page responsive food ordering website created with HTML, CSS, and Vanilla JavaScript. The website includes 10 pages: a home page with search, menu, and comments; an about page; a menu page to search and view items; a products page; a comments page; a blog with recipes; and a cart page to pay. Code screenshots show the HTML, CSS, and JavaScript files used to build navigation, search, and cart functionality.

Uploaded by

Shubham Prakash
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/ 8

Inten Project Report

Multi-Page Responsive Website

Food ordering Website

Tech Stack Used:- Html, CSS, Vanilla Javascript

Functionalities ➖
1. It has multiple pages, and all the pages are responsive.
2. It has a home page that contains a perfect UI, and it contains this
website description, has one search bar for searching food items, a
short menu which contains food items and products, and it also has
comments given by various people.
3. It contains a form from which we can connect with the owner.
4. It has all the links in the footer, like Instagram handle, Facebook,
Twitter, LinkedIn, etc.
5. It has an About Us page with detailed information about the food
ordering service.
6. It contains a Menu page that contains the menu of the restaurant. A
person can go there and search for any food item that he wants to
eat.
7. It contains a product page that contains all of its products.
8. It contains one comment page where a customer can add comments
on a specific food item.
9. It has a blog page, too, in which the owner has given the recipes of
the food item that how they can make a specific product, and it has a
perfect UI.
10. It has a cart page containing all the food items the customer has
added to the cart, and then he must pay bills.
Some Code Screenshots:-

Index.html file ➖
<!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">
<!-- CSS LINK -->
<link rel="stylesheet" href="style.css">
<!-- Fontawesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.mi
n.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD
9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<title>Cok Sayfali Web Sitesi | Nizami Sevindi</title>
</head>
<body>
<!-------------------------------------------- HEADER SECTION -->
<header class="header" >
<a href="#" class="logo">
<img src="./image/pngegg.png" alt="logo">
</a>
<nav class="navbar">
<a href="./index.html" class="active">home</a>
<a href="./about.html">about</a>
<a href="./menu.html">menu</a>
<a href="./products.html">products</a>
<a href="./review.html">review</a>
<a href="./contact.html">contact</a>
<a href="./blog.html">blog</a>
</nav>
Style.css file:-

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400
;500;600;700&display=swap');

:root{
--main-color:#284990;
--black-color: #252525;
--border: 0.1rem solid rgba(255, 255, 255, 0.4);
}

*{
font-family: 'Poppins',sans-serif;
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
text-decoration: none;
text-transform: capitalize;
transition: .2s ease;
outline: none;
}

html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}

body{
background-color: var(--main-color);

section{
padding: 3.5rem 7%;
scroll-margin-top: 9rem;
}
Script.js file:-

const searchForm = document.querySelector('.search-form');


const searchBtn = document.querySelector('#search-btn');
const cartItem = document.querySelector('.cart-items-container')
const cartBtn = document.querySelector('#cart-btn')
const navbar = document.querySelector('.navbar')
const menuBtn = document.querySelector('#menu-btn')

searchBtn.addEventListener('click', ()=>{
searchForm.classList.toggle('active');
document.addEventListener('click', (e)=>{
if(!e.composedPath().includes(searchBtn) &&
!e.composedPath().includes(searchForm) ){
searchForm.classList.remove('active');
}
})
})

cartBtn.addEventListener('click', ()=>{
cartItem.classList.toggle('active');
document.addEventListener('click', (e)=>{
if(!e.composedPath().includes(cartBtn) &&
!e.composedPath().includes(cartItem) ){
cartItem.classList.remove('active');
}
})
})

Menu.html file:-

<!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">
<!-- CSS LINK -->
<link rel="stylesheet" href="style.css">
<!-- Fontawesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.mi
n.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD
9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<title>Our Menu | Nizami Sevindi</title>
</head>
<body>

<!-------------------------------------------- HEADER SECTION -->


<header class="header" >
<a href="#" class="logo">
<img src="./image/pngegg.png" alt="logo">
</a>
<nav class="navbar">
<a href="./index.html">home</a>
<a href="./about.html">about</a>
<a href="./menu.html" class="active">menu</a>
<a href="./products.html">products</a>
<a href="./review.html">review</a>
<a href="./contact.html">contact</a>
<a href="./blog.html">blog</a>
</nav>
Website Images:-
Made By :-
Shubham Prakash

You might also like