Display images in Product Landing Page

HTML-CSS
1

First time on the forum, something is bothering me. Happy with my progress so far in some of the projects, however struggling to get images to display in the preview panel for the “Build a Product Landing Page” project.

Am I missing something? I found an image of a logo I wanted to use for the header and copied the info from google images as the src attribute. I just get like an image of a broken picture.

Not sure if there is a copyright issue, im missing something from HTML or I should be using CSS.

Any help for a newbie would be mucho appreciated.\

Cheers

2

Can you post your full code? Cant help without it.

3

Thanks for getting back to me,

Can you see the code on this link?

Again, newbie.

Cheers

4

To post code you need to wrap it in three backticks ```.

5

Alabastor does this work?


<!DOCTYPE html>
<html>
<!-- Lik to CSS Stylesheet below -->
<link rel="stylesheet" href="styles.css">

<!-- Link for Google Font below-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300&family=Work+Sans:wght@200&display=swap" rel="stylesheet">

<!-- Header Element -->
<div>
<header id="header" class="header"> Elixir Strings 

<!-- Image Element within Header-->
<img id="header-img" class="header-img" src="https://images.app.goo.gl/McZ1PMCzhvjs7fF67">
<div>
<!-- Navigation Element--> 
<nav id="nav-bar" class="nav-bar">
  <ul>
    <li> 
      <a class="nav-link" href="#features"> Features </a>
      </li> 
    <li>
      <a class="nav-link" href="#how it works"> How it Works </a>
      </li>
    <li>
      <a class="nav-link" href="#pricing"> Pricing </a>
      </li> 
   </ul>  
  </nav>

<!-- Navigation Link Element to be completed in here-->

</div>
</header>

<body>

<!-- How it works Video Element --> 

<div>
<video id="video" class="video" src="https://www.youtube.com/watch?v=Ey_AUwCRPsw" >
</div>

<!-- Form Element - Email-->
<div> 
<form id="form" class="form" action="https://www.freecodecamp.com/email-submit">
<p id="email-text" class="email-text"> Ready to go. Whenever, Wherever. Elixir Strings </p>

<div>
  <input id="email" class="email" type="email" name="email" placeholder="Enter your email here">

<!-- Form Element - Submit Button -->
<div>
  <input id="submit" class="submit" type="submit">
</div>



</form>


  </div> 





</div>








</body>







</html>
6

Where does the link take you to? it was supposed to take you to an image, instead it took me to a webpage. But The image is there in the web page, right click and see whether you have an option to open the image in a new tab. Then copy the image link.

7

Cryptic X, All good, I have got it sorted. I was copying the image link instead of the image address.

Cheers

8

Similar issues with getting my video to display in the console, Code below, any help is appreciated

<!DOCTYPE html>
<html>
<!-- Lik to CSS Stylesheet below -->
<link rel="stylesheet" href="styles.css">

<!-- Link for Google Font below-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300&family=Work+Sans:wght@200&display=swap" rel="stylesheet">

<!-- Header Element -->
<div>
<header id="header" class="header"> Elixir Strings 

<!-- Image Element within Header-->
<!-- Note: you must right click and copy image address for it to show up -->
<img id="header-img" class="header-img" src="https://media.istockphoto.com/vectors/simple-guitar-logo-icon-vector-design-element-vector-id1009955646?k=20&m=1009955646&s=170667a&w=0&h=6P02nZTcyd35aqKOHyfB14XIA44qTX0SUKEwxmZSHtQ=">
<div>
<!-- Navigation Element--> 
<nav id="nav-bar" class="nav-bar">
  <ul>
    <li> 
      <a class="nav-link" href="#features"> Features </a>
      </li> 
    <li>
      <a class="nav-link" href="#how it works"> How it Works </a>
      </li>
    <li>
      <a class="nav-link" href="#pricing"> Pricing </a>
      </li> 
   </ul>  
  </nav>

<!-- Navigation Link Element to be completed in here-->

</div>
</header>

<body>

<!-- How it works Video Element --> 

<div>
<video id="video" class="video" src="https://youtu.be/Ey_AUwCRPsw" >
</div>

<!-- Form Element - Email-->
<div> 
<form id="form" class="form" action="https://www.freecodecamp.com/email-submit">
<p id="email-text" class="email-text"> Ready to go. Whenever, Wherever. Elixir Strings </p>

<div>
  <input id="email" class="email" type="email" name="email" placeholder="Enter your email here">

<!-- Form Element - Submit Button -->
<div>
  <input id="submit" class="submit" type="submit">
</div>



</form>


  </div> 





</div>








</body>












</html>
9

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