genre,index&info page

kitks · May 7, 2021 · fc87df9 · fc87df9
1 parent 5c96c7d
commit fc87df9
Show file tree

Hide file tree

Showing 12 changed files with 658 additions and 26 deletions.
diff --git a/css/search.css b/css/search.css
diff --git a/css/search.css.map b/css/search.css.map
diff --git a/css/search.scss b/css/search.scss
@@ -0,0 +1,11 @@
+.row.searchResult {
+    overflow: auto;
+    height: 100%;
+
+    ul {
+        margin-top: 50px;
+        white-space: normal;
+        list-style: none;
+        // display: inline-block;
+    }
+}
diff --git a/genre.html b/genre.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Cinema Online</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" >Cinema Online</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">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
+                    </li>
+                    <!-- <li class="nav-item">
+                        <a class="nav-link" href="#">Link</a>
+                    </li> -->
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            Genre
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <!-- <li><a class="dropdown-item action" href="#">Action</a></li>
+                            <li><a class="dropdown-item" href="#">Animation</a></li>
+                            <li><a class="dropdown-item" href="#">Comedy</a></li>
+                            <li><a class="dropdown-item" href="#">Drama</a></li>
+                            <li><a class="dropdown-item" href="#">Sci-Fi</a></li>
+                            <li><a class="dropdown-item" href="#">Thriller</a></li> -->
+                        </ul>
+                    </li>
+                </ul>
+                <form class="d-flex">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
+                </form>
+            </div>
+        </div>
+    </nav>
+
+    <div class="row nowPlaying">
+        <div class="catagoryBanner"><h4>Now Playing</h4></div>
+        <ul>
+            <!-- li section -->
+            <!-- <li class="nowPlayingMovie" id="14,28,12,878,53" style=""><a href="./info.html?fruit=apple">
+                <img src="https://image.tmdb.org/t/p/w200/xGuOF1T3WmPsAcQEQJfnG7Ud9f8.jpg">
+                <p>Mortal Kombat14,28,12,878,53</p>
+            </a>
+            </li> -->
+        </ul>
+    </div>
+    <div class="row upcoming">
+        <div class="catagoryBanner"><h4>Opening This Week</h4></div>
+        <ul>
+            <!-- li section -->
+        </ul>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+
+    <script src="./js/genre.js"></script>
+
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
-            <a class="navbar-brand" >Cinema Online</a>
+            <a class="navbar-brand">Cinema Online</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">
@@ -42,37 +42,44 @@
                 </ul>
                 <form class="d-flex">
                     <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                    <button class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
+                    <a href="./search.html"><button href="./search.html" class="btn btn-outline-success my-2 my-sm-0"
+                            type="button">Search</button>
+                    </a>
                 </form>
             </div>
         </div>
     </nav>
-
-    <div class="row nowPlaying">
-        <div class="catagoryBanner"><h4>Now Playing</h4></div>
-        <ul>
-            <!-- li section -->
-            <!-- <li class="nowPlayingMovie" id="14,28,12,878,53" style=""><a href="./info.html?fruit=apple">
+    <div class="contentWrap">
+        <div class="row nowPlaying">
+            <div class="catagoryBanner">
+                <h4>Now Playing</h4>
+            </div>
+            <ul>
+                <!-- li section -->
+                <!-- <li class="nowPlayingMovie" id="14,28,12,878,53" style=""><a href="./info.html?fruit=apple">
                 <img src="https://image.tmdb.org/t/p/w200/xGuOF1T3WmPsAcQEQJfnG7Ud9f8.jpg">
                 <p>Mortal Kombat14,28,12,878,53</p>
             </a>
             </li> -->
-        </ul>
-    </div>
-    <div class="row upcoming">
-        <div class="catagoryBanner"><h4>Opening This Week</h4></div>
-        <ul>
-            <!-- li section -->
-        </ul>
+            </ul>
+        </div>
+        <div class="row upcoming">
+            <div class="catagoryBanner">
+                <h4>Opening This Week</h4>
+            </div>
+            <ul>
+                <!-- li section -->
+            </ul>
+        </div>
     </div>
 
 
-
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
         crossorigin="anonymous"></script>
 
     <script src="./js/index.js"></script>
+    <!-- <script src="./js/nav.js"></script> -->
 </body>
 
 </html>
diff --git a/info.html b/info.html
@@ -97,7 +97,7 @@ <h6>Cast overview</h6>
         integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
         crossorigin="anonymous"></script>
     <script src="./js/info.js"></script>
-
+    <script src="./js/nav.js"></script>
 </body>
 
 </html>