Submitted 30 days ago

CUBE CSS-inspired solution

jl-stephenson• 100

@jl-stephenson

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Meet landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I didn't enjoy this one... It was tricky to position the hero image(s) and using absolute positioning caused some headaches.

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

Positioning. Researching more about how to use position: absolute in combination with Grid was useful and good learning.

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

More maintainable ways to use different flavours of position. Or alternative solutions...
Responsive images - what CSS properties are good to set to make the code maintainable and which are to be avoided;
Feedback on CSS organisation. Following the CUBE CSS methodology - there are some grey areas - when is it best to use utilities, when blocks?

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 29 days ago

Hey!

Well, I can't see the template, so I can't be sure what the main design idea with those images, but if you need to align them with the text you can use grid child's properties - aling-self and justify-self to place them in the corners of grid cell. Also, since those images have no context meaning, you can set them as backgrounds of the divs and than align them with background-position - but it'll be close to absolute positioning.

By the way, you forgot to put section inside the main =)

And besides all difficulties you did great job!

Marked as helpful

jl-stephenson• 100

@jl-stephenson

Posted 29 days ago

Hi Alex!

I'll experiment with both approaches - aligning grid children and background images.

Thanks for the feedback!

Alex• 3,130

@Alex-Archer-I

Posted 29 days ago

@jl-stephenson

Glad that I could help =)

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