How do I separate the classes so both are recognized instead of just the most recent?

HTML-CSS
1

The challenge asks to create a green border around the image. I’m able to properly get the border around the image but in doing so the image loses its 100px size. I’m wondering how to make sure both classes are recognized. It says something about separating the classes using but i’m not sure how to make my image and the border into class 1 and class 2. Been on this for a hour now, frustration starting to set in lol.

Your code so far


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

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
}
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

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

.smaller-image {
  width: 100px;
}
</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="thick-green-border" class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Add Borders Around Your Elements

Link to the challenge:

2

Hey man,
The first step: you have to create the class thick-green-border ( OK you created );
The second step: you have use two class in the tag img, the challenge freeCodeCamp to give one example <img class="class1 class2">.

Example:If you have the square-red and circle-blue classes with the implementation in the tag div, you can do :
<div class = "square-red circle-blue" > </div>

Any other questions be sure to ask, /o/

2 Likes
3

THANK YOU! I thought I had to label the classes somewhere else before I added them to the img tag