Turn an Image into Link

Turn an Image into Link
0.0 0

#1

Why this shit isn’t working
? :confused:

Your code so far

<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 class="thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " ></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>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0.

Link to the challenge:


#2

The error message in the tests on the left are not telling you the whole story. You seem to have changed the original img tag html. The original starting code for the img tag was:

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

Your current code is missing the “smaller-image” class in your img tag’s class attribute.


#3

I’ve figured that out already. I had to use double quotation mark whereas I used single. And missed the class of smaller image also.
Thank you btw :slight_smile:


#4

You had to use double quotes for what part? You can use either single quotes or double quotes when surrounding an attribute’s value. Both quotes quotes must be the same type (either both double or both single).


#5

Look at the hash tag. I used sigle quote there and look at the next attribute,I used double quote there. Thanks. :slight_smile:


#6

Yes, the single quote/double quote issue was not why you were failing the test. You failed the tests, because your code was missing the “smaller-image” class in the img tag’s class attribute.


#7

You can’t say quotes don’t matter(not mandatory to use similar ones).


Look at this one. I must have to use double quote there(at right). But I could use single quote instead of double(at left) also.


#8

When you write:

class="smaller-text' thick-green-border"  

the part in between " " or ’ ’ is what matters. Only the thick-green-border class will be applied to the img element, because smaller-textis not one of the class names in the style section. The on the end of smaller-text just becomes part of the first class name.