Landing Page Project - Fitness Equipment

Hello,

Link here: https://codepen.io/multiplify/pen/gOoeQGR?editors=1100

I’ve got a pretty bland landing page but it fulfills all the requirements. It was a lot of good experience with grids, I probably remade it two or three times because I got so confused by my own CSS. This represents the most succinct and clear version of what I was trying to accomplish.

I also created my own images in Adobe Illustrator to accompany the “fastfacts” text which I embedded from google photos.

It passes every single automated test except for: User Story #13: The navbar should always be at the top of the viewport.

But if you view my page you will notice that my navbar does in fact always stay at the top of the navbar, so I don’t know what to do about that. Functionally I have accomplished what they want.

It looks terrible when resized unfortunately. Especially the Navbar and my little image icons, they get completely destroyed and don’t resize properly, so any hints about how to address that would be super.

Thank you for your time!

You need to move the positioning CSS from the ul to either the nav or header.

position: fixed;
width: 100%;
z-index: 1;
top: 0;
left: 0;

As for the icons. I would start by using actual icons and not images when possible. There are plenty of free icon libraries (like font awesome). Anyway, if you only set the height they should maintain their aspect ratio.


Please leave the test script on the page as well for the page you submit. You can have a fork of the project without the test script. But for the page you submit, you should leave the test.

nice work. I have issue if you use app that block blue light like f.lux ,or even window blocking blue light, it become hard to see the prototype.
you can check this by going night mode.

about confusion caused by css. just more experience and better naming would fix that, for now try adding comments regularly.

good job and I hope to see more of your projects

Thanks for both of your responses!

I’ve fixed some of the issues. I may at a later date come back and revamp this project as it’s rather embarrassing in comparison with what some other people have come up with.

Thanks!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.