-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
255 lines (239 loc) · 13.8 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!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">
<title>Sparkle Production House</title>
<!-- google font link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400&display=swap"
rel="stylesheet">
<!-- tailwind links -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
yellow: "#FECC02",
offBlack: "#131313",
darkGray: "#4E4E4E",
},
fontFamily: {
bebas: ["Bebas Neue", "cursive"],
montserrat: ["Montserrat", "sans-serif"],
},
},
},
};
</script>
</head>
<body>
<!-- navbar start -->
<header class="w-full h-20 flex justify-center absolute bg-white">
<nav class="w-4/5 flex justify-between items-center font-bebas">
<h1 class="text-3xl uppercase">Sparkle Production House</h1>
<ul class="md:flex gap-x-5 text-xl hidden">
<a href="#about">
<li class="cursor-pointer">About Us</li>
</a>
<a href="#movies">
<li class="cursor-pointer">Our Movies</li>
</a>
<a href="#services">
<li class="cursor-pointer">Services</li>
</a>
</ul>
</nav>
</header>
<main>
<!-- banner part start -->
<section class="h-screen flex items-center bg-cover bg-[url('./images/banner.jpg')]">
<div class="mx-20 font-bebas text-white w-full md:w-2/4 lg:mt-0 mt-10">
<p>Movie production studio</p>
<h1 class="text-5xl lg:text-7xl">Films MAde to</h1>
<h1 class="text-5xl lg:text-7xl text-yellow">Perfection</h1>
<p class="font-montserrat mt-2 lg:mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
tellus,
luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<button
class="border-2 px-5 py-2 text-xl mt-10 hover:bg-yellow hover:text-black hover:border-yellow transition-all">Discover
More</button>
</div>
</section>
<!-- about us part start -->
<section id="about" class="p-10 md:p-20">
<div class="border-2 border-offBlack p-10">
<div class="lg:flex gap-x-10">
<div
class="w-full lg:w-2/4 h-[300px] md:h-[500px] bg-cover bg-center bg-[url('./images/camera-man.jpg')] flex justify-center items-end mb-10">
<h1
class="font-bebas text-xl md:text-4xl text-offBlack bg-white w-11/12 text-center drop-shadow-2xl rounded-md py-2 -mb-6">
23 YEARS of
EXPERIENCE</h1>
</div>
<div class="w-full lg:w-2/4 h-full font-bebas">
<p>ABOUT US</p>
<h1 class="text-5xl md:text-7xl mt-5">Filming Experience</h1>
<h1 class="text-5xl md:text-7xl">Just Got better</h1>
<p class="font-montserrat mt-10">Primis lobortis adipiscing imperdiet dis ultricies. Id commodo
interdum fermentum pede
dictumst ipsum. Erat sapien phasellus suspendisse natoque nulla leo ornare mi. Pretium
rhoncus venenatis ante dignissim aliquet faucibus tempus etiam feugiat.</p>
<button
class="border-2 border-black px-5 py-2 text-xl mt-10 hover:bg-yellow hover:text-black hover:border-yellow transition-all font-bebas">Discover
More</button>
</div>
</div>
<div class="grid lg:grid-cols-3 gap-x-20 mt-10">
<div class="border-t-4 border-offBlack w-full lg:mb-0 mb-20">
<h1 class="font-bebas text-3xl md:text-5xl mt-5">OUR VISIOn</h1>
<p class="font-montserrat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
tellus, luctus nec
ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="border-t-4 border-offBlack w-full lg:mb-0 mb-20">
<h1 class="font-bebas text-3xl md:text-5xl mt-5">OUR Mission</h1>
<p class="font-montserrat">Malesuada tempus et habitant nascetur porta nec. Fusce consequat
risus per sollicitudin hendrerit suscipit convallis sociosqu.
</p>
</div>
<div class="border-t-4 border-offBlack w-full lg:mb-0 mb-10">
<h1 class="font-bebas text-3xl md:text-5xl mt-5">OUR Motto</h1>
<p class="font-montserrat">“We don’t make movies to make money, we make money to make more
movies.”</p>
</div>
</div>
</div>
</section>
<!-- our movies part start-->
<section id="movies" class="bg-darkGray h-full w-full p-10 md:p-20">
<div class="font-bebas text-white">
<p>OUR MOVIES</p>
<div class="md:flex justify-between items-center">
<h1 class="text-5xl md:text-7xl">Movie collection</h1>
<button
class="border-2 font-bebas px-5 py-2 text-xl hover:bg-yellow hover:text-black hover:border-yellow transition-all text-white">See
More Movies</button>
</div>
</div>
<div class="mt-10 grid md:grid-cols-2 lg:grid-cols-4 gap-10">
<div class="border-2 border-white w-full h-[280px] md:h-[500px] lg:h-[350px] p-5">
<div
class="w-full h-full bg-cover bg-center flex justify-center items-center bg-[url('./images/tenet.jpg')] group relative cursor-pointer">
<div
class="h-full w-full bg-black opacity-75 hidden group-hover:block absolute top-0 bottom-0 left-0 right-0 z-0">
</div>
<h1 class="font-bebas text-white text-3xl group-hover:block hidden z-10">Tenet</h1>
</div>
</div>
<div class="border-2 border-white w-full h-[280px] md:h-[500px] lg:h-[350px] p-5">
<div
class="w-full h-full bg-cover bg-center flex justify-center items-center bg-[url('./images/interstellar.jpg')] group relative cursor-pointer">
<div
class="h-full w-full bg-black opacity-75 hidden group-hover:block absolute top-0 bottom-0 left-0 right-0 z-0">
</div>
<h1 class="font-bebas text-white text-3xl group-hover:block hidden z-10">Interstellar</h1>
</div>
</div>
<div class="border-2 border-white w-full h-[280px] md:h-[500px] lg:h-[350px] p-5">
<div
class="w-full h-full bg-cover bg-center flex justify-center items-center bg-[url('./images/inception.jpg')] group relative cursor-pointer">
<div
class="h-full w-full bg-black opacity-75 hidden group-hover:block absolute top-0 bottom-0 left-0 right-0 z-0">
</div>
<h1 class="font-bebas text-white text-3xl group-hover:block hidden z-10">Inception</h1>
</div>
</div>
<div class="border-2 border-white w-full h-[280px] md:h-[500px] lg:h-[350px] p-5">
<div
class="w-full h-full bg-cover bg-center flex justify-center items-center bg-[url('./images/fractured.jpg')] group relative cursor-pointer">
<div
class="h-full w-full bg-black opacity-75 hidden group-hover:block absolute top-0 bottom-0 left-0 right-0 z-0">
</div>
<h1 class="font-bebas text-white text-3xl group-hover:block hidden z-10">Fractured</h1>
</div>
</div>
</div>
</section>
<!-- our services part start -->
<section id="services" class="h-full w-full p-10 md:p-20">
<div class="font-bebas">
<p class="text-center">Our Services</p>
<h1 class="text-5xl md:text-7xl uppercase text-center">what we offer</h1>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10 mt-10">
<!-- row one -->
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/camera.png" alt="">
<h1 class="uppercase mt-3 text-xl">movies director</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/3d-glasss.png" alt="">
<h1 class="uppercase mt-3 text-xl">3D MOVIES</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/director-chair.png" alt="">
<h1 class="uppercase mt-3 text-xl">Film maker</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/film.png" alt="">
<h1 class="uppercase mt-3 text-xl">Studio Production</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<!-- row two -->
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/theater.png" alt="">
<h1 class="uppercase mt-3 text-xl">Drama Movies</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/rim.png" alt="">
<h1 class="uppercase mt-3 text-xl">Rolling Production</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/cut-board.png" alt="">
<h1 class="uppercase mt-3 text-xl">Movie Production</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
<div class="border-2 border-black text-center flex flex-col justify-center items-center p-5">
<img class="w-2/6 h-3/6" src="images/icons/count-down.png" alt="">
<h1 class="uppercase mt-3 text-xl">actor action</h1>
<p class="font-montserrat mt-3">Ex quam platea aliquet viverra si dictumst lobortis quis aliquam
dis
eget. </p>
</div>
</div>
</div>
</section>
</main>
<!-- footer start -->
<footer class="font-bebas flex flex-col justify-center items-center bg-offBlack text-white h-60">
<h1 class="text-3xl lg:text-5xl mb-2">Sparkle Production House</h1>
<h1 class="text-xl uppercase">next level experience</h1>
<p class="font-montserrat my-5 text-xs text-center">Feugiat nibh litora semper proin nullam facilisi
volutpat ex ullamcorper.</p>
<p class="font-montserrat mt-5 text-xs">Copyright © 2022 Sparkle Production, All rights reserved.
</p>
</footer>
</body>
</html>