Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

On step 6, The step directs you to have a main element within the body, yet I do. It simply is not registering that I do.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Build an Event Flyer Page</title>
  <link href="styles.css" rel="stylesheet"/>
</head>

<body>
  <header>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
    <!-- <hr> -->
    <h1>Monthly Activities</h1>
  <main>
      <section>
        <h2>Day 1 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 2 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 3 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 4 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 5 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 6 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 7 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <hr>
      <h2>Extra Activities</h2>
      <!-- make the above h2 an h1 -->
      <section>
        <h2>Day 8 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 9 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 10 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 11 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <hr>
  </main>
  </header>
  <footer>

  </footer>
</body>

</html>

/* file: styles.css */
section{
  width: 100%;
}

body {
  min-height: calc(100vh - 100px);
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  
}

hr {
  width: 100%;
  height: 100%
  margin: 10%;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

Welcome to the forum @webdev3000

Is main a child element of the body element?

Happy coding

3

yes it is, I even tried nesting it directly after the body element but then it fails because it requires an img and h1 after the body.

4

Are you sure?

Try unindenting all the elements, then indent all the elements, giving all the child elements of each parent element an extra indent.

1 Like
5

Thanks for the recommendation, however that didn’t appear to work.

6

Indenting was to help see the relationship between parent and child elements.

Where is the closing headertag?

7 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Build an Event Flyer Page</title>
    <link href="styles.css" rel="stylesheet"/>
</head>
<body>
    <header>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
    <!-- <hr> -->
    <h1>Monthly Activities</h1>
    <main>
      <section>
        <h2>Day 1 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 2 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 3 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 4 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 5 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 6 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 7 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <hr>
      <h2>Extra Activities</h2>
      <!-- make the above h2 an h1 -->
      <section>
        <h2>Day 8 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 9 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 10 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <section>
        <h2>Day 11 - Lorem ipsum dolor sit amet eos erat placerat duo.</h2>
      </section>
      <hr>
      </main>
    </header>
    <footer>

    </footer>
</body>

</html>
8

you should not have the main inside header

1 Like