Code360-Restaurant-Task/index.html at main · rajgupta2/Code360-Restaurant-Task · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- ... -->
  <!-- Ensure to include Bootstrap CSS as it's checked in the test cases -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    crossorigin="anonymous">
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <!-- ... -->
  <style>
    img {
      width: 100%;
      height: 25vh;
      object-fit: cover;
    }
  </style>
  <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a href="/" class="nav-link">My Restaurant</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <input id="search-input" class="form-control"
          style="max-width:35%;margin-left: 10vw;" type="search" placeholder="Search"
          aria-label="Search">
        <ul class="navbar-nav" style="padding-left: 10vw;">
          <li class="nav-item">
            <a class="nav-link" id="ALL">ALL</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Starters">Starters</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" id="Mains"> Mains</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Desserts">Desserts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Beverages">Beverages</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row mt-5 mb-5" style="height:50vh;">
      <video autoplay loop
        src="https://files.codingninjas.in/restaurant-1706081051.mp4"
        style="width:100%;height:100%;object-fit: cover;"></video>
    </div>

  <!-- Menu items -->
  <!-- Items will be inserted here by JavaScript -->
    <div class="row" id="MenuList">

    </div>

  </div>
  <!-- ... (any other required content) -->
</body>
<script src="./app.js"></script>
</html>