Scribd Logo
Upload

Welcome to Scribd!

  • Report On Multi-Page Responsive Website

    Uploaded by

    Shubham Prakash
    19 views8 pages

    Original Title

    Report on multi-page responsive website

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views8 pages

    Report On Multi-Page Responsive Website

    Uploaded by

    Shubham Prakash

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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