Skip to content

Commit 8487ded

Browse files
Modified the home page design (#45)
1 parent 88b01cb commit 8487ded

File tree

8 files changed

+86
-19
lines changed

8 files changed

+86
-19
lines changed
860 KB
Loading
616 KB
Loading
276 KB
Loading
307 KB
Loading
576 KB
Loading
385 KB
Loading

index.html

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

style.css

Lines changed: 83 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ body {
3131
max-width: 1200px;
3232
margin: 0 auto;
3333
width: 90%;
34-
max-width: 1200px;
35-
margin: 0 auto;
3634
padding: 0 1rem;
3735
}
3836

@@ -278,26 +276,81 @@ body {
278276
/* Hero Section Css */
279277

280278
.hero {
281-
background-size: cover;
282-
background-position: center;
279+
position: relative;
283280
height: 100vh;
284281
display: flex;
285-
align-items: center;
286282
justify-content: center;
283+
align-items: center;
287284
text-align: center;
288-
color: #fff;
289-
position: relative;
290-
background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(231, 76, 60, 0.8));
285+
background-size: cover;
286+
background-position: center;
287+
background: linear-gradient(135deg, rgba(95, 158, 231, 0.8), rgba(211, 104, 92, 0.8));
291288
}
292289

293290
.hero-content {
294-
max-width: min(800px, 90%);
295-
padding: 2rem;
296-
background-color: rgba(0, 0, 0, 0.5);
291+
max-width: 1000px;
292+
width: 90%;
293+
padding: 1rem;
297294
border-radius: 10px;
298295
backdrop-filter: blur(10px);
299296
}
300297

298+
.highlight-text {
299+
font-size: clamp(6rem, 12vw, 10rem);
300+
font-weight: 800;
301+
color: transparent;
302+
background-clip: text;
303+
-webkit-background-clip: text;
304+
background-size: cover;
305+
background-repeat: no-repeat;
306+
background-position: center;
307+
margin: 0 auto;
308+
white-space: nowrap;
309+
overflow: visible;
310+
text-align: center;
311+
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
312+
line-height: 1.1;
313+
animation: changeBackground 10s infinite;
314+
position: relative;
315+
z-index: 1;
316+
padding: 0;
317+
width: 100%;
318+
display: block;
319+
}
320+
321+
@keyframes changeBackground {
322+
323+
0%,
324+
16.66% {
325+
background-image: url('assets/images/text-backgrounds/image1.png');
326+
}
327+
328+
16.67%,
329+
33.33% {
330+
background-image: url('assets/images/text-backgrounds/image2.png');
331+
}
332+
333+
33.34%,
334+
49.99% {
335+
background-image: url('assets/images/text-backgrounds/image3.png');
336+
}
337+
338+
50%,
339+
66.66% {
340+
background-image: url('assets/images/text-backgrounds/image4.png');
341+
}
342+
343+
66.67%,
344+
83.33% {
345+
background-image: url('assets/images/text-backgrounds/image5.png');
346+
}
347+
348+
83.34%,
349+
100% {
350+
background-image: url('assets/images/text-backgrounds/image6.png');
351+
}
352+
}
353+
301354
.hero h1 {
302355
font-size: clamp(2rem, 5vw, 3.5rem);
303356
margin-bottom: 1rem;
@@ -306,25 +359,34 @@ body {
306359

307360
.hero p {
308361
font-size: clamp(1rem, 3vw, 1.2rem);
309-
max-width: 600px;
310-
margin: 0 auto 2rem;
362+
max-width: 800px;
363+
margin: 0 auto;
364+
color: #000000;
365+
font-weight: 600;
366+
text-shadow: none;
367+
line-height: 1.3;
368+
margin-top: 40px;
369+
margin-bottom: 40px;
311370
}
312371

313372
.explore-button {
314373
display: inline-block;
315-
background-color: var(--secondary-color);
316374
color: #fff;
317375
padding: 1rem 2.5rem;
376+
font-weight: 600;
377+
color: #fff;
378+
background-color: var(--primary-color);
318379
border-radius: 50px;
319380
text-decoration: none;
320-
font-weight: 600;
321381
transition: all 0.3s ease;
322382
text-transform: uppercase;
323383
letter-spacing: 1px;
384+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
385+
margin-top: 20px;
324386
}
325387

326388
.explore-button:hover {
327-
background-color: #e67e22;
389+
background-color: #686969;
328390
transform: translateY(-3px);
329391
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
330392
}
@@ -535,7 +597,7 @@ body.dark-mode .footer {
535597
}
536598

537599
.dark-mode .navbar {
538-
background-color: #2a2a2a !important; /* Dark gray background */
600+
background-color: #2a2a2a !important;
539601
transition: background-color 0.3s ease;
540602
}
541603

@@ -619,6 +681,10 @@ body.dark-mode .event-date,
619681
.theme-options.active {
620682
transform: translateX(50%) translateY(0);
621683
}
684+
685+
.highlight-text {
686+
font-size: 11vw;
687+
}
622688
}
623689

624690
@media (max-width: 480px) {

0 commit comments

Comments
 (0)