generated from 202303-PRM-TR-FEW/-movies-project
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
117 lines (99 loc) · 5.31 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>I Like To Movie Movie</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="./media/camera.png" type="image/x-icon">
</head>
<body class="bg-black text-yellow-300">
<!-- Navbar Start -->
<div class="bg-light-black">
<div id="navbar"
class="container mx-auto flex items-center justify-between text-yellow-300 h-36 px-5 text-2xl tracking-wide">
<div id="logo">
<a href="index.html"><img src="./Logo--.svg" alt="" class="w-36"></a>
</div>
<nav class="hidden space-x-2 md:block">
<a href="index.html" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Home</a>
<a href="#" class="actorsPage hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Actors</a>
<a href="#" class="aboutButton hover:bg-yellow-300 hover:text-black rounded-md p-1.5">About</a>
<a href="#" class="genre-menu hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Genre <i
class="fa-solid fa-caret-down genre-caret"></i></a>
<a href="#" class="filter-menu hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Filter
<i class="fa-solid fa-caret-down filter-caret"></i>
</a>
<input type="text" placeholder="Search"
class=" input search ps-2 rounded-md outline-0 bg-yellow-300 text-black py-1 placeholder-black">
</nav>
<div id="toggle" class=" block hamburger cursor-pointer md:hidden text-white">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
<!-- hamburger menu -->
<div class="bg-black">
<nav id="ham-nav"
class="container mx-auto hidden text-yellow-300 bg-black w-full flex flex-col gap-3 py-3 items-center justify-center md:hidden text-2xl tracking-wide">
<a href="index.html" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Home</a>
<a href="#" class="actorsPage hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Actors</a>
<a href="#" class="aboutButton hover:bg-yellow-300 hover:text-black rounded-md p-1.5">About</a>
<a href="#" class="genre-menu hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Genre
<i class="fa-solid fa-caret-down genre-caret"></i>
</a>
<a href="#" class="filter-menu hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Filter
<i class="fa-solid fa-caret-down filter-caret"></i>
</a>
<input type="text" placeholder="Search"
class="input mb-3 ps-2 rounded-md outline-0 bg-yellow-300 text-black py-1 placeholder-black">
</nav>
</div>
<div class="bg-black">
<div id="genre-dropdown"
class="container mx-auto border-t-4 border-yellow-300 hidden grid grid-cols-2 md:grid-cols-4 place-items-center text-yellow-300 bg-black w-full gap-y-1 py-3 text-2xl tracking-wide dropdown-div">
</div>
</div>
<div class="bg-black">
<div id="filter-dropdown"
class="container mx-auto border-t-4 border-yellow-300 hidden grid grid-cols-2 md:grid-cols-4 place-items-center text-yellow-300 bg-black w-full gap-y-1 py-3 text-2xl tracking-wide dropdown-div">
<a href="#" data-filter="now_playing" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Now
Playing</a>
<a href="#" data-filter="upcoming" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Upcoming</a>
<a href="#" data-filter="popular" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Popular</a>
<a href="#" data-filter="top_rated" class="hover:bg-yellow-300 hover:text-black rounded-md p-1.5">Top Rated</a>
</div>
</div>
<!-- Navbar End -->
<div></div>
<div
class="movie-container container flex flex-wrap justify-center items-center gap-8 mx-auto py-6 text-center tracking-wide px-2">
</div>
<footer class="bg-black py-5 pt-10 sticky top-[100vh]">
<div class="container mx-auto h-48 flex flex-col items-center justify-center tracking-wide">
<h4 class="font-mono pb-2 txt-yellow">With ♥ from</h4>
<div class="flex space-x-4 ">
<a target="_blank" href="https://github.com/BerkayBideci">
<img class="imgfooter transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
src="media/Berkay Bideci.jpeg" alt="">
</a>
<a target="_blank" href="https://github.com/medetcandiler">
<img class="imgfooter transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
src="media/Medetcan Diler.jpeg" alt="">
</a>
<a target="_blank" href="https://github.com/aybikeustun">
<img class="imgfooter transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
src="media/Sumeyra Aybike Ustun.JPG" alt="">
</a>
</div>
</div>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>