diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html index 3cd5442..885e4ca 100644 --- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html @@ -22,7 +22,7 @@  
-

Product Blurb

+

Discover the latest games with Fakery

-

games

+

Latest Games

@@ -74,7 +74,11 @@
- +

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 29ab098..db5a7bd 100644 --- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css @@ -1,5 +1,12 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Rubik:wght@300;500&display=swap'); + +:root { + --blue: rgb(17, 76, 202); + font-family: 'Roboto', sans-serif; +} + body { - background-color: rgb(168, 168, 168); + background-color: rgb(189, 188, 188); } #nav-bar { @@ -10,6 +17,7 @@ body { display: flex; flex-direction: row; justify-content: space-between; + align-content: center; } /* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */ @@ -20,83 +28,99 @@ body { } } +#header-img { + width: 15%; + height: 15%; + margin: 0 1em 0; +} + .push { margin-left: auto; } +#nav-links { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + /* margin: 1em; */ +} + +.btn-link { + background: var(--blue); + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + + color: #FFFFFF; + font-family: 'Rubik', sans-serif; + font-size: 1em; + + padding: 5px 40px; + + box-shadow: 1px 1px 20px 0px #000000; + -webkit-box-shadow: 1px 1px 20px 0px #000000; + -moz-box-shadow: 1px 1px 20px 0px #000000; + + text-shadow: 1px 1px 20px #000000; + + border: solid #337FED 1px; + text-decoration: none; + /* display: inline-block; */ + cursor: pointer; + text-align: center; +} + +.btn-link + .btn-link { + margin-left: 1rem; +} + + +.btn-link:hover { + border: double 1px; +} + #empty-space { display: block; padding: 1.5em; } -#nav-links { - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 1em; -} - -.btn-link { - background: #6EF63D; - background-image: -webkit-linear-gradient(top, #6EF63D, #D0501E); - background-image: -moz-linear-gradient(top, #6EF63D, #D0501E); - background-image: -ms-linear-gradient(top, #6EF63D, #D0501E); - background-image: -o-linear-gradient(top, #6EF63D, #D0501E); - background-image: linear-gradient(to bottom, #6EF63D, #D0501E); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - color: #FFFFFF; - font-family: Open Sans; - font-size: 15px; - font-weight: 100; - padding: 15px; - box-shadow: 1px 1px 20px 0px #000000; - -webkit-box-shadow: 1px 1px 20px 0px #000000; - -moz-box-shadow: 1px 1px 20px 0px #000000; - text-shadow: 1px 1px 20px #000000; - border: solid #337FED 1px; - text-decoration: none; - display: inline-block; - cursor: pointer; - text-align: center; - margin: 0 1em 0; - - } - - .btn-link:hover { - border: double #99C624 1px; - color: #0e0e0e; - background: rgba(110, 246, 61, 0.57); - background-image: -webkit-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98)); - background-image: -moz-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98)); - background-image: -ms-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98)); - background-image: -o-linear-gradient(top, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98)); - background-image: linear-gradient(to bottom, rgba(110, 246, 61, 0.57), rgba(208, 80, 30, 0.98)); - text-decoration: none; - } - - /* Navbar links */ -/* - #nav-bar a { - color: #602d2d; - } -*/ - -#header-img { - width: 15%; - height: 15%; - margin: 0 1em 0; -} - /* Form Section */ #formsection { text-align: center; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 25px; + color: #000000; +} + +#formsection #email { + padding-left: 10px; + padding-top: 5px; + padding-bottom: 5px; + font-size: 25px; + border: 2px solid var(--blue); + border-radius: 5px; +} + +#formsection #submit { + background-color: var(--blue); + color: white; + margin-top: 1rem; + font-size: 20px; + font-weight: 500; } /* Games Section */ #games { + margin-top: 2rem; + display: flex; + flex-direction: column; + align-items: center; text-align: center; } @@ -109,17 +133,15 @@ body { align-items: center; justify-content: center; height: 125px; - width: 20vw; - color: rgb(17, 76, 202); + /* width: 15vw; */ + color: var(--blue); } #games .details { + margin-left: 2rem; text-align: left; - display: flex; - flex-direction: column; - justify-content: center; height: 125px; - width: 80vw; + width: 50vw; padding: 5px; } @@ -127,11 +149,20 @@ body { #videos { padding: 1em; display: flex; + flex-direction: column; justify-content: center; + align-items: center; +} + +.video + .video { + margin-top: 1rem; } /* Pricing Section */ #features { + margin: auto; + width: 60%; text-align: center; + }