31
31
max-width : 1200px ;
32
32
margin : 0 auto;
33
33
width : 90% ;
34
- max-width : 1200px ;
35
- margin : 0 auto;
36
34
padding : 0 1rem ;
37
35
}
38
36
@@ -278,26 +276,81 @@ body {
278
276
/* Hero Section Css */
279
277
280
278
.hero {
281
- background-size : cover;
282
- background-position : center;
279
+ position : relative;
283
280
height : 100vh ;
284
281
display : flex;
285
- align-items : center;
286
282
justify-content : center;
283
+ align-items : center;
287
284
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 ));
291
288
}
292
289
293
290
.hero-content {
294
- max-width : min ( 800 px , 90 % ) ;
295
- padding : 2 rem ;
296
- background-color : rgba ( 0 , 0 , 0 , 0.5 ) ;
291
+ max-width : 1000 px ;
292
+ width : 90 % ;
293
+ padding : 1 rem ;
297
294
border-radius : 10px ;
298
295
backdrop-filter : blur (10px );
299
296
}
300
297
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
+
301
354
.hero h1 {
302
355
font-size : clamp (2rem , 5vw , 3.5rem );
303
356
margin-bottom : 1rem ;
@@ -306,25 +359,34 @@ body {
306
359
307
360
.hero p {
308
361
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 ;
311
370
}
312
371
313
372
.explore-button {
314
373
display : inline-block;
315
- background-color : var (--secondary-color );
316
374
color : # fff ;
317
375
padding : 1rem 2.5rem ;
376
+ font-weight : 600 ;
377
+ color : # fff ;
378
+ background-color : var (--primary-color );
318
379
border-radius : 50px ;
319
380
text-decoration : none;
320
- font-weight : 600 ;
321
381
transition : all 0.3s ease;
322
382
text-transform : uppercase;
323
383
letter-spacing : 1px ;
384
+ box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
385
+ margin-top : 20px ;
324
386
}
325
387
326
388
.explore-button : hover {
327
- background-color : # e67e22 ;
389
+ background-color : # 686969 ;
328
390
transform : translateY (-3px );
329
391
box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.2 );
330
392
}
@@ -535,7 +597,7 @@ body.dark-mode .footer {
535
597
}
536
598
537
599
.dark-mode .navbar {
538
- background-color : # 2a2a2a !important ; /* Dark gray background */
600
+ background-color : # 2a2a2a !important ;
539
601
transition : background-color 0.3s ease;
540
602
}
541
603
@@ -619,6 +681,10 @@ body.dark-mode .event-date,
619
681
.theme-options .active {
620
682
transform : translateX (50% ) translateY (0 );
621
683
}
684
+
685
+ .highlight-text {
686
+ font-size : 11vw ;
687
+ }
622
688
}
623
689
624
690
@media (max-width : 480px ) {
0 commit comments