Skip to content
Submitted almost 4 years ago

Mobile first . HTML / CSS only.

Ramon•130
@ramonrp
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here we go with my second project! I did mobile first, to take advantage of block elements. I used flexbox inside each section (Karma, Team builder...) to have more about position of pictures. Probably there are better ways to achieve same.

Regarding desktop version, I divided in two sections (header / panel-section). I used grid in the panel-section div.

I have the feeling that my CSS is a little messy...

any feedback is more than welcome

Thanks!!

Community feedback

  • Lia•75
    @liampcPosted almost 4 years ago

    Hello, nice work with this!

    • I just noticed that you used another div for the pictures in the box, I think using img tag is sufficient.
    • the grid is good but you can also use 'grid-template-areas' and assign 'grid-area' for each of the children, I think it is neater.
    • for the 'grid-template-columns/rows' you can also use 'repeat(3, 1fr)'

    Have a good day!

    0
    Ramon•130
    @ramonrpPosted almost 4 years ago

    Hi Liliamp! Thanks for your reply!

    1. I though that img tag was inline tag, but If I use flexbox it doesn't matter. Already changed that!

    2. Noted! I'll try to practise that syntax in next grid proyect.

    3. Noted about repeat.

    Thanks a lot!

    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