huncholaneroadmap a little responsive
huncholane2 files changed, +11 -5
+7-1twench_landing_page/components/RoadMapSection/RoadMapSection.css
| @@ -29,30 +29,36 @@ | ||
| 29 | 29 | |
| 30 | 30 | .RoadMapSection li { |
| 31 | 31 | @apply text-[10px] text-shadow w-[120px]; |
| 32 | + @apply text-[14px] w-[150px]; | |
| 32 | 33 | list-style-type: disc; |
| 33 | 34 | } |
| 34 | 35 | |
| 35 | 36 | .RoadMapSection .Row { |
| 36 | - @apply flex gap-9 h-[130px] justify-center; | |
| 37 | + @apply flex gap-9 my-8 justify-center; | |
| 38 | + @apply 424:gap-16; | |
| 37 | 39 | } |
| 38 | 40 | |
| 39 | 41 | .RoadMapSection .Container .Soldier { |
| 40 | 42 | background: url("/images/roadmap/soldier.jpg") no-repeat center center/cover; |
| 41 | 43 | @apply size-[100px] transform rotate-[9.39deg] border-black border-2; |
| 44 | + @apply 424:size-[150px]; | |
| 42 | 45 | } |
| 43 | 46 | |
| 44 | 47 | .RoadMapSection .Container .Tnt { |
| 45 | 48 | background: url("/images/roadmap/tnt.jpg") no-repeat center center/cover; |
| 46 | 49 | @apply size-[100px] transform rotate-[-9.21deg] border-black border-2; |
| 50 | + @apply 424:size-[150px]; | |
| 47 | 51 | } |
| 48 | 52 | |
| 49 | 53 | .RoadMapSection .Container .Jetpack { |
| 50 | 54 | background: url("/images/roadmap/jetpack.jpg") no-repeat center center/cover; |
| 51 | 55 | @apply size-[100px] transform rotate-[9.09deg] border-black border-2; |
| 56 | + @apply 424:size-[150px]; | |
| 52 | 57 | } |
| 53 | 58 | |
| 54 | 59 | .RoadMapSection .Container .Wallstreet { |
| 55 | 60 | background: url("/images/roadmap/wallstreet.jpg") no-repeat center |
| 56 | 61 | center/cover; |
| 57 | 62 | @apply size-[100px] transform rotate-[-8.37deg] border-black border-2; |
| 63 | + @apply 424:size-[150px]; | |
| 58 | 64 | } |
+4-4twench_landing_page/components/RoadMapSection/RoadMapSection.tsx
| @@ -7,34 +7,34 @@ const RoadMapSection: React.FC = () => { | ||
| 7 | 7 | <div className="Container"> |
| 8 | 8 | <div className="Title">ROAD MAP</div> |
| 9 | 9 | <div className="Row"> |
| 10 | + <div className="Soldier"></div> | |
| 10 | 11 | <ul> |
| 11 | 12 | <li>Build Community Website & Social Media Accounts</li> |
| 12 | 13 | <li>Build Twench Run GAME</li> |
| 13 | 14 | <li>Launch On PumpFun</li> |
| 14 | 15 | </ul> |
| 15 | - <div className="Soldier"></div> | |
| 16 | 16 | </div> |
| 17 | 17 | <div className="Row"> |
| 18 | - <div className="Tnt"></div> | |
| 19 | 18 | <ul> |
| 20 | 19 | <li>Hard Work In Da Twench</li> |
| 21 | 20 | <li>Migrate to Raydium</li> |
| 22 | 21 | <li>Strategic Partnerships</li> |
| 23 | 22 | <li>Twench Run Expansions</li> |
| 24 | 23 | </ul> |
| 24 | + <div className="Tnt"></div> | |
| 25 | 25 | </div> |
| 26 | 26 | <div className="Row"> |
| 27 | + <div className="Jetpack"></div> | |
| 27 | 28 | <ul> |
| 28 | 29 | <li>Growth & Community Rewards</li> |
| 29 | 30 | <li>Expand Listings</li> |
| 30 | 31 | </ul> |
| 31 | - <div className="Jetpack"></div> | |
| 32 | 32 | </div> |
| 33 | 33 | <div className="Row"> |
| 34 | - <div className="Wallstreet"></div> | |
| 35 | 34 | <ul> |
| 36 | 35 | <li>GET OUT DA TWENCH</li> |
| 37 | 36 | </ul> |
| 37 | + <div className="Wallstreet"></div> | |
| 38 | 38 | </div> |
| 39 | 39 | </div> |
| 40 | 40 | </div> |