header positioning improved
3 files changed, +17 -17
+2-2twench_landing_page/app/globals.css
| @@ -29,8 +29,8 @@ body { | ||
| 29 | 29 | } |
| 30 | 30 | |
| 31 | 31 | .large-text-shadow { |
| 32 | - text-shadow: 8px 8px 0 #000, -8px -8px 0 #000, 8px -8px 0 #000, | |
| 33 | - -8px 8px 0 #000, 8px 0 0 #000, -8px 0 0 #000, 0 8px 0 #000, 0 -8px 0 #000; | |
| 32 | + text-shadow: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, | |
| 33 | + -4px 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000; | |
| 34 | 34 | } |
| 35 | 35 | |
| 36 | 36 | .landing { |
+3-5twench_landing_page/app/page.tsx
| @@ -5,11 +5,9 @@ export default function Home() { | ||
| 5 | 5 | <div> |
| 6 | 6 | <div className="landing flex flex-col"> |
| 7 | 7 | <Header /> |
| 8 | - <div className="relative"> | |
| 9 | - <h1 className="text-[128px] large-text-shadow w-full text-center"> | |
| 10 | - $TWENCH | |
| 11 | - </h1> | |
| 12 | - </div> | |
| 8 | + <h1 className="text-[128px] large-text-shadow w-full text-center"> | |
| 9 | + $TWENCH | |
| 10 | + </h1> | |
| 13 | 11 | </div> |
| 14 | 12 | <div></div> |
| 15 | 13 | <div></div> |
+12-10twench_landing_page/components/Header.tsx
| @@ -5,17 +5,19 @@ const Header = () => { | ||
| 5 | 5 | return ( |
| 6 | 6 | <div className="h-32 flex justify-between"> |
| 7 | 7 | <div></div> |
| 8 | - <Image | |
| 9 | - src="/images/logo.png" | |
| 10 | - alt="Twench" | |
| 11 | - width={64} | |
| 12 | - height={64} | |
| 13 | - className="my-auto rounded-full border-black border-4" | |
| 14 | - /> | |
| 8 | + <div className="w-[220px] my-auto"> | |
| 9 | + <Image | |
| 10 | + src="/images/logo.png" | |
| 11 | + alt="Twench" | |
| 12 | + width={64} | |
| 13 | + height={64} | |
| 14 | + className="m-auto rounded-full border-black border-4" | |
| 15 | + /> | |
| 16 | + </div> | |
| 15 | 17 | <div className="flex gap-4 my-auto"> |
| 16 | 18 | <a |
| 17 | 19 | href="" |
| 18 | - className="flex h-10 w-10 justify-center bg-white border-black border-2" | |
| 20 | + className="flex h-10 w-10 justify-center bg-white border-black border-2 hover:bg-background" | |
| 19 | 21 | > |
| 20 | 22 | <Image |
| 21 | 23 | src="/images/dexscreener.png" |
| @@ -27,7 +29,7 @@ const Header = () => { | ||
| 27 | 29 | </a> |
| 28 | 30 | <a |
| 29 | 31 | href="" |
| 30 | - className="flex h-10 w-10 justify-center bg-white border-black border-2" | |
| 32 | + className="flex h-10 w-10 justify-center bg-white border-black border-2 hover:bg-background" | |
| 31 | 33 | > |
| 32 | 34 | <Image |
| 33 | 35 | src="/images/dextools.png" |
| @@ -39,7 +41,7 @@ const Header = () => { | ||
| 39 | 41 | </a> |
| 40 | 42 | </div> |
| 41 | 43 | <a |
| 42 | - className="p-3 border-black bg-background my-auto rounded-full border-4 text-[28px] leading-[30.52px] cursor-pointer" | |
| 44 | + className="p-3 border-black bg-background my-auto rounded-full border-4 text-[28px] leading-[30.52px] cursor-pointer hover:brightness-150" | |
| 43 | 45 | href="" |
| 44 | 46 | > |
| 45 | 47 | BUY $TWENCH |