Build an Event Flyer Page

HTML-CSS
1 
<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>22nd Annual Spy Convention</title>

<link rel="style-sheet" href=

"styles.css">

</head>



<body>

<header>

<img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="banners">

<h1>

It's time for the Annual Spy Convention!

</h1>

</header>

<main>

<section>

<h2>Calling all spooks!</h2>

<p>Spooks and spies, it's time to load your PPKs and fuel up your Aston Martins. The Annual Spy Convention is back again! A week full of espionage and intrigue awaits you at the Hampton Roads Convention Center in Hampton, Virginia. 

<hr>

      From October 31-Nov 7 expect a week jam-packed with activities such as card games, martini-tasting, and a day at Superior Gun and Pawn in Hampton. The fee is $50 per person, which includes <ul>

<li>Eye and ear protection.</li>

<li>One paper target.</li>

<li>9mm ammunition (there may be an additional cost for other calibers)</li>

<li>Range fee and rental</li>

</ul>

</p>

</section>

<section>

<h2>Celebrating the 40th anniversary of "The Year of the "Spy".</h2>

<p>This is going to be even more jam-packed with cloak-and-dagger missions because it's the 40th anniversary of the "Year of the Spy".

<hr>

      We have reserved rooms at the Embassy Suites by Hilton. Please call 757-555-1234 to make reservations, and ask for the "convention" rate.  </p>

</section>

</main>

</body>

</html>

body{

  margin-top: 0;

margin-bottom: 0;

margin-left: auto;

margin-right: auto;

min-height: calc(100vh-100px);

padding-top: 50px;

padding-bottom: 50px;

width: 100vw;

height: 100vh;

}



section{

width: 100%;

}



hr{

width: 100%;

}

I cannot get challenge 14 done. I have no idea what I am doing wrong, since I am doing it exactly as I was supposed to.

2

Please provide a link to challenge 14 and soy what specific part of your code you think should satisfy it. Thanks

3

14. Your body should use calc to set its min-height to 100vh - 100px.

4

Please provide a link to the project. Please say what specific part of your code you think satisfies that test.

5

That is my code so far. Here is the link.

6

I’m not seeing where the instructions requested this part?

7

That is my code so far. Here is the link.

The min-height part, with the calc function, should satisfy it.

8

Let me see if deleting it will help.

Edit: still didn’t work.

9

Please post your full updated code.

10
11

That is a link to the project, not your code. It would be very bad if you typing in your browser changed freeCodeCamp for every single user.

12 
body {

  margin-top: 0;

margin-bottom: 0;

margin-left: auto;

margin-right: auto;

min-height: calc (100vh-100px);

padding-top: 50px;

padding-bottom: 50px;

width: 100vw;

}



section {

width: 100%;

}



hr {

width: 100%;

}

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>22nd Annual Spy Convention</title>

<link rel="style-sheet" href=

"styles.css">

</head>



<body>

<header>

<img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="banners">

<h1>

It's time for the Annual Spy Convention!

</h1>

</header>

<main>

<section>

<h2>Calling all spooks!</h2>

<p>Spooks and spies, it's time to load your PPKs and fuel up your Aston Martins. The Annual Spy Convention is back again! A week full of espionage and intrigue awaits you at the Hampton Roads Convention Center in Hampton, Virginia. 

<hr>

      From October 31-Nov 7 expect a week jam-packed with activities such as card games, martini-tasting, and a day at Superior Gun and Pawn in Hampton. The fee is $50 per person, which includes <ul>

<li>Eye and ear protection.</li>

<li>One paper target.</li>

<li>9mm ammunition (there may be an additional cost for other calibers)</li>

<li>Range fee and rental</li>

</ul>

</p>

</section>

<section>

<h2>Celebrating the 40th anniversary of "The Year of the "Spy".</h2>

<p>This is going to be even more jam-packed with cloak-and-dagger missions because it's the 40th anniversary of the "Year of the Spy".

<hr>

      We have reserved rooms at the Embassy Suites by Hilton. Please call 757-555-1234 to make reservations, and ask for the "convention" rate.  </p>

</section>

</main>

</body>

</html>
13

Since this is your new full code, I would un-delete the HTML parts

14

Did that, and still no luck.

15

I updated my post (I forgot about the HTML, oops). I did what you suggested, and I still had no luck.

16

Is calc supposed to have a space there?

17 
body{

  margin-top: 0;

margin-bottom: 0;

margin-left: auto;

margin-right: auto;

min-height: calc(100vh-100px);

padding-top: 50px;

padding-bottom: 50px;

width: 100vw;

}



section{

width: 100%;

}



hr{

width: 100%;

}

I tried with and without the space, and I still got the message that I needed to use the calc function (which I was).

18

You left this. Did the instructions request it?

19

Note, you posted it with the space again.

20

Yes, it asked for that.