Merge branch 'Rakesh9100:main' into main

Author: Piyush01-672

assets/images/text-backgrounds/image1.png

@@ -80,14 +80,14 @@ body.dark-mode .past-event-date,
 }
 
 .past-event-title {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     margin-bottom: 0.5rem;
     color: var(--primary-color);
 }
 
 .past-event-date,
 .past-event-location {
-    font-size: 1rem;
+    font-size: 0.9rem;
     color: var(--light-text-color);
     margin-bottom: 0.5rem;
 }

assets/images/text-backgrounds/image2.png

@@ -12,7 +12,7 @@
     <link rel="icon" type="image/x-icon" href="./assets/images/favicons/favicon1.png">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
     <script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
     <title>Eventica</title>
 </head>
@@ -69,7 +69,8 @@
     <!-- Main section -->
     <header id="home" class="hero">
         <div class="hero-content">
-            <h1>Discover Bangalore's Events & Meetups</h1>
+            <h1>Discover Events & Meetups</h1>
+            <div class="highlight-text">BANGALORE</div>
             <p>Explore the best vibrant events, tech conferences, and exciting happenings in the Silicon Valley of India.</p>
             <a href="#events" class="explore-button">Explore Events</a>
         </div>

assets/images/text-backgrounds/image3.png

@@ -31,8 +31,6 @@ body {
     max-width: 1200px;
     margin: 0 auto;
     width: 90%;
-    max-width: 1200px;
-    margin: 0 auto;
     padding: 0 1rem;
 }
 
@@ -142,16 +140,17 @@ body {
 }
 
 .search-button {
-    background-color: #007bff;
+    background-color: var(--primary-color);
     color: white;
     border: none;
     padding: 10px;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
 .search-button:hover {
-    background-color: #0056b3; /* Darker shade for hover effect */
+    background-color: #686969;
 }
 
 /* Theme Switcher Css */
@@ -179,7 +178,7 @@ body {
 }
 
 #theme-toggle:hover {
-    background-color: var(--secondary-color);
+    background-color: #686969;
 }
 
 #theme-toggle svg {
@@ -278,26 +277,78 @@ body {
 /* Hero Section Css */
 
 .hero {
-    background-size: cover;
-    background-position: center;
+    position: relative;
     height: 100vh;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     text-align: center;
-    color: #fff;
-    position: relative;
-    background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(231, 76, 60, 0.8));
 }
 
 .hero-content {
-    max-width: min(800px, 90%);
-    padding: 2rem;
-    background-color: rgba(0, 0, 0, 0.5);
+    max-width: 1000px;
+    width: 90%;
+    padding: 1rem;
     border-radius: 10px;
     backdrop-filter: blur(10px);
 }
 
+.highlight-text {
+    font-size: clamp(6rem, 12vw, 10rem);
+    font-weight: 800;
+    color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: 0 auto;
+    white-space: nowrap;
+    overflow: visible;
+    text-align: center;
+    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
+    line-height: 1.1;
+    animation: changeBackground 10s infinite;
+    position: relative;
+    z-index: 1;
+    padding: 0;
+    width: 100%;
+    display: block;
+}
+
+@keyframes changeBackground {
+
+    0%,
+    16.66% {
+        background-image: url('assets/images/text-backgrounds/image1.png');
+    }
+
+    16.67%,
+    33.33% {
+        background-image: url('assets/images/text-backgrounds/image2.png');
+    }
+
+    33.34%,
+    49.99% {
+        background-image: url('assets/images/text-backgrounds/image3.png');
+    }
+
+    50%,
+    66.66% {
+        background-image: url('assets/images/text-backgrounds/image4.png');
+    }
+
+    66.67%,
+    83.33% {
+        background-image: url('assets/images/text-backgrounds/image5.png');
+    }
+
+    83.34%,
+    100% {
+        background-image: url('assets/images/text-backgrounds/image6.png');
+    }
+}
+
 .hero h1 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     margin-bottom: 1rem;
@@ -306,25 +357,33 @@ body {
 
 .hero p {
     font-size: clamp(1rem, 3vw, 1.2rem);
-    max-width: 600px;
-    margin: 0 auto 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+    font-weight: 600;
+    text-shadow: none;
+    line-height: 1.3;
+    margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 .explore-button {
     display: inline-block;
-    background-color: var(--secondary-color);
     color: #fff;
     padding: 1rem 2.5rem;
+    font-weight: 600;
+    color: #fff;
+    background-color: var(--primary-color);
     border-radius: 50px;
     text-decoration: none;
-    font-weight: 600;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 1px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
 }
 
 .explore-button:hover {
-    background-color: #e67e22;
+    background-color: #686969;
     transform: translateY(-3px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
@@ -363,7 +422,6 @@ body {
 
 .events {
     padding: 6rem 0;
-    background-color: rgba(243, 238, 238, 0.616);
 }
 
 .section-title {
@@ -379,7 +437,7 @@ body {
     display: block;
     width: 50px;
     height: 3px;
-    background-color: var(--accent-color);
+    background-color: var(--primary-color);
     margin: 1rem auto 0;
 }
 
@@ -422,7 +480,7 @@ body {
 }
 
 .event-title {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     margin-bottom: 0.5rem;
     color: var(--primary-color);
 }
@@ -447,7 +505,7 @@ body {
 }
 
 .event-description {
-    font-size: 0.95rem;
+    font-size: 1rem;
     margin-bottom: 1rem;
 }
 
@@ -492,7 +550,7 @@ footer {
 /* Dark mode Css */
 
 body.dark-mode {
-    --background-color: #181818;
+    --background-color: #2c2c2c;
     --text-color: #f4f4f4;
     --light-text-color: #bbbbbb;
 }
@@ -501,10 +559,6 @@ body.dark-mode .navbar {
     background-color: rgba(24, 24, 24, 0.9);
 }
 
-body.dark-mode .footer {
-    background-color: #181818;
-}
-
 /* Dark mode toggle button Css */
 
 #dark-mode-toggle {
@@ -522,20 +576,16 @@ body.dark-mode .footer {
 }
 
 #dark-mode-toggle:hover {
-    background-color: var(--secondary-color);
+    background-color: #686969;
 }
 
 #dark-mode-toggle i {
     color: #fff;
     font-size: 20px;
 }
 
-.dark-mode .events {
-    background-color: #2a2a2a;
-}
-
 .dark-mode .navbar {
-    background-color: #2a2a2a !important; /* Dark gray background */
+    background-color: #000000 !important;
     transition: background-color 0.3s ease;
 }
 
@@ -547,14 +597,8 @@ body.dark-mode .nav-links a:hover {
     color: var(--primary-color);
 }
 
-.event-description {
-    font-size: 0.95rem;
-    margin-bottom: 1rem;
-    color: var(--text-color);
-}
-
 body.dark-mode .event-card {
-    background-color: #333;
+    background-color: #000000;
     color: #f4f4f4;
 }
 
@@ -619,6 +663,10 @@ body.dark-mode .event-date,
     .theme-options.active {
         transform: translateX(50%) translateY(0);
     }
+
+    .highlight-text {
+        font-size: 11vw;
+    }
 }
 
 @media (max-width: 480px) {