Product Landing Page 1

Tell us what’s happening:
Describe your issue in detail here.
Anybody knows how to insert this video: Roman Carnival Overture Op. 9 for Five Trombones
into the website?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Landing Page</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />   
  </head>
  <body>
    <main>
      <header id="header">
      <div class="logo">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png " alt="logo"
      </div>
      <nav id="nav-bar">
        <a class="nav-link" href="#Features">Features</a>
        <a class="nav-link" href="#How it works">How it works</a>
        <a class="nav-link" href="#Pricing">Pricing</a>
      </nav>
      </header>
    </main>
  </body>
  <h2>Handcrafted, home-made masterpieces</h2>
  <form id="form">
    <input id="email" name="email" type="email" placeholder="Enter your email here" required>
    </input>
    <input id="submit" type="submit" value="Get Started"></input>
  </form>
  <div id="Features"><strong>Premium Materials</strong>
<div>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</div>
<div id="Features"><strong>Fast Shipping</strong>
<div>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.</div>
<div id="Features"><strong>Quality Assurance</strong>
<div>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.</div>
<video id="video"
controls>
<source src="<iframe width="560" height="315" src="" >

</video>
/* file: styles.css */
html{
box-sizing:border-box;
}
#header-img{
height:40px;

}
#nav-bar{
float:right;


}
.nav-link{
text-decoration:none;
color:black;
margin:5px;

}
.nav-link:hover{
background-color:#99c9ff;
color:white;

}
h2{
text-align:center;
}
#email{
width: 50vw;
 margin-left : 25vw;
 
}
#submit{
background-color:rgb(255, 215, 0);
width: 50vw;
 margin-left : 25vw;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

You can use the <iframe> element.

This is a documentation of iframe

1 Like

Thank you, you are the best