Help with 12. email is submitted to a static page

HTML-CSS
1

Need help with When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.

2 Likes
2

  1. You have two opening form tags. Move the action attribute and value from the inner opening form tag to the outer opening form tag (the one with id=“form”), then delete the inner tag.

  2. Add a name attribute to the email input.

  3. Use position: fixed on the nav, set the top property to 0 and give it width and height (make the width dynamic, not fixed). This will take the nav out of the normal document flow, so other adjustments are needed to make the page look like it did before, try and see if you can do that, come back if you need more help.

  4. Add at least one media query.

Summary 
@media (max-width: 800px) {
  .some-selector {
    ...
  }
}
3

This is my updated pen. Still need support with the nav bar section.

4

I really hope this helps. I realize this might be a bit confusing so here’s a link to my forked page with comments on what to change.

…

Okay first you need to align your image(header) in the middle with

text-align: center;
…

Then for the ul class you can remove the bullet points by adding

list-style-type: none;
…

You can also align it in the center by removing the width in ul and adding a

text-align: center;

…

If you want to add a background color I suggest you use this in ul

  background-color: #f1f1f1;

…

Add a padding of 10px in the ul using this

  padding: 10px;

…

Ok so now you need to add a new css style that targets the a link in li

li a {
  text-decoration: none;
  color: black;
  padding: 8px 16px;
}

The text-decoration: none; removes the underline
The color: black; gives the text a black color instead of blue
The padding: 8px 16px; makes each box bigger
…

And finally you need a li a:hover that changes the properties of the a link inside the li when hovered

li a:hover {
  background-color: #555;
  color: white;

The background-color: #555; changes the color of the background when hovered over
The color: white; changes the color of the text which gives it better contrast
…

I would also recommend you try to center your stuff to the middle and to change the size of your text so the headers are bigger than your text.
Thanks :slight_smile:

1 Like
5

Your nav id selector is wrong, it is #nav-bar not #navbar, then you will pass the last test.

Now comes the hard part, making it look better. I would really encourage you to try the best you can. Play around with different ideas. Look for inspiration, nothing too fancy keep it simple at first. Then try your best to implement the ideas. If you need help come back and ask.

Playing around is one of the best ways to learn, don’t get discouraged if you can’t get it to look just like you want. Right now it’s about the process more than the end result.