huncholanepictures laid out for roadmap
huncholane2 files changed, +42 -3
+33-0twench_landing_page/components/RoadMapSection/RoadMapSection.css
| @@ -1,2 +1,35 @@ | ||
| 1 | 1 | .RoadMapSection { |
| 2 | + background: url("/images/roadmap/building.jpg") no-repeat center center/cover; | |
| 3 | + @apply h-[700px] relative; | |
| 4 | +} | |
| 5 | + | |
| 6 | +.RoadMapSection .Container { | |
| 7 | + @apply relative w-[320px] bg-red-100 top-[20px] h-[660px] left-[50%] transform translate-x-[-50%]; | |
| 8 | + @apply 424:w-[400px]; | |
| 9 | + @apply 552:w-[500px]; | |
| 10 | +} | |
| 11 | + | |
| 12 | +.RoadMapSection .Container .Title { | |
| 13 | + @apply text-4xl w-full text-center; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.RoadMapSection .Container .Soldier { | |
| 17 | + background: url("/images/roadmap/soldier.jpg") no-repeat center center/cover; | |
| 18 | + @apply size-[100px] absolute top-[70px] left-[10px] transform rotate-[9.39deg]; | |
| 19 | +} | |
| 20 | + | |
| 21 | +.RoadMapSection .Container .Tnt { | |
| 22 | + background: url("/images/roadmap/tnt.jpg") no-repeat center center/cover; | |
| 23 | + @apply size-[100px] absolute top-[210px] right-[10px] transform rotate-[-9.21deg]; | |
| 24 | +} | |
| 25 | + | |
| 26 | +.RoadMapSection .Container .Jetpack { | |
| 27 | + background: url("/images/roadmap/jetpack.jpg") no-repeat center center/cover; | |
| 28 | + @apply size-[100px] absolute top-[350px] left-[10px] transform rotate-[9.09deg]; | |
| 29 | +} | |
| 30 | + | |
| 31 | +.RoadMapSection .Container .Wallstreet { | |
| 32 | + background: url("/images/roadmap/wallstreet.jpg") no-repeat center | |
| 33 | + center/cover; | |
| 34 | + @apply size-[100px] absolute top-[490px] right-[10px] transform rotate-[-8.37deg]; | |
| 2 | 35 | } |
+9-3twench_landing_page/components/RoadMapSection/RoadMapSection.tsx
| @@ -1,10 +1,16 @@ | ||
| 1 | -import React from 'react'; | |
| 2 | -import './RoadMapSection.css'; | |
| 1 | +import React from "react"; | |
| 2 | +import "./RoadMapSection.css"; | |
| 3 | 3 | |
| 4 | 4 | const RoadMapSection: React.FC = () => { |
| 5 | 5 | return ( |
| 6 | 6 | <div className="RoadMapSection"> |
| 7 | - RoadMapSection | |
| 7 | + <div className="Container"> | |
| 8 | + <div className="Title">ROAD MAP</div> | |
| 9 | + <div className="Soldier"></div> | |
| 10 | + <div className="Tnt"></div> | |
| 11 | + <div className="Jetpack"></div> | |
| 12 | + <div className="Wallstreet"></div> | |
| 13 | + </div> | |
| 8 | 14 | </div> |
| 9 | 15 | ); |
| 10 | 16 | }; |