-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (103 loc) · 6.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Main Css -->
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="app_header">
<div class="relative my-6">
<input id="id-l16" type="text" name="id-l16" placeholder="Search here"
class="relative w-full h-12 px-4 pr-12 transition-all border rounded outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
<svg xmlns="http://www.w3.org/2000/svg"
class="absolute w-6 h-6 cursor-pointer top-3 right-4 stroke-slate-400 peer-disabled:cursor-not-allowed"
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"
aria-labelledby="title-9 description-9" role="graphics-symbol">
<title id="title-9">Search icon</title>
<desc id="description-9">Icon description here</desc>
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<button
class="btn inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 rounded shadow-lg focus-visible:outline-none whitespace-nowrap bg-emerald-500 shadow-emerald-200 hover:bg-emerald-600 hover:shadow-md hover:shadow-emerald-200 focus:bg-emerald-700 focus:shadow-md focus:shadow-emerald-200 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>Search Movie</span>
</button>
</div>
<div class="results">
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://wallpapers.com/images/hd/animated-superhero-movies-1024-x-580-wallpaper-z7x3vv0n5rva6hhe.jpg"
alt="card image" class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">Oculos Trailer</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://e0.pxfuel.com/wallpapers/346/317/desktop-wallpaper-the-judge-2022-movie.jpg"
alt="card image" class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">The Judge</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://assets-prd.ignimgs.com/2023/05/04/planeblogroll-1683185231216.jpg" alt="card image"
class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">Action Junkies</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://m.media-amazon.com/images/I/514BjiWp2aL._AC_UF894,1000_QL80_.jpg" alt="card image"
class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">Don't Breathe</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://www.mediacritik.com/wp-content/uploads/2022/04/The-Gray-Man-des-photos-inedites-devoilees-par-Netflix.jpg" alt="card image"
class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">Action Junkies</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
<div class=" card overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
<!-- Image -->
<figure class="relative">
<img src="https://www.tvguide.com/a/img/resize/68074424baa8bcf1c8a96e7819f23e0db2c284bb/catalog/provider/1/2/1-13638826979.jpg?auto=webp&fit=crop&height=675&width=1200" alt="card image"
class="aspect-video w-full" />
<figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
<h3 class="text-lg font-medium ">Don't Breathe</h3>
<p class="text-sm opacity-75"> By George, jun 3 2023</p>
</figcaption>
</figure>
</div>
</div>
</body>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Main Javascript -->
<script src="/main.js"></script>
</html>