huncholaneadded filter to road map
huncholane1 file changed, +20 -10
+20-10twench_landing_page/components/RoadMapSection/RoadMapSection.css
| @@ -1,16 +1,26 @@ | ||
| 1 | 1 | .RoadMapSection { |
| 2 | + position: relative; | |
| 3 | + z-index: 0; /* Ensure the section is positioned correctly */ | |
| 4 | +} | |
| 5 | + | |
| 6 | +.RoadMapSection::before { | |
| 7 | + content: ""; | |
| 8 | + position: absolute; | |
| 9 | + top: 0; | |
| 10 | + left: 0; | |
| 11 | + right: 0; | |
| 12 | + bottom: 0; | |
| 2 | 13 | background: url("/images/roadmap/building.jpg") no-repeat center center/cover; |
| 3 | - @apply h-[700px] relative; | |
| 14 | + opacity: 0.5; /* Adjust the opacity value as needed */ | |
| 15 | + z-index: -1; /* Ensure the pseudo-element is behind the content */ | |
| 4 | 16 | } |
| 5 | 17 | |
| 6 | 18 | .RoadMapSection .Container { |
| 7 | - @apply relative w-auto bg-red-100 top-[20px] h-[660px] left-[50%] transform translate-x-[-50%]; | |
| 8 | - @apply 424:w-[400px]; | |
| 9 | - @apply 552:w-[500px]; | |
| 19 | + @apply w-full py-[20px]; | |
| 10 | 20 | } |
| 11 | 21 | |
| 12 | 22 | .RoadMapSection .Container .Title { |
| 13 | - @apply text-4xl w-full text-center; | |
| 23 | + @apply text-4xl w-full text-center my-6; | |
| 14 | 24 | } |
| 15 | 25 | |
| 16 | 26 | .RoadMapSection ul { |
| @@ -23,26 +33,26 @@ | ||
| 23 | 33 | } |
| 24 | 34 | |
| 25 | 35 | .RoadMapSection .Row { |
| 26 | - @apply flex gap-9 h-[130px]; | |
| 36 | + @apply flex gap-9 h-[130px] justify-center; | |
| 27 | 37 | } |
| 28 | 38 | |
| 29 | 39 | .RoadMapSection .Container .Soldier { |
| 30 | 40 | background: url("/images/roadmap/soldier.jpg") no-repeat center center/cover; |
| 31 | - @apply size-[100px] transform rotate-[9.39deg]; | |
| 41 | + @apply size-[100px] transform rotate-[9.39deg] border-black border-2; | |
| 32 | 42 | } |
| 33 | 43 | |
| 34 | 44 | .RoadMapSection .Container .Tnt { |
| 35 | 45 | background: url("/images/roadmap/tnt.jpg") no-repeat center center/cover; |
| 36 | - @apply size-[100px] transform rotate-[-9.21deg]; | |
| 46 | + @apply size-[100px] transform rotate-[-9.21deg] border-black border-2; | |
| 37 | 47 | } |
| 38 | 48 | |
| 39 | 49 | .RoadMapSection .Container .Jetpack { |
| 40 | 50 | background: url("/images/roadmap/jetpack.jpg") no-repeat center center/cover; |
| 41 | - @apply size-[100px] transform rotate-[9.09deg]; | |
| 51 | + @apply size-[100px] transform rotate-[9.09deg] border-black border-2; | |
| 42 | 52 | } |
| 43 | 53 | |
| 44 | 54 | .RoadMapSection .Container .Wallstreet { |
| 45 | 55 | background: url("/images/roadmap/wallstreet.jpg") no-repeat center |
| 46 | 56 | center/cover; |
| 47 | - @apply size-[100px] transform rotate-[-8.37deg]; | |
| 57 | + @apply size-[100px] transform rotate-[-8.37deg] border-black border-2; | |
| 48 | 58 | } |