Bg color changed and preloader added

RamakrushnaBiswal · Dec 15, 2024 · 06513b6 · 06513b6
1 parent 11f6166
commit 06513b6
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 6 deletions.
diff --git a/assets/3F3F.gif b/assets/3F3F.gif
diff --git a/assets/bgpic.png b/assets/bgpic.png
diff --git a/assets/oglogo.png b/assets/oglogo.png
diff --git a/assets/p2.png b/assets/p2.png
diff --git a/assets/vs.gif b/assets/vs.gif
diff --git a/index.html b/index.html
@@ -12,11 +12,17 @@
 </head>
 
 <body>
-    <article>
+    <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>
+        <h1 class="font-ashington text-center text-9xl pt-5 text-p5">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>
@@ -84,7 +90,7 @@ <h2 class="font-crang text-center text-xl md:text-5xl mt-6 text-white absolute">
                 <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
+                    POPULAR SHOWS
                 </legend>
             </legend>
             <hr class="w-full mt-5 border-2 border-p4">
@@ -118,7 +124,7 @@ <h1>9:00 AM</h1>
                 <img src="./assets/oggy2.png" alt="" class="">
             </div>
             <div>
-                <img src="./assets/vs.gif" alt="">
+                <img src="./assets/oglogo.png" alt="">
             </div>
             <div>
                 <img src="./assets/ins.png" alt="">
@@ -136,7 +142,7 @@ <h1>11:00 AM</h1>
 
     <div class="flex justify-evenly mt-10">
         <div>
-            <img src="./assets/review.png" alt="" class="w-full h-60">
+            <!-- <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>
@@ -214,6 +220,8 @@ <h1 class="text-center text-5xl sm:text-6xl md:text-8xl font-ashington text-p1 m
     </footer>
 
     <i class="text-lg">copyright &copy; 2023 Cartoon Network International</i>
+</div>
+    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,11 @@
+window.addEventListener("load", () => {
+    const preloader = document.getElementById("preloader");
+    const content = document.getElementById("content");
+    preloader.style.opacity = "0";
+    preloader.style.transition = "opacity 3s ease";
+      setTimeout(() => {
+      preloader.style.display = "none";
+      content.style.display = "block"; // Show main content
+    }, 1000);
+  });
+
diff --git a/style.css b/style.css
@@ -15,6 +15,13 @@
 
 /* color: 293774 9051A2 FA5D66 FFA1C5 FDFEEC */
 body{
-    background: #FDFEEC;
+    /* background: #FDFEEC; */
+    background: url("./assets/bgpic.png");
+    background-size:cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+
     font-family:'Times New Roman';
+    color: #FDFEEC;
 }