Skip to content
Submitted about 3 years ago

HTML, CSS, Flexbox

Rashi•165
@shangum
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. 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.

  2. 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?

  3. 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,715
    @FluffyKasPosted about 3 years ago

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

    1. 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!

    2. 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.

    3. Your images are missing their alts. If these are decorative images, you can leave their alts empty, but they still need to be there!

    4. 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).

    5. 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
    0
    Rashi•165
    @shangumPosted about 3 years ago

    Thank you for the feedback @FluffyKas!

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

    Thanks again

    0
    Rashi•165
    @shangumPosted about 3 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.

    1

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