website link: https://marccodez.github.io/ Product-landing-page/ (remove spaces)
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<header id="header">
<img id="header-img" alt="sneaker" src="sw97.png" />
<h1 style="color: #2b2262;">Vegan</h1>
<h1 style="color: #f39a96;">
Sneaker
</h1>
<nav id="nav-bar">
<ul class="header-ul">
<li>
<a class="nav-link" href="#top">Sign Up</a>
</li>
<li>
<a class="nav-link" href="#video">Video Review</a>
</li>
<li>
<a class="nav-link" href="#releases">New Releases</a>
</li>
</ul>
</nav>
</header>
<body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div class="sign-up">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h1>Keep up to date with the latest vegan sneakers! Sign up now!</h1>
<label for="email"></label>
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<div>
<input id="submit" type="submit" />
</div>
</form>
</div>
<div class="video-section">
<div class="video">
<h1>Video Review</h1>
<iframe
id="video"
width="600"
height="400"
src="https://www.youtube.com/embed/FEA_hPCU3x0"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
<div id="releases">
<div id="pricing-box">
<h4>Travis Scott AF1 Sail</h4>
<img id="travis" alt="sneaker" src="af1.png" />
<p class="price">$380</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<a href="" class="btn">Select</a>
</div>
<div id="pricing-box">
<h4>Nike Air Max Light 2</h4>
<img id="airmax" alt="sneaker" src="max2l.png" />
<p class="price">$500</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<a href="" class="btn">Select</a>
</div>
<div id="pricing-box">
<h4>Nike Air Max 270 Bauhaus</h4>
<img id="bauhaus" alt="sneaker" src="bauhaus.png" />
<p class="price">$380</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<p>fdfd</p>
<a href="" class="btn">Select</a>
</div>
</div>
<footer>
<div class="footer-nav">
<ul>
<li><a href="">Privacy</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="copyright">
<p>Copyright 2020, marccodez</p>
</div>
</footer>
</body>
</html>
CSS code:
html {
background-color: #fcf2bb;
font-family: Arial, Helvetica, sans-serif;
}
#header-img {
width: 150px;
height: 160px;
}
#header {
width: 100%;
display: flex;
align-items: center;
position: fixed; /* nav bar always at the top of the viewport solution */
background-color: #fcf2bb;
z-index: 1000; /*" The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order." */
}
.header-ul {
list-style: none;
display: flex;
justify-content: space-around;
}
@media screen and (max-width: 650px) {
header {
flex-direction: column;
}
nav#nav-bar ul {
text-align: center;
}
}
a {
text-decoration: none;
}
nav {
width: 100%;
}
.sign-up {
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.sign-up input {
padding: 8px;
margin: 5px;
}
.sign-up input#email {
width: 250px;
font-size: 15px;
}
.sign-up input#submit {
width: 150px;
border: none;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
background: #f39a96;
}
#form {
text-align: center;
margin-bottom: 20px; /* more than 20 creates a responsive issue */
}
.video-section {
height: 500px;
display: flex;
justify-content: center;
align-content: center;
margin-bottom: 15px;
padding-bottom: 80px;
}
.video {
text-align: center;
}
#releases {
display: grid;
gap: 30px;
align-content: center;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: repeat(3, 300px);
margin-bottom: 5px;
}
#travis {
width: 150px;
height: 100px;
}
#airmax {
width: 150px;
height: 105px;
}
#bauhaus {
width: 150px;
height: 105px;
}
#pricing-box {
text-align: center;
line-height: 40px;
border: 2px solid black;
}
#pricing-box h4 {
background: #2b2262;
color: white;
}
#pricing-box .price {
font-weight: bold;
font-size: 25px;
}
#pricing-box .btn {
background: #f39a96;
display: block;
color: black;
width: 150px;
margin: 15px auto;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
}
footer {
background: #454f4e;
text-align: end;
padding: 5px 2.5px;
color: white;
}
.footer-nav ul {
display: flex;
flex-direction: row;
justify-content: flex-end;
list-style-type: none;
}
.footer-nav ul li {
margin-left: 15px;
}
.footer-nav ul li a {
color: white;
}
.copyright {
opacity: 0.7;
}
