Step 1 these are base files I started 8th August and then didn't touch again till now.
This commit is contained in:
parent
fb2b4539c9
commit
c018b6d766
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
|
|
@ -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">
|
||||||
|
 
|
||||||
|
</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&controls=0&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>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Reference in New Issue