diff --git a/landing/assets/SmallLogo.png b/landing/assets/SmallLogo.png deleted file mode 100644 index dc16105f..00000000 Binary files a/landing/assets/SmallLogo.png and /dev/null differ diff --git a/landing/index.html b/landing/index.html index 41e72f3f..29a5fa2d 100644 --- a/landing/index.html +++ b/landing/index.html @@ -17,7 +17,7 @@
- Google IO Crossword Logo + Google IO Crossword Logo Play Now
@@ -71,7 +71,7 @@

How it's made

like the I/O Crossword using Flutter and Firebase Genkit with Codelabs, Blogs, and Videos.

- Learn More + Learn More
diff --git a/landing/style.css b/landing/style.css index 83ef334d..966c0e5e 100644 --- a/landing/style.css +++ b/landing/style.css @@ -95,6 +95,7 @@ header>.gradient-button { justify-content: center; width: 100%; height: 100%; + margin-top: 6.25rem; } .hero__content-inner-container { @@ -122,6 +123,7 @@ header>.gradient-button { .hero__content>h2 { font-weight: 400; font-size: 1.5rem; + margin: 1.5rem 0; } .hero__content>h2>br { @@ -129,14 +131,14 @@ header>.gradient-button { } .youtube-embed { - margin: 6rem auto; + margin: 7.25rem auto 3.5rem; } .youtube-embed__video-container { display: flex; align-items: center; justify-content: center; - margin-top: 2rem; + margin-top: 2.5rem; /* width: 850px; has to match the iframe width */ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, @@ -178,7 +180,7 @@ header>.gradient-button { align-items: center; justify-content: space-between; flex-direction: column; - gap: 1rem; + gap: 3.25rem; margin: 2rem auto; max-width: var(--max-page-content-width); width: 80%; @@ -201,7 +203,7 @@ header>.gradient-button { } .feature-content>a { - margin-top: 1.5rem; + margin: 2rem 0; } #faq { @@ -297,6 +299,15 @@ footer { margin: auto; } + .hero__content>h2 { + margin: 2rem 0; + } + + .feature { + margin: 4rem 0; + gap: 5rem; + } + .feature>img { max-width: 90%; } @@ -309,19 +320,28 @@ footer { text-align: center; } - .youtube-embed__title { - align-items: center; + .youtube-embed__video-container { + margin-top: 3.75rem; } .youtube-embed__video-container>iframe { margin: 0 5rem; } + .youtube-embed__title { + align-items: center; + } + + .footer__privacy-terms>p { + margin-top: 2.5rem; + } + .footer__logos-container { flex-direction: row; justify-content: space-between; flex-wrap: wrap; - margin: 3rem 0; + margin: 3rem 0 5.5rem; + gap: 8rem; } .footer__socials-inner-container { @@ -345,7 +365,8 @@ footer { .footer__privacy-terms-links { flex-direction: column; align-items: center; - margin: 3rem 0; + gap: 2.5rem; + margin: 1.25rem 0 2.5rem; } } @@ -375,6 +396,7 @@ footer { .hero__content-container { position: absolute; + margin-top: 0; } .hero__image { @@ -382,7 +404,7 @@ footer { height: 700px; width: unset; } - + .feature { flex-direction: row; margin: 5rem auto; @@ -395,6 +417,14 @@ footer { text-align: start; } + .feature-content>p { + margin-top: 3.125rem; + } + + .feature-content>a { + margin: 2.5rem 0 0; + } + .feature.reverse { flex-direction: row-reverse; } @@ -407,6 +437,10 @@ footer { margin: 0; } + .footer__logos-container { + margin: 3rem 0; + } + .footer__inner-logos-container { margin: 0; } @@ -417,9 +451,13 @@ footer { gap: 1rem; } + .footer__privacy-terms>p { + margin: 2rem 0; + } + .footer__privacy-terms-links { flex-direction: row; align-items: start; - margin: 1rem 0 0; + margin: 2rem 0 2rem; } } \ No newline at end of file