Help me pass the CSS Border TEST please

this is my code , so ive done first 2 things , but the last 3 errors i cant solve them
1)Give your image a border width of 10px.
2)Give your image a border style of solid.
3)The border around your img element should be green.

Can someone PLEASE make the correct code and upload it here?

You have a typo. It should be thick not think;

You have a typo, your CSS is think-green- border, while your class on the img is thick-green-border

i fixed it but the code still not working

fixed it but code still not working

You should add additional class to given img and not create another img yourself.

how to do it? can you write me the correct code here? please

The class also needs to be inside the same element as the img

Daniel , can you write me the correct code please? so i can see where is my error, cause i`m a neewbie…

Just delete that img element that the class is in and put it after class=“smaller-image”

Instead of creating a separate <img class="thick-green-border"> tag. add thick-green-border class to your previous tag. that is. in the smaller image tag, add class thick-green-border, you can do it by putting a space after smaller-image and write thick-green-border to it. it should look like: class="smaller-image thick-green-border". Hope it will work.

2 Likes

[quote=“saqibameen09, post:12, topic:52976”]
class="smaller-image thick-green-bo

thank you a lot it worked)))

Glad it helped you! :slight_smile:

you can try like this :slight_smile:

<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;
  }

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

</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 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>

Thanks

Please take the time to read all of the thread before posting and also look at the date of the thread as well. This is a 3-year-old thread that was already resolved.

Secondly, please avoid posting solutions to challenges. Try to help people by guiding them to the solution, not just posting the solution. Thank you.