Fine tuned some names and stuff

arundada9000 · Aug 22, 2024 · b3d550b · b3d550b
1 parent 231fd4c
commit b3d550b
Show file tree

Hide file tree

Showing 2 changed files with 269 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -4,25 +4,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BMCIT Club</title>
+    <title>BMC IT Club</title>
     <link rel="icon" href="./images/bmc-it-club-circle-logo.png" type="image/x-icon">
     <style>
+        /* General reset for consistent styling */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
+        /* Body styling to center content */
         body {
-            height: 100svh;
+            height: 100vh;
             width: 100vw;
             display: flex;
             align-items: center;
             justify-content: center;
             overflow: hidden;
+            background-color: #fff;
         }
 
-        .circle-outer {
+        /* Circle animations */
+        .circle-outer,
+        .circle-inner {
             stroke-dasharray: 471.24;
             stroke-dashoffset: 471.24;
             animation: draw-circle 1s ease-out forwards;
@@ -31,7 +36,6 @@
         .circle-inner {
             stroke-dasharray: 314.16;
             stroke-dashoffset: -314.16;
-            animation: draw-circle 1s ease-out forwards;
         }
 
         @keyframes draw-circle {
@@ -40,6 +44,7 @@
             }
         }
 
+        /* Preloader rotation animation */
         .preloader {
             position: relative;
             animation: rotate-div 6s ease-out forwards;
@@ -59,6 +64,7 @@
             }
         }
 
+        /* Ribbon animations */
         .ribbon-left,
         .ribbon-right {
             position: absolute;
@@ -74,14 +80,12 @@
 
         .ribbon-right {
             right: -100vw;
-            /* Start off-screen on the right */
             animation: moveInFromRight 2s ease-out forwards, showText 0.5s ease-in 2s forwards;
         }
 
         @keyframes moveInFromLeft {
             to {
                 left: 75px;
-                /* Move to the center */
                 opacity: 1;
                 transform: translate(-100%, -50%);
             }
@@ -90,7 +94,6 @@
         @keyframes moveInFromRight {
             to {
                 right: 75px;
-                /* Move to the center */
                 opacity: 1;
                 transform: translate(100%, -50%);
             }
@@ -102,36 +105,30 @@
             }
         }
 
-        /* Initially hide the text */
-        .ribbon-left text,
-        .ribbon-right text {
-            opacity: 0;
-        }
-
-        /* Show the text after animation */
-        .ribbon-left text,
-        .ribbon-right text {
-            animation: showText 0.5s ease-in 2.5s forwards;
-        }
-
+        /* Text styling */
         .text {
             font-size: 1.35rem;
             fill: black;
             font-weight: bold;
+            font-family: Arial, Helvetica, sans-serif;
             opacity: 0;
-            font-family: Arial Helvetica, sans-serif;
             animation: showText 0.5s ease-in 2.5s forwards;
         }
 
-        #curve {
-            fill: transparent;
-        }
-
+        /* Adjusted font-size for 'igniting' text */
         .igniting .text {
             font-size: 0.65rem;
             font-weight: bold;
         }
 
+        /* Image animation with fadeIn and spin */
+        .animated-image {
+            animation: fadeIn 1s ease-in forwards, spin 2s linear 1s forwards;
+            animation-delay: 2s;
+            opacity: 0;
+            transform-origin: 50% 50%;
+        }
+
         @keyframes fadeIn {
             from {
                 opacity: 0;
@@ -152,13 +149,7 @@
             }
         }
 
-        .animated-image {
-            animation: fadeIn 1s ease-in forwards, spin 2s linear 1s forwards;
-            animation-delay: 2s, 2s;
-            opacity: 0;
-            transform-origin: 50% 50%;
-        }
-
+        /* Hide main content initially */
         .main-content {
             display: none;
         }
@@ -170,15 +161,14 @@
 </head>
 
 <body>
-    <!-- <img src="./images/bmcitclub_logo.jpg" alt="bmcitclub_logo" width="300px"> -->
     <div class="preloader">
         <svg width="80" height="40" xmlns="http://www.w3.org/2000/svg" class="ribbon-left">
             <!-- Left Ribbon -->
             <polygon points="0,0 60,0 60,32 0,32 16,16" fill="#0049af" />
             <text x="20" y="20" fill="white" font-family="Arial" font-size="14" font-weight="bold">Estd</text>
         </svg>
-        <svg width="200" height="200">
 
+        <svg width="200" height="200">
             <defs>
                 <clipPath id="inner-circle-clip">
                     <circle cx="100" cy="100" r="50" />
@@ -190,38 +180,37 @@
             <!-- Inner Circle -->
             <circle cx="100" cy="100" r="50" fill="none" stroke="#0649ab" stroke-width="3" class="circle-inner" />
 
-            <!-- Image clipped to the innermost circle -->
+            <!-- Clipped Image -->
             <image href="./images/inside-people.png" x="50" y="50" width="100" height="100" class="animated-image"
                 clip-path="url(#inner-circle-clip)" />
 
-            <!-- igniting the nation -->
+            <!-- BMC IT Club text curve -->
             <svg width="200" height="200" class="bmc-text">
                 <path id="curve" d="M 45 100 A 50 50 0 0 1 155 100" fill="transparent" />
                 <text class="text" text-anchor="middle">
                     <textPath class="text__path" xlink:href="#curve" startOffset="50%">BMC IT Club</textPath>
                 </text>
             </svg>
 
+            <!-- Igniting technological excellence curve -->
             <svg width="200" height="200" class="igniting">
                 <path id="curved" d="M 35 100 A 50 50 0 0 0 165 100" fill="transparent" />
                 <text class="text" text-anchor="middle">
                     <textPath class="text__path" xlink:href="#curved" startOffset="50%">Igniting technological
                         excellence</textPath>
                 </text>
             </svg>
-
-
         </svg>
+
         <svg width="80" height="40" xmlns="http://www.w3.org/2000/svg" class="ribbon-right">
             <!-- Right Ribbon -->
             <polygon points="80,0 20,0 20,32 80,32 64,16" fill="#0049af" />
             <text x="28" y="20" fill="white" font-family="Arial" font-size="14" font-weight="bold">2080</text>
         </svg>
-
     </div>
 
     <div class="main-content">
-        <h1>BMC IT Club <strong>Webpage</strong> </h1>
+        <h1>BMC IT Club <strong>Webpage</strong></h1>
         <h2>Coming Soon ...</h2>
     </div>
 
@@ -234,7 +223,6 @@ <h2>Coming Soon ...</h2>
                 mainContent.style.display = "block";
             }, 6000);
         });
-
     </script>
 </body>