Tell us what’s happening:
I technically completed the project but my preview looks kinda plain & sad. I don’t understand why my image & video are not showing up in the preview window.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link rel="stylesheet" href="styles.css"></link>
<head>
<header id="header">
<img class="logo" id="header-img" src="https://images.app.goo.gl/VFfwtjX9tE7iA3kg7" ></img>
<nav id="nav-bar">
<li><a href="#section1" class="nav-link" id="section1">Section1</a></li>
<li><a href="#section2" class="nav-link"
id="section2">Section2</a></li>
<li><a href="#section3" class="nav-link"
id="section3">Section3</a></li>
</nav>
</header>
</head>
<br></br>
<body>
<video class="video" id="video" src="https://youtu.be/RApA9zDgXjw"></video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" placeholder="enter email" type="email"></input>
<br></br>
<input id="submit" type="submit"></input>
</form>
</body>
</html>
/* file: styles.css */
html {
background-color: lime;
height:100vh;
width: 100vw;}
#header {
position: fixed;
width:100%;
top: 0;
left: 0;
color: navy;
font-family: 'Exo 2', sans-serif;
padding: 1em;
display: flex;
justify-content: space-around;
align-items: center;
background-color: PaleGreen;}
#header-img {
width: 50%;
height: 50%;
position: relative;}
body {
}
.video{
}
@media (max-width: 600px) {
flex-wrap: wrap;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: