I got half of this challenge. I need help with the rest

HTML-CSS
1

Hey, guys for this challenge I got the green background and I thought i was all good. However, I am not passing. These are the errors I keep getting :
Your form element should have the id of cat-photo-form .

Your form element should have the background-color of green.
Here is my code:

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

  }

  .thick-green-border {

    border-color: green;

    border-width: 10px;

    border-style: solid;

    border-radius: 50%;

  }

  .smaller-image {

    width: 100px;

  }

  .silver-background {

    background-color: silver;

  }

   form { background-color: green;

 }

</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 class="silver-background">

    <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" background-color ="green" id="cat-photo-form "><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>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

3

thank you I had no idea

4

You are trying to add inline css but you should change your code:
Before:

<form action="/submit-cat-photo" background-color ="green" id="cat-photo-form">

After:

<form action="/submit-cat-photo" style="background-color:green;" id="cat-photo-form">

But actually, challenge ask you to use id tag to customize your css in your style. So the right answer is :

#cat-photo-form {
    background-color: green;
  }

Happy coding :slight_smile:

2 Likes
5

Challenge : Try giving your form, which now has the id attribute of cat-photo-form , a green background.

So, you need to assign background-color: green; to the id #cat-photo-form .

Use below css rule within <style>....</style> tags.

#cat-photo-form {           
      background-color: green;
}

Before that you need to fix three things in the code you given.

  1. Remove form { background-color: green; }
  2. Remove background-color ="green" rule in your form element.
  3. Remove the space ( id="cat-photo-form "> )before the closing quotation in your id attribute value.

Hope this helps you. Best wishes.

1 Like