Learn HTML by Building a Cat Photo App - Step 62

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<html>
  <body>
    <main>

<footer>
  <h1>CatPhotoApp</h1>
  <section>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
    <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  </section>
  <section>
    <h2>Cat Lists</h2>
    <h3>Things cats love:</h3>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <figure>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
      <figcaption>Cats <em>love</em> lasagna.</figcaption>  
    </figure>
    <h3>Top 3 things cats hate:</h3>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
    <figure>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
      <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
    </figure>
  </section>
  <section>
    <h2>Cat Form</h2>
    <form action="https://freecatphotoapp.com/submit-cat-photo">
      <fieldset>
        <legend>Is your cat an indoor or outdoor cat?</legend>
        <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
        <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
      </fieldset>
      <fieldset>
        <legend>What's your cat's personality?</legend>
        <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
        <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
        <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
      </fieldset>
      <input type="text" name="catphotourl" placeholder="cat photo URL" required>
      <button type="submit">Submit</button>
    </form>
  </section>

</main>
```
</footer>
```

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 62

Link to the challenge:

Hint

Your footer element should be below the closing main element tag. You have put it somewhere else.
I followed the instruction, but received this error. I don’t know what’s wrongPreformatted text

2

hi there,
we can just see the closing tag of that footer element. Where had the opening-tag been gone ?

3
```

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

A cute orange cat lying on its back.

Cat Lists

Things cats love:

  • cat nip
  • laser pointers
  • lasagna
A slice of lasagna on a plate. Cats love lasagna.

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Five cats looking around a field. Cats hate other cats.

Cat Form

Is your cat an indoor or outdoor cat? Indoor Outdoor What's your cat's personality? Loving Lazy Energetic Submit ```
4

How do I reply with the code to show you what i did?

5

you can write three backticks ``` a line above and one line below your code, to drag and drop it between.

7
```

CatPhotoApp

``` Is this what you want to see. I don't know how to drag and drop
8

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Also, you should paste your entire HTML when asking for help.

1 Like
9

I already posted with my code, so i guess i’m not able to do it again unless i can delete my previous post

10

You can paste your HTML in here as often as you like. There are no restrictions.

From looking at what you have at the very top of this thread, I think you put the opening <footer> tag in the wrong place. The instructions say:

“After the main element, add a footer element.”

This means that both the opening and closing footer tags must come after the main element. And remember, the main element includes the opening <main> tag, its closing </main> tag, and everything between those two tags. So the opening <footer> tag must be placed after all of those. You appear to have placed it in between the opening and closing main tags.