Step 1 these are base files I started 8th August and then didn't touch again till now.

This commit is contained in:
Robert McGovern 2020-10-06 01:08:26 +01:00
parent fb2b4539c9
commit c018b6d766
5 changed files with 232 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 3 - Build A Product Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/25481ff5bf.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="fake-logo.png" alt="company logo">
<div class="push" id="nav-links">
<a class="nav-link btn-link" href="#games">Games</a>
<a class="nav-link btn-link" href="#videos">Videos</a>
<a class="nav-link btn-link" href="#features">Features</a>
</div>
</nav>
</header>
<div id="empty-space">
&nbsp
</div>
<section id="formsection">
<h2>Product Blurb</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="form-email">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" placeholder="person@example.com" required>
</div>
<div class="form-example">
<input id="submit" type="submit" value="Subscribe!">
</div>
</form>
</section>
<section id="games">
<h2 >games</h2>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-acquisitions-incorporated"></i>
</div>
<div class="details">
<h3>Acq Inc</h3>
<p>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!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-d-and-d"></i>
</div>
<div class="details">
<h3>D&D</h3>
<p>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!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-critical-role"></i>
</div>
<div class="details">
<h3>Critical Role</h3>
<p>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!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-fantasy-flight-games"></i>
</div>
<div class="details">
<h3>Star Wars: X-Wing</h3>
<p>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!</p>
</div>
</div>
</section>
<section id="videos">
<iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="features">
<h2 >Features</h2>
<p>
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?
</p>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>

View File

@ -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;
}

View File

@ -43,7 +43,7 @@
<ul> <ul>
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li> <li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li>
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li> <li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li>
<li><a href=""></a></li> <li><a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">Project 3 - Product Landing Page</a></li>
<li><a href=""></a></li> <li><a href=""></a></li>
<li><a href=""></a></li> <li><a href=""></a></li>
</ul> </ul>