From 00c8604180571458157796a8fec7e77689ffc2d0 Mon Sep 17 00:00:00 2001 From: Arnav K Date: Mon, 22 Apr 2024 13:45:16 +0000 Subject: [PATCH] tobe fixed --- global.css | 54 ++++++++++++++++++++++++++++----- index.html | 89 ++++++++++++++++++++---------------------------------- main.js | 15 +++++---- 3 files changed, 86 insertions(+), 72 deletions(-) diff --git a/global.css b/global.css index 817e64a..b06dc10 100644 --- a/global.css +++ b/global.css @@ -24,10 +24,24 @@ /* HTML css */ html { + -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; font-family: Forager; } +/* A11y */ +::-moz-selection { + color: #eeeeee; + background: #052e16; +} +::selection { + color: #eeeeee; + background: #052e16; +} +::-webkit-scrollbar { + display: none; +} + /* Body base designs */ body { overflow-x: hidden; @@ -194,7 +208,7 @@ section:has(> article) { font-family: CloudySunday; font-weight: 870; text-shadow: -4px 4px 0 #052e16, 4px 4px 0 #052e16, 4px -4px 0 #052e16, - -4px -4px 0 #052e16; + -4px -4px 0 #052e16; color: #fff; letter-spacing: 0.025em; max-width: 95%; @@ -209,12 +223,14 @@ section:has(> article) { p { text-align: center; - opacity: 0.9; + filter: contrast(1.3); max-width: 90%; text-align: justify; margin: 2rem 0px; + color: #052e16; font-size: 1rem; letter-spacing: 0.025em; + @media (min-width: 768px) { margin-top: 0.3rem; font-size: 1.9rem; @@ -228,11 +244,7 @@ section:has(> article) { padding-left: 2.25rem; padding-right: 2.25rem; border-radius: 2.5rem; - background: linear-gradient( - 137deg, - #052e16 0%, - #076e32 100% - ); + background: linear-gradient(137deg, #052e16 0%, #076e32 100%); color: white; font-family: CloudySunday; text-decoration: none; @@ -247,3 +259,31 @@ section:has(> article) { } } } + +.testimonial { + min-height: 100vh; + display: grid; + place-items: center; + background: linear-gradient( + to top, + rgb(35, 116, 182) 0%, + rgb(19, 61, 139) 100% + ); + + h2 { + font-family: CloudySunday; + color: rgb(214, 214, 214); + text-align: center; + letter-spacing: 0.05em; + text-shadow: -2px 2px 0 #fff, 2px 2px 0 #fff, 2px -2px 0 #fff, + -2px -2px 0 #fff; + font-size: 2.25rem; + + @media (min-width: 768px) { + font-size: 4.25rem; + line-height: 6rem; + max-width: 77%; + margin-bottom: 0.5em; + } + } +} diff --git a/index.html b/index.html index dd2c7c7..6f8ed60 100644 --- a/index.html +++ b/index.html @@ -19,70 +19,45 @@
-

Welcome to Our Earth Day Celebration!

+

Welcome to Our Earth Day Celebration!

-
-

Did You Know?

-

- Earth Day was first celebrated on April 22, 1970, and now includes a - wide range of events coordinated globally by EARTHDAY.ORG including 1 - billion people in more than 193 countries. -

-
-
-

Why Celebrate Earth Day?

-

- Earth Day is more than just a single day — April 22. It's a day to - remind us to take action in our communities and beyond, to protect the - environment, restore damaged ecosystems, and live a more sustainable - life. -

-
-
-

How You Can Help

-

- Join us in making a difference! Here are some ways you can contribute - to preserving our planet: -

-
    -
  • Reduce, reuse, and recycle.
    • -
  • Volunteer for cleanups in your community.
    • -
  • Conserve water and electricity.
    • -
  • Plant a tree.
    • -
  • Educate others about environmental conservation.
    • -
-
-
-

Take Action Now

-

- Join our Earth Day quiz to test your knowledge and learn more about - what you can do to help our planet! -

- Start the Quiz! -
+
+

Did You Know?

+

Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.

+
+
+

Why Celebrate Earth Day?

+

Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.

+
+
+

How You Can Help

+

Join us in making a difference! Here are some ways you can contribute to preserving our planet:

+
    +
  • Reduce, reuse, and recycle.
    • +
  • Volunteer for cleanups in your community.
    • +
  • Conserve water and electricity.
    • +
  • Plant a tree.
    • +
  • Educate others about environmental conservation.
    • +
+
+
+

Take Action Now

+

Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!

+ Start the Quiz! +
-

Inspiration Corner

-

- "The Earth does not belong to us: we belong to the Earth." - Marlee - Matlin -

-

- This Earth Day, let's remember we are part of a larger ecosystem and our - actions have a profound impact on our planet. -

+

Inspiration Corner

+

"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin

+

This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.

-

Join an Event

-

- Participate in local and global Earth Day events to take action towards - a sustainable future. Check out events near you. -

+

Join an Event

+

Participate in local and global Earth Day events to take action towards a sustainable future. Check out events near you.

- - + diff --git a/main.js b/main.js index 8794078..94068e5 100644 --- a/main.js +++ b/main.js @@ -10,16 +10,16 @@ const hero_text = hero.getElementsByTagName("h1")[0]; */ { const ground = document.createElement("section"); - // for (let i = 5; i > 4; i++) { - // const plant = document.createElement("img"); - // plant.src = "//fav.farm/🌵"; - // plant.alt = "plant"; - // plant.classList.add("plant"); - // ground.append(plant) - // } ground.setAttribute("data-aos", "fade-up"); ground.setAttribute("data-aos-duration", "200"); hero.append(ground); + for (let i = 0; i < 4; i++) { + const plant = document.createElement("img"); + plant.src = "//fav.farm/🌵"; + plant.alt = "plant"; + plant.classList.add("plant"); + ground.append(plant) + } } /** @@ -39,4 +39,3 @@ const hero_text = hero.getElementsByTagName("h1")[0]; { AOS.init(); } -