Project Landing-Page - Amazon

Code Feedback
1

Hello again everyone!

For my landing page I decided to make Amazon’s Home Page. They circulate between 5 different grids throughout the day so hopefully when you are viewing it will be the same as the one I created. Let me know what you guys think :slight_smile:

https://sorushdadkah.github.io/portfolio/amazons-landing-page/

ps I know about the image color being different than the nav color - I dont know what color they used. Also, at the bottom of the page there is a linear-gradient amazon uses; thats another thing I would love to implement.

2 Likes
2

Good job, @Haudz

I like the structure you have put in. However, a few suggestions:

  1. The Black Friday image (‘Shop Black Friday early’) looks bit pixelate. You can workout on the width part in CSS to resolve the issue.

  2. The site doesn’t seem to be mobile friendly. Have you left it non-responsive intentionally? If you can make it mobile optimized, that would even look better and more well-structured.

Overall, nicely done. Keep it up! :fu:

3

Hi @moinshaikh, thank you for your feedback. As for the image, I took the image they provided and I was trying to match how it looked from the screen shot I had, but I did go ahead and brought it down by 50px(thanks). They do some image rendering that I just dont know how to do. I tried for awhile to get the header image like there’s but I dont know how to optimize the color ratios. As for it being mobile friendly, no. I did that for my Portfolio website to show I can do it and I have moved on so I can do the other projects. I get to into the projects and spend to much time on them lol.

1 Like
4

I see. I totally understand about the image issue. As you are just starting out, I appreciate your enthusiasm and the efforts you have put in. And as for the mobile friendly part, it makes sense at this stage not to worry about it :slight_smile:

Let me know if I can offer any advise/help.

Good luck with your progress!

1 Like
5

Hi Moin,

There actually is one thing I can’t seem to figure out. I have been trying to set the opacity of the body when opening the sidenav. I got the code from w3schools but im not sure why its not working here. Any ideas?

document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
6

You have added “Shop Black Friday early” as a picture. Unfortunately, the background of this image is not exactly the same as the whole background. I would render the letters easily with an image editing tool. :wink:

7

Hi @codekai, thanks for the reply. I have tried messing with the sharpness but I couldnt get it. I took the photo from the site, and the sites picture does have a bit of a blur effect. Not sure if thats how Amazon intended the image to be like?..

8

Hi,

Did you try something like this: _document.body.style.opacity = “0.5”;

Let me know if this works for you.

10

It looks good @Haudz. Impressive. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 4/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • After that, clear out the HTML code and paste in your CSS code. Check the CSS checkbox and click on the check button. There’s something in CSS to clean up also.