Tell us what’s happening:
Describe your issue in detail here.
Your code so far
I am trying to get the video and images to appear but I am having a hard time with this. How can I do that?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<header id="header">
<h1>Pianos-to-go</h1>
<img id="header-img" src="https://www.shutterstock.com/image-photo/black-white-piano-keys-taken-260nw-1938715912.jpg"alt="piano" width="300"height="100"></img>
<div class="flex container">
<div></div>
<div></div>
<div></div>
</div>
<nav id="nav-bar">
<nav class="nav-link"><a href="https://www.freecodecamp.com/features">Features</nav><nav class="nav-link"><a href="https://www.freecodecamp.com/How-it-works">How it works</a></nav><nav class="nav-link"><a href="https://www.freecodecamp.com/Pricing">Pricing</a></nav></nav>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</header>
<form id= "form" action="https://www.freecodecamp.com/email-submit" method="get" class="form-example">
<div class="form-example">
<label for="email">Email address:</label>
<input id="email" name="email"
type="email" placeholder="Enter email here." required></div>
<div class="form-example"><input id="submit" type="submit" value="submit">
</form>
<iframe id="video" src="https://pixabay.com/videos/piano-keyboard-anonymous-composer-3487/"></iframe>
<div class="photo">
<img src="https://www.pexels.com/photo/close-up-photo-of-person-playing-piano-1246437/" alt="Fingers on the piano" width="200" height="200"></img>
<img src="https://pixabay.com/images/id-7118629/" alt="Man playing piano" width="200" height="200"></img>
<img src="https://pixabay.com/images/id-78492/" alt="Child playing piano" width="200" height="200"></img>
</html>
/* file: styles.css */
html{background-color:#CCCFFF;}
header{
text-align: center;
text-transform: uppercase;
padding: 40px;
background-color: #0a0a23;
color: #fff;
border-bottom: 6px solid #fdb347;
}
#header-img{
padding:5px 5px;
width:300px;}
h1{font-family:Garamond;font-size: 32px;
font-color:black;
border: 10px;
padding: 20px;
display:inline;}
#nav-bar{font-family:Georgia;
font-color: #39034B;
font-size:30px;
display:inline;}
.nav-link{font-size:20px;
border: 3px
background-color:#CE33FF;
padding: 20px;
display:flex;}
.img{border: 4px;}
#form{font-size:20px; padding: 20px;}
#email{font-size: 20px; padding: 2px;}
#submit{padding: 2px;margin-top: 5px;
margin-bottom: 5px 0px;}
#video{padding: 24px;margin-top: 15px;
margin-bottom: 15px 0px;}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
