Stuck on Add Borders Around Your Elements

HTML-CSS
1

Tell us what’s happening:

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .think-green-border {
    border-width: 10px;
    border-color: green;
    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="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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15.

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

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

These are the kind of mistakes that make you want to put your fist through the monitor. Don’t worry, we all make them. You just make fewer of them and get better at finding them. But you’ll always make them.

Notice the spelling on the class name.

3

First of all you create a .thick-green-border class inside a style element. After that you give a value like as,

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

Then this .thick-green-border class inherit in a img element…See below

example

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

Notice: your .thick-green-border class inside a another .smaller-image-border class


you see above the example how i’m inserting the another class within a same class

4

Please don’t just "answer the question. This is a learning forum - if you just give them an answer, they are denied the chance to figure it out. And when you do post code that is part of the answer, please put it in [spoiler] tags so it hides it from people accidentally seeing the answer. I’ve added them for you this time.

5

oky. :+1: @kevinSmith

1 Like