Build a Product Landing Page - only 14/16!

HTML-CSS
#1

Hi guys,

I still need to do a lot of work on the style of this project but I am realising I have no clue why I am still getting 14/16 when testing this.

Would you guys please help me out with some hints? Any idea?

If you have any other feedback, feel free to share.

Thanks in advance
Giorgio

Your code so far: https://codepen.io/towerbrother/pen/jONZPWb

Your browser information: Chrome

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

Link to the challenge:

#2

You need to add a name attribute to your input element with a value of ‘email’, as shown below.

Also, your nav/header should have a position of value ‘fixed’, as shown below.

<input id="email" type="email" name="email" placeholder="Enter your email address" required>

header {
  position: fixed;
}

Hope this helps.

2 Likes
#3

Amazing, it helps indeed! Thanks, Sky020! It works now!

I am confused though regarding the name=“email” field… I thought that to trigger the “HTML5 validation to confirm that the entered text is an email address” the field to be used was type=“email” rather than the field name?

Thanks

1 Like
#4

In real life, the name field is dictated by the database. When the submit button is clicked the form contents are turned into an array that is parsed by the backend and the commercial service my employer uses doesn’t map it to another value it just uses the name value to fill out the database field.

2 Likes
#5

Got it - I guess I will cover the backend bit later on in the course. It makes sense though. Thanks tlc35us!

#6

Hi,

I see you are passing now 15 of 16 tests. Are you able to pass the last one on your own or you need a help?

#7

You are right - the issue was on src="" as I referenced not a url. Now it should be fixed.

#8

OK, that’s great!

You know, I guess you have to fix the positioning of your header element. Because it looks like it is not stuck to the top of the view port.

Here is what I mean:

Do you see that Since 1933, bringing to you the highest italian quality title from the section element is still visible in between the header and the CodePen top bar?

If you know what is wrong in your code - just fix it, if not - let me know :slight_smile:

#9

Fixed - thanks for that!
I added “top: 0;” to the header CSS code.
Cheers

#10

the challenge has the wrong link.
I viewed the project and you are doing great so far. It just lacks the ability to be responsive. There is a horizontal scroll and that gets kind of bothering.
My dad loves coffee and would probably rate this page 10/10.
At all else, great job.
You actually got all 16 tests.

#11

Hi ConnerOw1115, thanks for your feedback. Much appreciated.

I am not working as much on responsiveness, for now. I am quite new to this and I do not know much about JavaScript yet - currently going through the fCC module.

I may go back to this Web Design Projects later on (surely my project portfolio one) in order to improve them with new skills gathered.

I fixed the horizontal scroll - well spotted!

1 Like
#12