Turn an Image into a Link2

Turn an Image into a Link2
0

#1

Tell us what’s happening:

I can’t seem to get pass this phase.

Your code so far

<a href="#">
  <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36.

Link to the challenge:


#2

What have you tried? It doesn’t look like you’ve done anything to make the image a link.


#3

The instructions include:

Nest the existing img element within an a element.

It looks like you’ve moved the img element to the top of your code, so the test fails.


#4
Three kittens running towards the camera.

placed just above the two bottom paragraph elements in the challenge does not pass either.

It works here

I put it into Visual code and it works fine also. I can see from the view on the right of the code in the challenge that it is working as well, but it does NOT pass.


#5
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#">
  <img src='//discourse-user-assets.s3.amazonaws.com/original/3X/3/c/3c47237055bb6d7d55434a9f85a2c0ae6bfc14e0.jpg' alt="Three kittens running towards the camera."></a>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

#6

I didn’t know exactly how to use this. I tried just referencing the forum answer that said the code was failing because someone moved it to the top of the code.
Moving it to just above the bottom twom paragraph elements in the code did not pass either.
This, even though you can see that the code does work and is visible here.
I then tried to copy the entire code from the challenge window, but it printed the style elements out (perhaps a <! doctype html> entry is needed at top).
Anyway, again, you can see that the code works here. As I mentioned, it works in Visual Code and renders to the browser from Live Server perfectly.

It is just in the rendering window on the right of the challenge code page that does not work.

Oh, and clicking on the Get a hint button takes you to a discussion that is not about this topic at all.

Thanks.


#7

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#8

Place the existing image element within an anchor element.

I suggest resetting the challenge and starting again, reading the instructions carefully. You don’t need to move anything. You just need to put the image tag that is already there inside an anchor tag.


#9

Oh thanks, I see. I complicated things by copying the example code. I hadn’t noticed that I was changing the image from the little cat lying on its back to the three kittens… Of course then it wouldn’t pass. What a fool of me! I couldn’t see it because the code I had was properly embedded in the anchor tag. Dumb. And thanks for the tip on using the back ticks, ``` to enter code in the forum.