diff --git a/assets/images/text-backgrounds/image1.png b/assets/images/text-backgrounds/image1.png new file mode 100644 index 0000000..4000175 Binary files /dev/null and b/assets/images/text-backgrounds/image1.png differ diff --git a/assets/images/text-backgrounds/image2.png b/assets/images/text-backgrounds/image2.png new file mode 100644 index 0000000..f54a3cb Binary files /dev/null and b/assets/images/text-backgrounds/image2.png differ diff --git a/assets/images/text-backgrounds/image3.png b/assets/images/text-backgrounds/image3.png new file mode 100644 index 0000000..b2f2c27 Binary files /dev/null and b/assets/images/text-backgrounds/image3.png differ diff --git a/assets/images/text-backgrounds/image4.png b/assets/images/text-backgrounds/image4.png new file mode 100644 index 0000000..141ac11 Binary files /dev/null and b/assets/images/text-backgrounds/image4.png differ diff --git a/assets/images/text-backgrounds/image5.png b/assets/images/text-backgrounds/image5.png new file mode 100644 index 0000000..5ac0cde Binary files /dev/null and b/assets/images/text-backgrounds/image5.png differ diff --git a/assets/images/text-backgrounds/image6.png b/assets/images/text-backgrounds/image6.png new file mode 100644 index 0000000..e80d8fd Binary files /dev/null and b/assets/images/text-backgrounds/image6.png differ diff --git a/index.html b/index.html index 7b1bec1..7d2098c 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - + Eventica @@ -69,7 +69,8 @@
-

Discover Bangalore's Events & Meetups

+

Discover Events & Meetups

+
BANGALORE

Explore the best vibrant events, tech conferences, and exciting happenings in the Silicon Valley of India.

Explore Events
diff --git a/style.css b/style.css index 92740a9..370e276 100644 --- a/style.css +++ b/style.css @@ -31,8 +31,6 @@ body { max-width: 1200px; margin: 0 auto; width: 90%; - max-width: 1200px; - margin: 0 auto; padding: 0 1rem; } @@ -278,26 +276,81 @@ 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)); + background-size: cover; + background-position: center; + background: linear-gradient(135deg, rgba(95, 158, 231, 0.8), rgba(211, 104, 92, 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 +359,34 @@ body { .hero p { font-size: clamp(1rem, 3vw, 1.2rem); - max-width: 600px; - margin: 0 auto 2rem; + max-width: 800px; + margin: 0 auto; + color: #000000; + 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); } @@ -535,7 +597,7 @@ body.dark-mode .footer { } .dark-mode .navbar { - background-color: #2a2a2a !important; /* Dark gray background */ + background-color: #2a2a2a !important; transition: background-color 0.3s ease; } @@ -619,6 +681,10 @@ body.dark-mode .event-date, .theme-options.active { transform: translateX(50%) translateY(0); } + + .highlight-text { + font-size: 11vw; + } } @media (max-width: 480px) {