Skip to content

Commit

Permalink
new style added
Browse files Browse the repository at this point in the history
  • Loading branch information
@RamakrushnaBiswal
RamakrushnaBiswal committed Dec 14, 2024
1 parent db93e40 commit 11f6166
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 154 deletions.
209 changes: 102 additions & 107 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,86 +18,92 @@
<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>
<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="/review.html" class="underline text-2xl">Review</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-2 p-10">
</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">
<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 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>
</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;">
NEW SHOWS
<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;">
NEW SHOWS
</legend>
</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>
<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">
<img src="./assets/t1.png" alt="" class="p-10">
Expand Down Expand Up @@ -133,33 +139,34 @@ <h1>11:00 AM</h1>
<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>
<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">Post Producers</h2>
<i>Robert Jones</i>
<i>William Harris</i>
<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>
</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>
<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>
Expand All @@ -173,32 +180,20 @@ <h1 class="text-center text-5xl sm:text-6xl md:text-8xl font-ashington text-p1 m
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"
/>
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>
</section>

<a href="/" class="flex justify-center underline underline-offset-2 mt-10 text-2xl text-p3">Go to International Site</a>
<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">
Expand All @@ -217,7 +212,7 @@ <h1 class="text-center text-5xl sm:text-6xl md:text-8xl font-ashington text-p1 m
<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 &copy; 2023 Cartoon Network International</i>
</body>

Expand Down
47 changes: 0 additions & 47 deletions review.html
View file

This file was deleted.

0 comments on commit 11f6166

Please sign in to comment.