Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I’m having a difficult time adding my own logo on the Product Landing Page Project?
Your code so far

<!-- file: index.html -->
<header id="header">
<img id="header-img" >
<nav id="var-bar">
  <ul>
    <li>
    <a class="nav-link" href="#section-1">Section 1</a>
    </li>
    <li>
    <a class="nav-link" href="#section-2">Section 2</a>
    </li>
    <li>
    <a class="nav-link" href="#section-3">Section 3</a>
    </li>
  </ul>
</nav>
</header>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
<div id="section-3">Section 3</div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/5hrSoUmx4Bg?" si="SlqWEcKUVC4jKiP3" title="Youtube video player" frameborder="0" allow="accelerometer, autoplay; clipboard-write, encrypted-media, gyroscope,picture-in-picture, web-share"
allowfullscreen></iframe>
<form id="form">
<input id="email" placeholder="email"></input>
</form>

/* file: styles.css */

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hi!

I found a response to this same question by another used last year.

Here is the link with that response, if it still holds true.

If you have it online somewhere already, you may be able to link it that way with a link to it.

Happy coding! :slight_smile:

3

I think you need to take a look at how the img element works again. You have not added any src for it

4

I did now but I’m trying to figure out why my logo didn’t appear on the preview on my screen?

5

Where did you add it because its not in the code you shared

6 
<!-- file: index.html -->
<header id="header">
<img id="header-img" src="https://bpmcpldpdmajfigpchkicefoigmkfalc/views/app.html.jpg" width="176">
<nav id="var-bar">
  <ul>
    <li>
    <a class="nav-link" href="#section-1">Section 1</a>
    </li>
    <li>
    <a class="nav-link" href="#section-2">Section 2</a>
    </li>
    <li>
    <a class="nav-link" href="#section-3">Section 3</a>
    </li>
  </ul>
</nav>
</header>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
<div id="section-3">Section 3</div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/5hrSoUmx4Bg?" si="SlqWEcKUVC4jKiP3" title="Youtube video player" frameborder="0" allow="accelerometer, autoplay; clipboard-write, encrypted-media, gyroscope,picture-in-picture, web-share"
allowfullscreen></iframe>
<form id="form">
<input id="email"  name="email" placeholder="email" type="email">
<input id="submit" type="submit"></input>
</form>

/* file: styles.css */

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

7

Where did you get this image from?

8

From my phone I screenshot it

9

We dont have access to your phone so the image will never show up that way. The src attribute is telling the browser the path where to look for the image, and that path does not exist for us. You need to upload the image to an image hosting platform and use the src they give you

10

Ok but I have the photo in my computer file

11

Phone/computer. Either one will not show up because it saved locally to you. No one but you has access to your phone/computer. You upload the same file to an images hosting platform and use the src they give you

12

U telling me to use the FCC logo

13

This is what I am telling you. I dont know what your image actually is, but if you want to use an image saved on your computer or phone then this is what you have to do

14

I used the one they gave me Thank you :+1:

1 Like
15

I appreciate you helping me my name is Darwyn and I’m curious how you got started learning web development and became a Full Stack Developer?

16

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