huncholaneheader stays in tact on small screen
huncholane2 files changed, +8 -16
+4-12twench_landing_page/app/page.tsx
| @@ -6,19 +6,11 @@ export default function Home() { | ||
| 6 | 6 | <div> |
| 7 | 7 | <div className="landing relative"> |
| 8 | 8 | <Header /> |
| 9 | - <h1 className="text-[180px] large-text-shadow w-full text-center bottom-[480px] absolute"> | |
| 10 | - $TWENCH | |
| 11 | - </h1> | |
| 12 | - <div className="absolute bottom-[-20px] flex justify-center w-full min-w-[1354px]"> | |
| 13 | - <Image | |
| 14 | - src="/images/tank.png" | |
| 15 | - width={1354} | |
| 16 | - height={656} | |
| 17 | - alt="Tank" | |
| 18 | - className="max-w-100%" | |
| 19 | - /> | |
| 9 | + <h1 className="text-[180px] large-text-shadow w-full text-center bottom-[480px] absolute"></h1> | |
| 10 | + <div className="absolute bottom-[-20px] flex justify-center max-h-[75%] w-full"> | |
| 11 | + <Image src="/images/tank.png" width={1354} height={656} alt="Tank" /> | |
| 20 | 12 | </div> |
| 21 | - <div className="absolute bottom-[-20px] z-10 flex justify-center w-full"> | |
| 13 | + <div className="absolute bottom-[-20px] z-10 flex justify-center max-h-[50%] w-full"> | |
| 22 | 14 | <Image |
| 23 | 15 | src="/images/soldier-large.png" |
| 24 | 16 | width={472} |
+4-4twench_landing_page/components/Header.tsx
| @@ -4,8 +4,8 @@ import React from "react"; | ||
| 4 | 4 | const Header = () => { |
| 5 | 5 | return ( |
| 6 | 6 | <div className="h-32 flex justify-between"> |
| 7 | - <div></div> | |
| 8 | - <div className="w-[220px] my-auto"> | |
| 7 | + <div className="hidden sm:block"></div> | |
| 8 | + <div className="sm:w-[220px] my-auto pl-3 sm:pl-0"> | |
| 9 | 9 | <Image |
| 10 | 10 | src="/images/logo.png" |
| 11 | 11 | alt="Twench" |
| @@ -41,12 +41,12 @@ const Header = () => { | ||
| 41 | 41 | </a> |
| 42 | 42 | </div> |
| 43 | 43 | <a |
| 44 | - className="p-3 border-black bg-background my-auto rounded-full border-4 text-[28px] leading-[30.52px] cursor-pointer hover:brightness-150" | |
| 44 | + className="p-1 sm:p-3 border-black bg-background my-auto rounded-full border-4 text-[12px] leading-[30.52px] cursor-pointer hover:brightness-150 sm:text-[28px] mr-3 sm:mr-0" | |
| 45 | 45 | href="" |
| 46 | 46 | > |
| 47 | 47 | BUY $TWENCH |
| 48 | 48 | </a> |
| 49 | - <div></div> | |
| 49 | + <div className="hidden sm:block"></div> | |
| 50 | 50 | </div> |
| 51 | 51 | ); |
| 52 | 52 | }; |