Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

For the Product Landing module… I am attempting to add my own Logo, Pictures and Video which I stored on YouTube, and added the links (captured from YouTube) to my application… and while they show up if I provide the link on firefox, the links don’t work on the FCC application… what am I doing wrong? How do I make my links work here?

Your code so far

<!-- file: index.html -->
<!-- boilerplate -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
  <body></body>
  <main>
    <header id="header">
      <img id="header-img"
      src="http://youtube.com/post/UgkxPXv1QPsUsK3yCzSL5QEe5kRG7ocRya-o?si=iR5bkGfEgTtwAFHo" />
        <h1>View from the Loft</h1>
        <nav id="nav-bar">
        <ul>
          <li class="nav-link"><a>Merch</a></li>
          <li class="nav-link"><a>Training</a></li>
          <li class="nav-link"><a>Humour</a></li>
        </ul>
      </nav>

    </header>
    <form id="form">
      <section>
        <div class="gallery">
      <img src="http://youtube.com/post/UgkxYVzOzno6hebFHdoGIG3CV0ErT65dZyA9?si=wDOoETkDTQHLlpbJ">
      <img  src="http://youtube.com/post/UgkxYVzOzno6hebFHdoGIG3CV0ErT65dZyA9?si=At9MD4oGohK6mF-j">
      <img  src="http://youtube.com/post/UgkxzqqyOQxASO59bo_ZHU6ES1lXd_RJnV_z?si=fa1kRcwMAqIRC1Qe">
      
      
    </div>

      </section>
      <section></section>
      <section><section>
    </form>
  </main>
</html>


/* file: styles.css */
nav {
  width: 50%;
  max-width: 300px;
  height: 50px;}

nav > ul {
 display: flex;
  justify-content: space-evenly;  
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}
nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}



header {
  width: 100%;
  height: 50px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to the forum @michael.douglas.math

Try opening the first img url in you browser.

Happy coding

3

I can open my Logo (*.ICO file), all three pictures and the video with the URL provided by Youtube … in Edge and Firefox … the URL does seem long (eg https://www.youtube.com/channel/UCw3KlAqdxNcZvAGsu0pqV_Q/community?lb=UgkxzqqyOQxASO59bo_ZHU6ES1lXd_RJnV_z ) and likely the first images I have posted on YouTube - so there may be something I am doing wrong - as it not only brings me to the picture but the actual channel as well… but in either case everything appear as tiny little icons and if I include the “alt” … the application always shows the alternate text rather than the image

4

IT was me… I figured out how to get the actual picture link… .not the channel PLUS picture link… and it works