Frontend Mentor | HTML, CSS, Flexbox coding challenge solution

Solution retrospective

Creating the section that contains the music icon, the annual plan text, and the price was a bit tricky for me. I ended up getting that left side done using floats and vertical-align top for the text elements. I was wondering if there was a more efficient way of doing that. Soon I'll be doing some research on css grid to see if I can find alternative means.
The way I separated the main top image from the (card) body below seems hacky. But who knows. I was trying to mimic the way bootstrap cards have a header/body/footer area. Any approaches I should investigate?
I didn't know if I efficiently included the various ttf files. Is there a catch all method that can grab all of the ttf's for a given font family given a folder? As seen in my css file I used multiple @font-face references.

Any and all feedback or thoughts would be much appreciated.

Thanks Rashid

Community feedback

Fluffy Kas• 7,735

@FluffyKas

Posted over 2 years ago

Hey, your solution actually looks good but I think you're overcomplicating it a bit ^^

Your font-family doesn't work at the moment. The easiest way is always just to follow the link given in the style-guide and import the appropriate families and weights to your css/html with the @import/link Google Fonts gives you!
The bootstrap approach seems fine, if this helps you, why not! Just make sure you swap your card div to main and the attribution div to footer to make it more semantic.
Your images are missing their alts. If these are decorative images, you can leave their alts empty, but they still need to be there!
I noticed you have a few bits of code that are unnecessary: z-index, top, left. These properties will only work if the element have a position on them (anything but static positioning, which is the default).
For the annual plan section, it can all be solved with flexbox actually, it's just a matter of setting up your html for it. By no means do I think my solution is the very best, but you can take a look at it, hopefully it will be helpful: (https://www.frontendmentor.io/solutions/order-summary-card-with-vanilla-css-qDncfp6V2)

Marked as helpful

Rashi• 165

@shangum

Posted over 2 years ago

Thank you for the feedback @FluffyKas!

I will review the notes you gave and make the suggested changes.

Thanks again

Rashi• 165

@shangum

Posted over 2 years ago

Hey @FluffyKas,

Your solution looks great. Especially how you were able to get the background wave to line up with the card (something I struggled with).

I made the changes you suggested. I also found out that I need to prepend my font folder path with ".." in order for the fonts to be found on github pages. On my local machine they were being loaded.

Thanks again for the advice.

HTML, CSS, Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community