Hello,
In this challenge, I tried replicating the sample and while my code passes, I’m confused about two things I was unable to get right.
-
How can I embed the video so that a preview is visible? And why isn’t my video playing?
-
When I scroll, there is a slight gap above the header. How do I remove it?
Your code so far
<!DOCTYPE html>
<html>
<head>
<title>Product Landing Page</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=divice-width, initial scale=1.0"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"/>
</head>
<body>
<header id="header">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo" id="header-img"/>
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a class="nav-link" href="#form">How it works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<section class="form">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<input id="email" name="email" type="email" required placeholder="Enter your email address" class="email"/></br>
<input type="submit" id="submit" value="GET STARTED"/>
</form>
</section>
<section id="features" class="features">
<i class="fa-solid fa-fire-flame-curved icon"></i></i><article class="f-one"><h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></article>
<i class="fa-solid fa-truck icon"></i><article class="f-two"><h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p></article>
<i class="fa-solid fa-battery-full icon"></i><article class="f-three"><h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p></article></section>
<section>
<video controls src="https://youtu.be/y8Yv4pnO7qc" type="video/mp4" preload="auto" id="video" autoplay></video>
</section>
<section id="pricing">
<article class="price-card-1">
<h4>TENOR TROMBONE</h4>
<p>$600</p>
<button class="price-button">SELECT</button>
</article>
<article class="price-card-2">
<h4>BASS TROMBONE</h4>
<p>$900</p>
<button class="price-button">SELECT</button>
</article>
<article class="price-card-3">
<h4 class=>VALVE TROMBONE</h4>
<p>$1200</p>
<button class="price-button">SELECT</button>
</article>
</section>
<footer class="footer">
<p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Privacy</a></p>
<p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Terms</a></p>
<p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Contact</a></p>
<p class="copy">Copyright 2016, Original Trombones</p>
</footer>
</main>
</body>
</html>
html {box-sizing: border-box;
background-color: #eee}
body {font-family: Verdana, Tahoma}
main {margin: 0 200px}
header {display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px 10px 40px;
background-color: #eee;
position: sticky;
top: 10px}
#header-img {width: 300px;
Height: 34px;
}
nav ul {list-style: none;
display: flex;
justify-content: space-evenly;
}
nav ul li {display: flex;
justify-content: space-evenly;
margin-left: 90px;}
#nav-bar a {text-decoration: none;
color: black}
h2 {text-align: center}
form {text-align: center}
.email {margin-bottom: 15px;
width: 280px;
height: 28px}
#submit {border: none;
background-color: #FAC213;
font-weight: 900;
font-size: 16;
padding: 6px;
transition: background-color 1s;}
#submit:hover, .price-button:hover {cursor: pointer;
background-color: orange;}
.features {margin-top: 100px;
margin-bottom: 50px;
display: grid;
grid-template-columns: 100px auto;
gap: 20px}
.icon {color: darkorange;
font-size: 50px;
grid-column: 1;
align-items: top
margin: 0}
.features p {grid-column: 2/-1;
margin-top: 4px;
margin-bottom: 40px;
align-items: center;
margin-left: 0}
h3 {margin-bottom: 0;
margin-top: 0}
video {display: block;
margin: auto;
width: 60%}
#pricing {display: flex;
justify-content: space-evenly;
text-align: center;
margin-top: 60px}
.price-card-1, .price-card-2, .price-card-3 {border: 1px solid black;
border-radius: 2px}
h4 {background-color: lightgrey;
padding: 5px 35px;
margin: 0;
display: block;
font-weight: 550;}
p{margin: 10px}
.price-button {border: none;
background-color: #FAC213;
font-size: 16;
padding: 6px;
margin-bottom: 10px;
transition: background-color 1s}
footer a {text-decoration: none;
color: black;
}
footer {display: block;
background-color: lightgrey;
margin-top: 50px;
text-align: right;
padding: 10px}
.link {display: inline-block;
margin-bottom: 3px}
.copy {display: block;
color: grey;
font-weight: 200;
font-size: 13;
margin-top: 3px}
@media only screen and (max-width: 800px) {
nav ul li {margin-left: 20px;}
header {
padding: 10px 20px 10px 20px}
main {margin: 0 60px}
@media only screen and (max-width: 600px) {
header {
padding: 0px;
max-width: 90%}
#header-img {width: 200px;
Height: auto;
margin: 0;
}
main {margin: 0 30px }
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: