FilmPages/index.html at main · WebAhead12/FilmPages · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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="stylesheet" media="screen" href="style.css">
  <link rel="stylesheet" media="screen" href="mediaQ.css">

  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <title>Movies/Books</title>
</head>


<main>
  <nav class="navbar">
    <div id="logotop">
      <img class="logo" src="CSS-Stuff/logo cropped.png">
    </div>
    <div class="menu">

      <br><br>
      <input id="moviename" type="search" placeholder="Search movie name" />

      <button id="search">Search</button>
      <br><br><br>

      <div class="dropdownSort">
        <button class="dropbtn">Sort</button>
        <br><br>
        <div class="dropdown-content-sort">
          <a id="upcoming" href="#">Upcoming</a>
          <a id="Top-Low-Rating" href="#">Top-Low Rating</a>
        </div>
      </div>

      <label class="switch">
        <input type="checkbox" id="togBtn">
        <div class="slider round"></div>
      </label>
      <br><br>
    </div>

  </nav>
  <br>

</main>


<body>

  <br><br>
  <div class="popup">
    <img class="close" src="CSS-Stuff/Exit-Icon.png">
    <!-- "title" -->
    <h1 class="popup-title"></h1>
    <!-- Need to do JS for X button -->

    <!-- "poster_path" -->
    <div class="posterRating">
      <img class="image" src="CSS-Stuff/interstellar example.jpg">
      <!-- "vote_average" -->
      <p class="rating1"> </p>
    </div>
    <!-- "overview" -->
    <h3>Overview</h3>
    <p class="summary1"></p>
    <!-- "genres" -->
    <h3>Genre</h3>
    <p class="genre1"></p>
    <!-- "job":"Director"  *****Make sure to specify that only the word Director alone is searched for -->
    <h3>Director</h3>
    <p class="director1"></p>
    <!------"cast"----"order": 0-4 ------>
    <h3>Cast</h3>
    <p class="cast1"> </p>
    <!-- "release_date" -->
    <h3>Release Date</h3>
    <p class="year"></p>
    <br>
    <!-- "You need to get the "type":"Trailer" then "site":"YouTube" then "key": zSWdZVtXT7E (example key) -->
    <h3>Official Trailer</h3>
    <iframe class="trailer" width="90%" height="500" src="" title="YouTube video player" frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe></video>

  </div>
  <!-- cards that contain movies -->

  <div class="movieblock"></div>


  <!--
  Zoom Card Popup For Genres -->

  <div class="pag">


    <button class="paginate left"><i></i><i></i></button>
    <div class="counter"></div>
    <button class="paginate right"><i></i><i></i></button>

  </div>


  <div class=backtotop>
    <a href="#logotop">🔝</a>
  </div>


</body>

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

</html>