diff --git a/public/png/localHeroImage.png b/public/png/localHeroImage.png new file mode 100644 index 0000000..51d9fab Binary files /dev/null and b/public/png/localHeroImage.png differ diff --git a/src/assets/images/HeroImage.astro b/src/assets/images/HeroImage.astro new file mode 100644 index 0000000..2a0eb8b --- /dev/null +++ b/src/assets/images/HeroImage.astro @@ -0,0 +1,6 @@ +--- +import { Image } from "astro:assets"; +import localHeroImage from "../../../public/png/localHeroImage.png"; +--- + +Hero Image diff --git a/src/components/Hero.astro b/src/components/Hero.astro new file mode 100644 index 0000000..3906113 --- /dev/null +++ b/src/components/Hero.astro @@ -0,0 +1,24 @@ +--- +import HeroImage from "../assets/images/HeroImage.astro"; +import NavigationBar from "@components/NavigationBar.astro"; +--- + +
+ +
+ +
+
+

+ About 300 million kids worldwide don't have a + football. +

+
+
diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro index 8e0b56d..ea166de 100644 --- a/src/components/NavigationBar.astro +++ b/src/components/NavigationBar.astro @@ -62,6 +62,10 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro"; var navBar = document.getElementById("navbar"); var openButton = document.getElementById("open-mobile-menu"); var closeButton = document.getElementById("close-mobile-menu"); + var hero = document.getElementById("hero"); + var navBar_container = document.getElementById("navbar-container"); + var hero_text = document.getElementById("hero-text"); + var footer = document.getElementById("footer"); var menuItems = document.querySelectorAll("#navbar li"); if (navBar && openButton && closeButton) { @@ -69,9 +73,25 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro"; navBar?.classList.contains("hidden") ? navBar.classList.remove("hidden") : navBar?.classList.add("hidden"); + hero?.classList.contains("relative") + ? hero.classList.remove("relative") + : hero?.classList.add("relative"); + navBar_container?.classList.contains("absolute") + ? navBar_container.classList.remove("absolute", "left-0", "right-0") + : navBar_container?.classList.add("absolute", "left-0", "right-0"); + hero_text?.classList.contains("absolute") + ? hero_text.classList.remove("absolute") + : hero_text?.classList.add("absolute"); + footer?.classList.contains("hidden") + ? footer.classList.remove("hidden") + : footer?.classList.add("hidden"); }); closeButton.addEventListener("click", () => { navBar?.classList.add("hidden"); + hero?.classList.add("relative"); + navBar_container?.classList.add("absolute", "left-0", "right-0"); + hero_text?.classList.add("absolute"); + footer?.classList.remove("hidden"); }); menuItems.forEach((item) => item.addEventListener("click", () => { diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index d56ce45..ed9bfc8 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- import Footer from "@components/Footer.astro"; -import NavigationBar from "@components/NavigationBar.astro"; +import Hero from "@components/Hero.astro"; interface Props { title: string; @@ -21,7 +21,7 @@ const { title } = Astro.props;
- +
diff --git a/src/styles/global.css b/src/styles/global.css index 93db4c7..15e1a79 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -58,6 +58,12 @@ @apply text-[18px] leading-6; } + @media only screen and (max-width: 768px) { + h1 { + @apply text-[36px] leading-[48px]; + } + } + iframe { @apply aspect-video; }