I am having issues with this codes

HTML-CSS
1

Tell us what’s happening:

Your code so far


mage {
  width: 100px;
}

.silver-background {
  background-color: silver;
}
</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">

  <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_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes

2

Can you explain exactly where you are having trouble here ?

3

I don’t know what you wanted to write but this is not a valid css selector

4
  1. If you want to add CSS to the website, make sure you add <style> at the top.
  2. If you want to adjust the margin, you might want to see Basic CSS: Adjust the Margin of an Element.
  3. In this challenge, you should add value attribute to the label tag.
5

Something wrong with “mage”. Check it out.
Let say , your code looks like this:
<img id="mage"></img>

css should be
<style> #mage{ width: 100px; } </style>
Or
<img class="mage"></img>

Css should be
<style> .mage{ width: 100px; } </style>

Hope this helps.

6

Not sure why the code was copied like that unless you changed it yourself?

Anyway. The challenge is asking you to add the value attribute to each of the input elements and to use the label text, in lower case, for the value.

Part of the example code given:

<label for="indoor"> 
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

As you can see the input has the value attribute with the value of “indoor”, matching the label text in lower case.