forked from halitbatur/movie-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (199 loc) · 12.1 KB
/
index.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Movies Project</title>
</head>
<body>
<nav class="p-3 bg-gray-50 rounded border-gray-200 dark:bg-gray-800 dark:border-gray-700 sticky z-50 top-0">
<div class=" flex flex-wrap justify-between items-center mx-auto">
<a href="#" class="flex items-center">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="text" id="simple-search"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search" required="">
</div>
<button type="submit"
class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="sr-only">Search</span>
</button>
</form>
</a>
<button data-collapse-toggle="navbar-solid-bg" type="button"
class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500"
aria-controls="navbar-solid-bg" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-solid-bg">
<ul
class="flex flex-col mt-4 bg-gray-50 rounded-lg md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
<li>
<a href="#" onclick="onHomeClick(event)"
class=" block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent"
aria-current="page">Home</a>
</li>
<li>
<button id="drop1" data-dropdown-toggle="dropdown1"
class="text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-800"
type="button">Movies <svg class="ml-2 w-4 h-4" aria-hidden="true" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg></button>
<!-- Dropdown menu -->
<div id="dropdown1"
class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom"
style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 396px, 0px);">
<ul class=" genreDropDown py-1 text-sm text-black" aria-labelledby="drop1">
</ul>
</div>
</li>
<li>
<a href="#"
class="actorsList block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Actor
List</a>
</li>
<button id="drop2" data-dropdown-toggle="dropdown2"
class="text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-800"
type="button">Filter <svg class="ml-2 w-4 h-4" aria-hidden="true" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg></button>
<!-- Dropdown menu -->
<div id="dropdown2"
class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom"
style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 396px, 0px);">
<ul class="py-1 text-sm" aria-labelledby="drop2">
<li>
<a href="#" onclick="onFilterClick(event)"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Now playing</a>
</li>
<li>
<a href="#" onclick="onFilterClick(event)"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Popular</a>
</li>
<li>
<a href="#" onclick="onFilterClick(event)"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Top rated</a>
</li>
<li>
<a href="#" onclick="onFilterClick(event)"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Upcoming</a>
</li>
</ul>
</div>
<li>
<a href="#" onclick="onAboutClick(event)"
class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="sliderContainer">
<div class="slider-wrapper">
<div class="slider">
</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
<a href="#slide-5"></a>
</div>
</div>
</section>
<div
class="container pb-8 dark:bg-slate-800 h-full w-full grid lg:grid-cols-3 lg:gap-y-[20px] lg:grid-rows-4 gap-y-4 lg:gap-x-4 sm:grid-cols-2 sm:gap-x-4 min-h-screen ">
</div>
<footer class="bg-gray-100 text-center lg:text-left bg-gradient-to-b from-gray-900 to-gray-600 bg-gradient-to-r">
<div class="container p-6">
<div class="grid lg:grid-cols-3 md:grid-cols-2">
<div class="mb-6">
<h5 class="uppercase font-bold mb-2.5 text-white">Mhamad Marshal</h5>
<ul class="list-none mb-0">
<li>
<a href="#!" class="text-white">GitHub</a>
</li>
<li>
<a href="#!" class="text-white">LinkedIn</a>
</li>
<li>
<a href="#!" class="text-white">Instagram</a>
</li>
<li>
<a href="#!" class="text-white">FaceBook</a>
</li>
</ul>
</div>
<div class="mb-6">
<h5 class="uppercase font-bold mb-2.5 text-white">Banel Mikhael</h5>
<ul class="list-none mb-0">
<li>
<a href="#!" class="text-white">GitHub</a>
</li>
<li>
<a href="#!" class="text-white">LinkedIn</a>
</li>
<li>
<a href="#!" class="text-white">Instagram</a>
</li>
<li>
<a href="#!" class="text-white">FaceBook</a>
</li>
</ul>
</div>
<div class="mb-6">
<h5 class="uppercase font-bold mb-2.5 text-white">Riham Zaidan</h5>
<ul class="list-none mb-0">
<li>
<a href="#!" class="text-white">GitHub</a>
</li>
<li>
<a href="#!" class="text-white">LinkedIn</a>
</li>
<li>
<a href="#!" class="text-white">Instagram</a>
</li>
<li>
<a href="#!" class="text-white">FaceBook</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>