Skip to content
Submitted 3 months ago

CUBE CSS-inspired solution

jl-stephenson•100
@jl-stephenson
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

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-IPosted 3 months 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
    0
    jl-stephenson•100
    @jl-stephensonPosted 3 months ago

    Hi Alex!

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

    Thanks for the feedback!

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    @jl-stephenson

    Glad that I could help =)

    0

Please log in to post a comment

Log in with GitHub

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