CSS resize the image

[laohu]

unable to complete the task: only one of the two tasks completed successfully.
not sure where to put the .smaller-class element in the image class

``` .smaller-image{ width: 100px; }``` .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; }

CatPhotoApp

Click here to view more cat photos.

<a href="#"><img class="smaller-image"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>

<ul>

  <li>cat nip</li>

  <li>laser pointers</li>

  <li>lasagna</li>

</ul>

<p>Top 3 things cats hate:</p>

<ol>

  <li>flea treatment</li>

  <li>thunder</li>

  <li>other cats</li>

</ol>

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

<label><input type="checkbox" name="personality" checked> Loving</label>

<label><input type="checkbox" name="personality"> Lazy</label>

<label><input type="checkbox" name="personality"> Energetic</label><br>

<input type="text" placeholder="cat photo URL" required>

<button type="submit">Submit</button>

.

  **Your code so far**

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

.smaller-image{
  width: 100px;
}
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Challenge: Size Your Images

Link to the challenge:

freeCodeCamp.org

[D3Z]

HI!
your inline css looks great so far,

in your href tag, make sure you only have one set of img. so class and source should actually be declared within the same element. <img class= “” src="" alt="" …>

[stefan2007octavian]

Hello @laohu !
First you must delete ><img from <img class="smaller-image"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg >
Then add a " after src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg ( )

[LucLH]

Your CSS is good. The issue is just that you created another img tag. You can just add the class parameter to the second img tag of the original code. The tag image means that you are gonna show an image, so one image, one tag, two images, two tags etc.

Your code:

<a href="#"><img class="smaller-image"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

What it should be:

<img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

Voilà

[laohu]

your code has done the trick many thanks to you

| LucLH
January 21 |

• | - |

Your CSS is good. The issue is just that you created another img tag. You can just add the class parameter to the second img tag of the original code. The tag image means that you are gonna show an image, so one image, one tag, two images, two tags etc.

Your code:

<a href="#"><img class="smaller-image"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

What it should be:

<img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt="A cute orange cat lying on its back."></a>

Voilà

[LucLH]

Your welcome @laohu, don’t forget that alt is a property of the img tag and not a tag itself