Submitted about 3 years ago

loopstudios using css grid

Eric Aguayo•945

@EAguayodev

Preview site View code

This is a solution for...Loopstudios landing page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of cleaning up the code in a challenge that I deployed around two years ago. I converted the font sizes from pixels to rem units and used the clip-path property to crop the bottom right of the main image, as shown in the desktop design.

What challenges did you encounter, and how did you overcome them?

The main challenge I faced and overcame was applying the clip-path property to the main image in the design. I overcame it by using Google to find a solution at https://bennettfeely.com/clippy/.

What specific areas of your project would you like help with?

I have identified two specific areas where I would like to receive feedback and suggestions for improvement in the challenge:

When hovering over the list on the footer page, there is a bug causing the social icons to bounce slightly. Second eye to see what the issue can be and feedback on removing this would be appreciated.

Community feedback

alec-sena•40
@alec-senaPosted about 3 years ago
Hi there! Here's a couple issues I noticed:

-Your design breaks on larger (wider) screens. I would set the header to have the height of the background image so that it never shrinks to be smaller than it's content.

-You can add 'margin: 0' and 'padding: 0' to your reset (* selector) to get rid of the whitespace around the header and footer. Be careful though, as this will effect margin/padding for all elements, so you may need to make adjustments afterwards. I usually do my reset before writing any other CSS when I start a project.

-The hamburger button likely isn't working because in your main.js script you're toggling different classes in your conditional. I would use one class that hides the element and then toggle that one class on or off.

-Some fonts and spacing are off, such as in the nav menu on desktop view and in the footer. I would just double check those and make adjustments as necessary.

Looks good otherwise. Hope this helps.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord