-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (222 loc) · 10.2 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
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BDflix-Enjoy Your Movie</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dist/output.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="bg-dark text-white mx-10 md:mx-14">
<!-- Nav Bar -->
<div class="flex items-center justify-between ">
<div>
<img class="w-44" src="/assets/image-removebg-preview (2).png" alt="">
</div>
<div>
<button class="bg-dark2 px-3 py-2 rounded-lg text-xl hover:bg-red-800">
Sign Up
</button>
</div>
</div>
<!-- Hero Section -->
<!-- style="background-image: url(/assets/primary.jpg);" -->
<section>
<div class="w-full h-96 rounded-md bg-no-repeat bg-cover tp"
>
<div class="flex flex-col items-center gap-4 md:gap-7">
<div></div>
<div>
<p class="text-4xl text-white font-black text-center ">Unlimited movies, TV shows, and more</p>
</div>
<div>
<p class="text-2xl font-medium text-white text-center md:font-semibold">Plans now start at Tk 500 BDT/month</p>
</div>
<div>
<p class="text-2xl font-medium text-white text-center md:font-semibold">Ready to watch? Enter your email to create or restart your membership.</p>
</div>
<div class=" flex flex-col align-middle justify-center gap-2 md:flex md:flex-row md:justify-center">
<input type="text" class="rounded-lg w-72 px-3 py-3 text-black" placeholder="Email address">
<button class="bg-dark2 px-3 py-2 rounded-lg text-xl w-32 ml-20 md:ml-0 hover:bg-red-800 ">
Get Started
</button>
</div>
</div>
</div>
</section>
<!-- Animation Section -->
<hr class="mt-10 border-gray-600 border-2">
<!-- animation--1 -->
<section class="mt-16 mx-24 md:flex justify-between items-center gap-12">
<div data-aos="zoom-in" class="mb-10">
<h1 class="text-4xl font-bold">Enjoy on your TV</h1>
<p class="mt-1 text-xl">
Watch on Smart TVs, Playstation, Xbox,<br> Chromecast, Apple TV, Blu-ray players, and more.
</p>
</div>
<div data-aos="zoom-in">
<img class="w-96 rounded-lg hover:opacity-70" src="/assets/MONEY-HEIST-SEASON-5.png" alt="">
</div>
</section>
<hr class="mt-10 border-gray-600 border-2 ">
<!-- animation--2 -->
<section class="mt-10 mx-24 md:flex justify-between items-center md:flex-row-reverse gap-12">
<div data-aos="fade-up"
data-aos-duration="3000" class="mb-10">
<h1 class="text-4xl font-bold">Download your shows</h1>
<p class="mt-1 text-xl">
Save your favorites easily and always <br> have something to watch.
</p>
</div>
<div>
<img data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1500" class="w-96 rounded-lg hover:opacity-70" src="/assets/alice in the borderland.jpg" alt="">
</div>
</section>
<hr class="mt-10 border-gray-600 border-2">
<!-- animation--3 -->
<section data-aos="flip-left"
data-aos-easing="ease-out-cubic"
data-aos-duration="2000" class="mt-10 text-center">
<h1 class="text-4xl font-bold">Watch everywhere</h1>
<p class="mt-1 text-xl">
Stream unlimited movies and TV <br> shows on your phone, tablet, laptop, <br> and TV.
</p>
</section>
<hr class="mt-10 border-gray-600 border-2">
<!-- animation--4 -->
<section class="mt-16 mx-24 md:flex justify-between items-center gap-12">
<div data-aos="fade-down-right" class="mb-10">
<h1 class="text-4xl font-bold">Creats Profile for Kids</h1>
<p class="mt-1 text-xl">
Send kids on adventures with their favorite <br> characters in a space made just for them—free <br> with your membership.
</p>
</div>
<div data-aos="fade-down-left">
<img class="w-96 rounded-lg hover:opacity-70" src="/assets/kids.png" alt="">
</div>
</section>
<hr class="mt-10 border-gray-600 border-2">
<!-- Answering QN Section -->
<section class="mt-10 mb-10">
<div >
<p class="text-center font-black text-4xl">Frequently Asked Questions</p>
</div>
<div class="cursor-pointer ">
<div class="flex mx-28 p-5 bg-form_color justify-between mt-5 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl ">
What is BDflix?
</p>
<button>
<span class="material-symbols-outlined align-middle size ">
add
</span>
</button>
</div>
<div class="flex mx-28 p-5 bg-form_color justify-between mt-2 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl">
How much does BDflix cost?
</p>
<button>
<span class="material-symbols-outlined align-middle size">
add
</span>
</button>
</div>
<div class="flex mx-28 p-5 bg-form_color justify-between mt-2 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl">
Where can I watch?
</p>
<button>
<span class="material-symbols-outlined align-middle size">
add
</span>
</button>
</div>
<div class="flex mx-28 p-5 bg-form_color justify-between mt-2 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl">
How do I cancel?
</p>
<button>
<span class="material-symbols-outlined align-middle size">
add
</span>
</button>
</div>
<div class="flex mx-28 p-5 bg-form_color justify-between mt-2 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl">
What can I watch on BDflix?
</p>
<button>
<span class="material-symbols-outlined align-middle size">
add
</span>
</button>
</div>
<div class="flex mx-28 p-5 bg-form_color justify-between mt-2 rounded-sm hover:bg-form_color_hover">
<p class="font-normal text-3xl">
Is BDflix is good for kids?
</p>
<button>
<span class="material-symbols-outlined align-middle size">
add
</span>
</button>
</div>
</div>
</section>
<div class="flex justify-center">
<button class="bg-dark2 px-4 py-3 rounded-lg text-2xl w-56 ml-20 md:ml-0 hover:bg-red-800">
Get Started
</button>
</div>
<hr class="mt-10 border-gray-600 border-2">
<!-- Footer -->
<section class="mt-10 mx-28 text-footer">
<div>
<a href="#" class="">Questions? Contact us.</a>
</div>
<div class="md:flex items-center justify-between mt-8">
<div>
<a href="#">FAQ</a><br>
<a href="#">Media Center</a><br>
<a href="#">Ways to Watch</a><br>
<a href="#">Cookie Preferences</a><br>
<a href="#">Speed Test</a><br>
</div>
<div>
<a href="#">Help Center</a><br>
<a href="#">Investor Relations</a><br>
<a href="#">Terms of Use</a><br>
<a href="#">Corporate Information</a><br>
<a href="#">Legal Notices</a><br>
</div>
<div>
<a href="#">Account</a>
<a href="#">Jobs</a><br>
<a href="#">Privacy</a><br>
<a href="#">Contact Us</a><br>
<a href="#">Only on Netflix</a><br>
</div>
</div>
<section class="mt-5 mb-10 bg-form_color w-32 py-1 px-2 rounded-md text-md">
<span class="material-symbols-outlined align-middle bg-form_color text-white">
language
</span>
<select name="language" id="" class="bg-form_color text-white">
<option value="english">English</option>
<option value="bangla">Bangla</option>
<option value="hindi">Hindi</option>
</select>
</section>
<h3>BDflix Bangladesh</h3>
</section>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>