My Product Landing Page. ((:

Code Feedback
1

Hi everyone

I finished my product landing page.
This is https://codepen.io/Omar-Dev-Pro/pen/LYYgeyP
Can you tell your feedback about my work ? How is it ?
I appreciate your comments

Thanks :slightly_smiling_face:

2

Hello @OmarFawzi, I’m looking at your page right now. It looks nice, the colours set the proper mood. However, as I look at it, there are issues with the layout’s responsiveness. on my Firefox Web Browser there’s a responsive design mode (Ctrl + Shift + M). Maybe you could have all you nav links in the darker brown area. Check it out at let me know what you think?

1 Like
3

went over it briefly, one thing on the nav link “feature” is the header covers part of the “feature” word in the body of the page when you hit the link. adjust the relation of the nav to its link so it wont over it up anymore, just a little padding :slight_smile:

1 Like
4

Hello @mphojele , thank you for looking . I fix the problem if you want check it. :+1::slightly_smiling_face:
Thanks again

5

Hi @ZTD just you say i change the padding and looks good . if you want check about it and i appreciate any seggestion.
Thank you again. :slightly_smiling_face:

6

coffee%20time

this here was what i was referencing, its still doing it. this is from when you use the header nav link for the feature link.

7

Sorry i forget to add the change in codepen :smiley:. Now is done you can see it .

1 Like
8

that damn save am i right? LOL yep there ya go!

1 Like
9

yeah that is right, Now he is ready :+1:

1 Like
10

Hi @OmarFawzi, nice job on your product landing page. Some things you may want to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 14/16 user stories.
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • there’s a required attribute in HTML that you’ve missed
  • on desktop size, the text within your footer is not centered. It’s okay on smaller screens.
1 Like
11

Hi, as Roma said above, it remains to pass the tests. Instead of forking, you can also paste the following code above your HTML code and the test menu will appear on upper-left hand corner. Select your respective project and try to pass all tests.

<head>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
1 Like
12

Hi @Roma , @verv0eren i made the right passes in test and the text in the footer is centered . check it pls .
Thank you both for your feedback

13

Hi @OmarFawzi, it looks good. Just be careful. In your footer declaration, you have the text-align property listed twice, each has a different value. Delete one of them.
Running the validator will show you things like this.

Good job. Happy coding.

1 Like
14

Hi @OmarFawzi,
I like the colors you chose. Design is good.

When you see the page in small devices the header and the nav bar change to absolute position. They must be fixed too. In small devices do not pass the Layout #1 test.

1 Like
15

hello there you are not passing one test that is to keep navbar fixed. Although you used position: fixed property , it is not working because you have used header instead of #header. Change it and it works. Although they are same, even I am wondering now why it doesn’t work for the first case. If anybody else know please let me know the reason.

1 Like
16

I delete the value and now it is good.
Thank you for your note :+1:
Happy coding .

17

Hi @ricardoantonio I fixed the problem ,you can see now the layout is pass.
Thank you very much

1 Like
18

Hi @verv0eren I fixed the problem and now he is pass.
I edit the code and now he good . you can see it .

Thanks you for your comment.