Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I am stuck on adding ‘src’ to the #video attribute. I thought it was like this:

<video src=“”></video>

Well something like this. Maybe I am missing a simple step.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <header id="header">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>A Best Friend</title>
<h1>A True Friend</h1>
<p>
  Some people say that a dog is a man's best friend.
</p>
<img id="header-img" src="https://images.unsplash.com/photo-1587463272361-565200f82b33?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="image" width="200"></img>
<section>
<table>
<nav-bar id="nav-link">
</nav-bar>
<nav id="nav-bar">
  <ul>
    <li>
  <button>
    <a class="nav-link" href="/video">Video</a>
  </button>
  </li>
  <li>
  <button>
    <a class="nav-link" href="/form">Form</a>
    </li>
  </button>
  <li>
  <button>
    <a class="nav-link" href="/footer">Footer</a>
  </button>
  </li>
</nav>
</ul>
</table>
</section>
  </header>
  <body>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<email name="email">Type Your Email</email>
  <p><input type="text" name="email" placeholder="enter email"id="submit"id="email"></input></p>
  <iframe id="video"></iframe>

  <video type="button"src="image.jpg"></video>
  <button>
  <submit type="button">Submit</submit>
  </button></form>

<section class="about">
  <h1>About</h1>
<footer id="footer"></footer>
<p>
  <ul>
    <li id="location">
  <h4>Location</h4>
<p>Originated from one of the southern tri-city areas.</p>
    </li>
    <h3>Contacts</h3>
    <li id="contacts">

<p>Contacts hidden their information</p>
    </li>
  </ul>
</p>
</section>

  </body>
</html>

/* file: styles.css */
*{
  margin: 0;
  padding: 0;

  font-family: ariel, sans-serif;
  font-size: 20px;
}
.smaller-img{
width: 600em;
}
.header{
  position: fixed;
  top: 0;
}
.nav-link{
  color: green;
}
.button{
  background-color: lightblue;
}
.header-img{
  width: 10px 20px;
  border: 100px 200px;
}
.h1, .p, .h3{
  font-size:  1em;
}
@media screen and (max-width:320px){
body{
  background: beige;
  text-align: center;
}
}
.img{
  display: flex;
}
.ul{
  margin: 0;
  padding: .5em;
}
.li{
  margin: 0 1em;
}
.table{
  border-width: 2px solid rgb(255, 155, 155);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Mobile/15E148 Safari/604.1

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Use the </> editor’s button to format code properly. We don’t see what you did with the ‘src’ attribute in your post.

4

This is where I’m at. Maybe the ‘src’ isn’t the right one.

5

I figured it out. The instructions suggested to use ‘iframe’ or ‘video’ elements for the video ‘id’. I used iframe and my src did not pass because of me using the iframe element instead of the ‘video’ element. Well, that’s what I came up with.

6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

You can still use the iframe element.
The sample project that freeCodeCamp provides is using that iframe.

So you might have run into some syntax errors and that might have been why it wasn’t passing.

Regardless, I am glad you were able to resolve your issue. :+1:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.