Add Borders Around Your Elements -Thick-Green-Border

Add Borders Around Your Elements -Thick-Green-Border
0.0 0

#1

Tell us what’s happening:
I was trying to follow the directions as closely as I could and I am not getting a change on the element. I actually just went to element above the newly added element that had the same class name and added it border there and it works fine in view. Not really sure what I am missing.

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;
  }
  .smaller-image {
    width: 100px;
    border: 10px solid green;
  }
  .thick-green-border {
    
  }
 
  
</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" class="thick-green-border"  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="/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_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/add-borders-around-your-elements


#2

Your thick-green-border class doesn’t have any styling in it. Your smaller-image class has border attributes.


#3

Thats what I am saying, The border works there, it doesnt work in the other class.


#4

img src="https://bit.ly/fcc-relaxing-cat" class="smaller-image thick-green-border"

There is no issue… I can’t read… hahaha thanks