-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (217 loc) · 11.5 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cartoon Netwok</title>
<link rel="icon/x-icon" href="./assets/cn logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
<script src="tailwind.config.js"></script>
</head>
<body>
<div id="preloader">
<div class="grid place-items-center h-screen w-full">
<img src="./assets/3F3F.gif" alt="Preloader" class="w-1/5 h-2/5">
</div>
</div>
<div id="content" style="display: none;">
<article >
<img src="./assets/AD.png" alt=" Ad" class="w-full h-48">
</article>
<nav class="flex justify-center">
<h1 class="font-ashington text-center text-9xl pt-5 text-black">Cartoon Network</h1>
</nav>
<marquee behavior="alternate" direction="left" class="text-4xl text-p1 text-white p-3 font-bold bg-black">New Show
Every Day 9:00 AM :)</marquee>
<main class="flex w-full">
<section class="w-1/5">
<img src="./assets/cn2.png" alt="">
<div class="flex flex-col items-center gap-5 mt-10">
<a href="/" class="underline text-2xl">Home</a>
<a href="/" class="underline text-2xl">Review</a>
<a href="/" class="underline text-2xl">Contact Us</a>
<a href="/" class="underline text-2xl">Shows</a>
<a href="/" class="underline text-2xl">About Us</a>
</div>
<img src="./assets/d4.png" alt="" class="mt-10 p-10 animate-bounce">
</section>
<section class="w-full flex flex-col items-center">
<section class="flex flex-col md:flex-row w-full h-screen p-10">
<!-- <img src="./assets/cn .png" alt="cartoon Netwok logo x" class="w-1/5"> -->
<div class="w-full md:w-1/2 ">
<img src="./assets/bgleft.png" alt="cartoon Netwok logo" class="w-full h-full">
</div>
<div class="w-1/2 flex justify-end">
<div class="flex flex-col items-center w-1/2">
<img src="./assets/c1.png" alt="Image 6" class="w-full h-52 border-4 border-black">
<img src="./assets/c2.png" alt="Image 5" class="w-full h-40 border-4 border-black">
<img src="./assets/c3.png" alt="Image 7" class="w-full h-40 border-4 border-black">
<img src="./assets/c4.png" alt="Image 8" class="w-full h-40 border-4 border-black">
</div>
<div class="flex flex-col items-center ">
<h2 class="font-crang text-center text-xl md:text-5xl mt-6 text-white absolute">Watch Now :)
</h2>
<img src="./assets/meme.gif" alt="Image 1" class="w-full h-[98%] border-4 border-black">
</div>
</div>
</section>
</section>
</main>
<section class="flex flex-col md:flex md:flex-row md:justify-evenly w-full mt-20 gap-10 px-4 md:px-10">
<!-- NEW SHOWS -->
<fieldset class="flex flex-col items-center w-full md:w-1/2 border-8 border-black p-5 bg-p3">
<legend class=" text-center text-4xl sm:text-5xl font-crang text-p1"
style="text-shadow: 2px 3px 3px #000000;">
<img src="./assets/tv.png" alt="" class="w-1/4 sm:w-1/5 md:w-1/6">
<legend class="text-center text-4xl sm:text-5xl font-crang text-p1"
style="text-shadow: 2px 3px 3px #000000;">
NEW SHOWS
</legend>
</legend>
<hr class="w-full mt-5 border-2 border-p4">
<p class="text-center text-base sm:text-lg md:text-2xl mt-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet perferendis, iure commodi cum, culpa
distinctio dolor repellat dignissimos voluptates deserunt repellendus dolore sequi non quis nisi aliquid
veniam velit consectetur?
</p>
<button
class="w-1/2 sm:w-1/3 md:w-1/5 p-2 border-2 border-p1 mt-5 hover:bg-p1 hover:text-white text-sm sm:text-base md:text-lg font-bold underline">
View More
</button>
</fieldset>
<!-- POPULAR SHOWS -->
<fieldset class="flex flex-col items-center w-full md:w-1/2 border-8 border-black p-5 bg-p2">
<legend class=" text-center text-4xl sm:text-5xl font-crang text-p1"
style="text-shadow: 2px 3px 3px #000000;">
<img src="./assets/tv.png" alt="" class="w-1/4 sm:w-1/5 md:w-1/6">
<legend class="text-center text-4xl sm:text-5xl font-crang text-p1"
style="text-shadow: 2px 3px 3px #000000;">
POPULAR SHOWS
</legend>
</legend>
<hr class="w-full mt-5 border-2 border-p4">
<p class="text-center text-base sm:text-lg md:text-2xl mt-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet perferendis, iure commodi cum, culpa
distinctio dolor repellat dignissimos voluptates deserunt repellendus dolore sequi non quis nisi aliquid
veniam velit consectetur?
</p>
<button
class="w-1/2 sm:w-1/3 md:w-1/5 p-2 border-2 border-p1 mt-5 hover:bg-p1 hover:text-white text-sm sm:text-base md:text-lg font-bold underline">
View More
</button>
</fieldset>
</section>
<section class="flex justify-center ">
<img src="./assets/party.png" alt="Party pic">
</section>
<section class="flex justify-center w-full">
<div class="border-4 border-black w-1/3 p-3">
<div style="width:100%;height:0;padding-bottom:66%;position:relative;"><iframe src="https://giphy.com/embed/l41JZlDJc2wJlTjYQ" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
<div class="flex flex-col items-center text-xl md:text-4xl font-crang gap-2">
<h1>Droping on</h1>
<h1 class="font-bold text-p3 animate-bounce">Wednesday</h1>
<h1>9:00 AM</h1>
</div>
</div>
<div class="border-4 border-black w-2/3 flex p-3">
<div>
<img src="./assets/oggy2.png" alt="" class="">
</div>
<div>
<img src="./assets/oglogo.png" alt="">
</div>
<div>
<img src="./assets/ins.png" alt="">
</div>
</div>
<div class="border-4 border-black w-1/3 p-3">
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/WS0UMDayPvWI0YX0M1" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
<div class="flex flex-col items-center text-xl md:text-4xl font-crang gap-2">
<h1>Droping on</h1>
<h1 class="font-bold text-p3 animate-bounce">Friday</h1>
<h1>11:00 AM</h1>
</div>
</div>
</section>
<div class="flex justify-evenly mt-10">
<div>
<img src="./assets/review.png" alt="" class="w-full h-60">
<div class="flex justify-evenly mt-20">
<div class="flex flex-col items-center gap-2">
<h2 class="font-bold text-2xl p-3 font-crang text-p1">Our Staff</h2>
<i>Jhon Deo</i>
<i>Daniel Anderson</i>
<i>Tommy hits</i>
<i>Shane Waarde</i>
</div>
<div class="flex flex-col items-center gap-2">
<h2 class="font-bold text-2xl p-3 font-crang text-p1">Designers</h2>
<i>Michael Brown</i>
<i>Sarah Wilson</i>
</div>
<div class="flex flex-col items-center">
<div class="flex flex-col items-center gap-2">
<h2 class="font-bold text-2xl p-3 font-crang text-p1">Marketers</h2>
<i>David Smith</i>
<i>James Johnson</i>
</div>
<div class="flex flex-col items-center gap-2">
<h2 class="font-bold text-2xl p-3 font-crang text-p1">Post Producers</h2>
<i>Robert Jones</i>
<i>William Harris</i>
</div>
</div>
</div>
</div>
<fieldset class="flex flex-col w-1/3 justify-center border-8 border-black p-20 bg-p2">
<legend class="text-center text-6xl font-ashington"> <img src="./assets/p2.png" alt="">Write a Review
</legend>
<input type="text" name="" id="" class="border-2 border-black p-2 mt-5" placeholder="Enter your Name">
<input type="email" name="" id="" class="border-2 border-black p-2 mt-5" placeholder="Enter your Email">
<textarea name="" id="" class="border-2 border-black p-2 mt-5" placeholder="Enter your Message"></textarea>
<button
class="w-3/5 p-2 border-2 border-p1 mt-5 hover:bg-p1 hover:text-white text-lg font-bold underline">Submit</button>
</fieldset>
</div>
<section class="flex flex-col items-center px-4 md:px-8">
<h1 class="text-center text-5xl sm:text-6xl md:text-8xl font-ashington text-p1 mt-6">
Watch Now
</h1>
<div
class="flex flex-wrap justify-center gap-6 md:gap-10 mt-4 border-4 sm:border-8 border-black p-4 sm:p-5 bg-black">
<img src="./assets/tom.png" alt="Image 1"
class="w-32 h-32 sm:w-44 sm:h-44 md:w-52 md:h-52 contrast-200 hover:contrast-150" />
<img src="./assets/dora.png" alt="Image 2"
class="w-32 h-32 sm:w-44 sm:h-44 md:w-52 md:h-52 contrast-200 hover:contrast-150" />
<img src="./assets/oggy.png" alt="Image 3"
class="w-32 h-32 sm:w-44 sm:h-44 md:w-52 md:h-52 contrast-200 hover:contrast-150" />
<img src="./assets/d1.png" alt="Image 4"
class="w-32 h-32 sm:w-44 sm:h-44 md:w-52 md:h-52 contrast-200 hover:contrast-150" />
</div>
</section>
<a href="/" class="flex justify-center underline underline-offset-2 mt-10 text-2xl text-p3">Go to International
Site</a>
<footer class="flex flex-wrap justify-center items-center p-6 gap-10 md:gap-32">
<!-- Preferences Links -->
<div class="flex flex-col underline underline-offset-2 gap-2 text-center md:text-left">
<a href="/">Manage Preferences</a>
<a href="/">Terms of Use</a>
<a href="/">Trademarks information</a>
</div>
<!-- Policy Links -->
<div class="flex flex-col underline underline-offset-2 gap-2 text-center md:text-left">
<a href="/">Privacy Policy</a>
<a href="/">International Site</a>
<a href="/">Details of Broadcasters</a>
</div>
<!-- Logo -->
<div class="flex justify-center md:justify-start">
<a href="/"><img src="./assets/cn2.png" alt="cn logo" class="w-24 sm:w-28 md:w-32"></a>
</div>
</footer>
<i class="text-lg">copyright © 2023 Cartoon Network International</i>
</div>
<script src="script.js"></script>
</body>
</html>