diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.jpeg b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.jpeg new file mode 100644 index 0000000..963e8b4 Binary files /dev/null and b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.jpeg differ diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.png b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.png new file mode 100644 index 0000000..0fc2b55 Binary files /dev/null and b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/fake-logo.png differ diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html new file mode 100644 index 0000000..3cd5442 --- /dev/null +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html @@ -0,0 +1,94 @@ + + + + + + Project 3 - Build A Product Landing Page + + + + + +
+   +
+
+

Product Blurb

+
+ +
+ +
+
+
+
+

games

+
+
+ +
+
+

Acq Inc

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!

+
+
+
+
+ +
+
+

D&D

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!

+
+
+
+
+ +
+
+

Critical Role

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!

+
+
+
+
+ +
+
+

Star Wars: X-Wing

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!

+
+
+ +
+
+ +
+
+

Features

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam? +

+
+ + + \ No newline at end of file diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css new file mode 100644 index 0000000..29ab098 --- /dev/null +++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css @@ -0,0 +1,137 @@ +body { + background-color: rgb(168, 168, 168); +} + +#nav-bar { + position: fixed; + top: 0; + width: 100%; + background-color: rgb(179, 179, 179); + display: flex; + flex-direction: row; + justify-content: space-between; +} + +/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */ +@media screen and (max-width: 600px) { + .nav-bar a { + float: none; + width: 100%; + } +} + +.push { + margin-left: auto; +} + +#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; +} + +/* Games Section */ +#games { + text-align: center; +} + +.grid { + display: flex; +} + +#games .icon { + display: flex; + align-items: center; + justify-content: center; + height: 125px; + width: 20vw; + color: rgb(17, 76, 202); +} + +#games .details { + text-align: left; + display: flex; + flex-direction: column; + justify-content: center; + height: 125px; + width: 80vw; + padding: 5px; + } + +/* How To Section */ +#videos { + padding: 1em; + display: flex; + justify-content: center; +} + +/* Pricing Section */ +#features { + text-align: center; +} + diff --git a/index.html b/index.html index d99d9c9..46a7aed 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@