Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
how can i import image or video clip to freeCodeCamp

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header id="header">
      <img id="header-img" /> 
      <nav id="nav-bar">
      <h3>Diverse_Collection</h3>
        <ul class="lists">
      <li><a href="#Home" class="nav-link">Home</a></li>
      <li><a href="#About" class="nav-link">About</a></li>
      <li><a href="#Pricing" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
      <video id="video">
        
      </video>
    </header>
  </body>
</html>
/* file: styles.css */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html{
font-size: 100%;
}

body{
 font-family: sans-serif, times new roman;
background: #fffdea;
color: #333333;
}

#header{
background: #ffffff;
padding: 1rem;
}

#nav-bar{
display: flex;
align-items: center;
justify-content: space-between;
}

#nav-bar h3{
  font-size: 1.5rem;
  font-family: mooli;
  color: orange;
}

#nav-bar ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: 1.3rem;
}

#nav-bar ul li{
  list-style: none;
  padding: 15px;
}

#nav-bar ul a{
  text-decoration: none;
  color: black;
}

#nav-bar ul a:hover{
  background: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You can’t store image/video files directly on FCC so, if you wish to include images or videos in code which is hosted on FCC, you will need to use a hosting site and then link to the images/videos via an attribute in your HTML element.

EXAMPLE:

<!-- linking to an image hosted on flickr -->
<img src="https://live.staticflickr.com/65535/50576392253_713a1b67b8_b.jpg" alt="a baby badger">

<!-- linking to a video on YouTube by copying and pasting the 'embed' code -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/NL6CDFn2i3I?si=7Oufowm1Dld9ImsB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

a baby badger

Please tell me what the FCC is because I have no idea.

Hello!

Pixabay and Pexels offer free use of pictures and videos from their sites. Some You Tube videos may be available for you to use, too.

I hope this helps you.

Happy coding! :slight_smile:

FCC=freeCodeCamp. I just use the shorthand to save typing.

Ok
thanks alot.
But please, if it’s my own picture or video I want to use, how will I import it?

1 Like

please dont get obsessed by me :pray: :pray: i dint understand what you mean.

ok
Thank you, sir. :pray: :pray:

1 Like

If you were building webpages locally (i.e. on your machine), you would store all of the image/video (and other associated files) locally too. Then, when you want to host your site online somewhere, you would upload all files to the hosting site, including your HTML/CSS, images/videos etc.

When you’re building a webpage on FCC, there isn’t the option to upload associated files, so instead you need to host those files using hosting services. You then link to those files as I described above.

There are many image and video hosting sites available (and often free to use). YouTube is one of the best-known video hosting sites and flickr one of the best-known image hosting sites. There are many, many others to choose from though. To use them, you just need to create an account and then upload your images/videos. Then you can link to them in an HTML document using a direct link to the image/video on the hosting site (as above).

1 Like

OK
Thanks a lot. Now I’ve got you, but please let me try. If there is any problem, I will let you know.

1 Like

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