Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I’m a little rusty regarding my CSS code, and I’m having trouble with a few steps.

  1. “nav-bar should always be at the top of the viewport” Again, thought it was.
  2. Media querry must be used at least once.
  3. CSS Flexbox should be used at least once.

Your code so far

<!-- file: index.html -->
<DOCTYPE! html>
  <html rel="styles.css">
<header id="header">
  <nav id="nav-bar">
    <a href="#section1">
    <div class="nav-link" id="nav-1">1</div>
    </a>
    <a href="#section2">
    <div class="nav-link" id="nav-2">2</div>
    </a>
    <a href="#section3">
    <div class="nav-link" id="nav-3">3</div>
    </a>
    <a href="https://www.dc.com">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/DC_Comics_logo.svg/300px-DC_Comics_logo.svg.png" id="header-img"></img>
  </a>
  </nav>
</header>
<section id="section1">
  <video src="https://youtu.be/PMK1vinQdEA?si=NNAm11Buu_2uzOv1" id="video"></video>
  </section>
<section id="section2">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  <input id="email" type="email" placeholder="johndoe@johndoe.com" name="email">
  </input>
  <p>Input</p>
  <input id="submit" type="submit"></input>
  </form>
  </section>
<section id="section3">
  </section>

/* file: styles.css */
.video {
  width: 300px;
  height: 100px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You are missing head, link, and body tags in your html .
@comiccultured

3

There are several errors in your HTML code:

  1. DOCTYPE Declaration: The correct declaration should be <!DOCTYPE html> instead of <DOCTYPE! html>.

  2. <html> Tag: The rel attribute is not valid for the <html> tag. It should be removed.

  3. <header> Tag: The opening <header> tag is missing the closing angle bracket >. It should be <header> instead of <header.

  4. <a> Tag: The <a> tag wrapping the DC Comics logo is not closed properly. Add </a> after the <img> tag.

  5. <img> Tag: The <img> tag is not self-closed properly. Instead of <img></img>, it should be <img />.

  6. <video> Tag: The src attribute of the <video> tag should point to a video file, not a webpage URL like YouTube. If you want to embed a YouTube video, you’ll need to use the YouTube embed code or iframe.

  7. Closing Tags: The closing </input> tags for the input elements are not necessary. Input elements are self-closing and should not have closing tags.

4
  1. Fixed
  2. Fixed?
    <|html|>
    <|link rel=“stylesheet” href=“styles.css”|>

Ignore the “|” they’re just so the code appears
3. The closing tag is after the id.
4. Fixed
5. Fixed
6.How would I embed a video file?
7. Fixed

5

Update: I finished #3

6

To embed a video from YouTube into your HTML page, you can use an iframe element with the src attribute set to the YouTube video’s embed URL. Here’s how you can do it:

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded YouTube Video</title>
  </head>
  <body>
    <h2>Embedded YouTube Video</h2>
    <!-- Replace VIDEO_ID with the actual ID of the YouTube video -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

Replace “VIDEO_ID” in the src attribute with the actual ID of the YouTube video you want to embed. You can find the video ID in the URL of the YouTube video after the “watch?v=” part. For example, if the URL of the YouTube video is “https://www.youtube.com/watch?v=VIDEO_ID”, then “VIDEO_ID” is the ID you need to use.

You can also customize the width and height of the iframe to fit your layout. Additionally, the frameborder attribute sets whether the iframe should have a border or not, and the allowfullscreen attribute allows the video to be viewed in fullscreen mode.

1 Like
7

WE DID IT LETS GOOOOOOOOOOOOOO

1 Like
8

Just for reference. If you click the Share button on the YouTube video it gives you an Embed button that gives you all the code.

2 Likes
9

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