Build an Event Flyer Page - Build an Event Flyer Page

Curriculum Help
1

Tell us what’s happening:

I’m failing on load of tasks

  1. You should have a main element within the body element.
  2. Your body element should have a top and bottom padding of 50px.
    Failed:11. Your body element should have a top and bottom margin of 0.
    Failed:12. .-Your body element should have a left and right margin of auto.
    Failed:13. Your body element should set its width using vw.
    Failed:14. Your body should use calc to set its min-height to 100vh - 100px
    Failed:16. The width of your hr elements should be set using

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">
  <link href="stylesheet.css" rel="stylesheet">
  <title>Build an Event Flyer Page</title>
</head>

<body class="body">
  <!-- Header -->
  <header>
    <img alt="header-img" src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
    <h1 class="header">Pet Rock Festival</h1>
    <p>Join us for the first annual Pet Rock Festival!</p>
    <p><strong>When</strong>: October 3rd <strong>Where</strong>: Boulder Park</p>
  </header>
  <hr>
  <main>
    <div class="container">
      
        <section class="section1">
          <h2>Festival Highlights</h2>
          <ul>
            <li>Pet Rock Obedience Shows</li>
            <li>Best Dressed Pet Rock Contest</li>
            <li>Pet Rock Uphill Racing</li>
          </ul>
         </section>
         <section class="section2">
           <h2>Special Guests</h2>
           <ul>
             <li>Nick The Brick</li>
             <li>Wendy Cobblestone</li>
             <li>John Gravel</li>
           </ul>
         </section>
      </main>
    </div>
   <body>
 </html>

/* file: styles.css */
body {
    padding: 50px 0;
    margin: 0 auto; 
    width: 100vw; 
    min-height: calc(100vh - 100px); 
    box-sizing: border-box; 
}

hr {
    width: 85%; 
    margin: 20px auto; 
}

.container {
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap;
    width: 85%; 
    margin: 0 auto; 
}

.section1, .section2 {
    width: 49%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .section1, .section2 {
        width: 100%;
    }
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-event-flyer-page/build-an-event-flyer-page

2

If none of your CSS styles are being applied, there might be something wrong with with the CSS link in your HTML. Check every part of it carefully to make sure it’s correct.

(And once you see it, don’t worry, it happens to the best of us lol.)

3

ah i see it now. thanks

can you help with the last two errors

You should have a main element within the body element.

The width of your section elements should be set using a percent value

4

can you share your updated code? the failing tests I see with the code you shared earlier do not match

5

Tell us what’s happening:

still failing on these two.

You should have a main element within the body element.
The width of your section elements should be set using a percent value

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">
  <link href="styles.css" rel="stylesheet">
  <title>Build an Event Flyer Page</title>
</head>

<body class="body">
  <!-- Header -->
  <header>
    <img alt="header-img" src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
    <h1 class="header">Pet Rock Festival</h1>
    <p>Join us for the first annual Pet Rock Festival!</p>
    <p><strong>When</strong>: October 3rd <strong>Where</strong>: Boulder Park</p>
  </header>
  <hr>
    <div class="container">
      <main>
        <section class="section1">
          <h2>Festival Highlights</h2>
          <ul>
            <li>Pet Rock Obedience Shows</li>
            <li>Best Dressed Pet Rock Contest</li>
            <li>Pet Rock Uphill Racing</li>
          </ul>
         </section>
         <section class="section2">
           <h2>Special Guests</h2>
           <ul>
             <li>Nick The Brick</li>
             <li>Wendy Cobblestone</li>
             <li>John Gravel</li>
           </ul>
         </section>
      </main>
    </div>
   <body>
 </html>

/* file: styles.css */
body {
    padding: 50px 0;
    margin: 0 auto; 
    width: 100vw; 
    min-height: calc(100vh - 100px); 
    box-sizing: border-box; 
}

hr {
    width: 85%; 
    margin: 20px auto; 
}

.container {
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap;
    width: 85%; 
    margin: 0 auto; 
}

.section1, .section2 {
    width: 49%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .section1, .section2 {
        width: 100%;
    }
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-event-flyer-page/build-an-event-flyer-page

6
7

This time I am merging the two topics, please do not create a new topic, respond to the existing topic with your updates

8

main should be a direct child of body