diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html index 7b0c250..814ca5e 100644 --- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html @@ -29,6 +29,7 @@
+
@@ -75,10 +76,10 @@

Teasers for games

- - - - + + + +

Features

diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css index 73b2bb1..97e7a79 100644 --- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css @@ -5,8 +5,14 @@ font-family: 'Roboto', sans-serif; } +*{ + padding: 0; + margin: 0; +} + body { background-color: rgb(189, 188, 188); + margin 0 auto; } #nav-bar { @@ -85,6 +91,15 @@ body { padding: 1.5em; } +section { + margin-top: 0.75rem; +} + +/* Put spacing between the section title (first element) and the next element below */ +section :nth-child(2) { + margin-top: 0.5rem; +} + /* Form Section */ #formsection { @@ -96,6 +111,7 @@ body { } #formsection #email { + margin-top: 1rem; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; @@ -123,6 +139,8 @@ body { .grid { display: flex; + flex-wrap: nowrap; + flex-grow: 1; } #games .icon { @@ -137,26 +155,46 @@ body { #games .details { margin-left: 2rem; text-align: left; - height: 125px; + height: auto; width: 50vw; padding: 5px; } /* How To Section */ #videos { - padding: 1em; text-align: center; } +.video { + width: 420px; + height: 315px; +} + .video + .video { margin-top: 1rem; } /* Pricing Section */ #features { - margin: auto; + margin-left: auto; + margin-right: auto; width: 60%; text-align: center; +} + +/* start handling at 700 for menu */ +@media screen and (max-width: 700px) { } +/* below video tweak video sizes */ +@media screen and (max-width: 500px) { + #formsection #email { + font-size: 20px; + } + + .video { + width: 90%; + height: calc((90vw / 4) * 3); + } +}