Skip to content
Submitted about 2 months ago

My Solution for Order Summary Component Challenge!

#pure-css
P
RogeanCosta•150
@RogeanCosta
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

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

Hello! 👋

I'm excited to share with you my solution for the order summary component challenge. 💕

In this challenge, I've learned how to stretch a image in background with the background-position property.😁

I don't think I had many difficulties, but I have two more general questions:

  1. Is there any way to more easily identify when I will and will not need to work with flexbox? 🤔

  2. I know that it is recommended to work with font-size using rem/em for responsiveness reasons, but what about other properties such as paddings, margins, borders? Should I work with rem/em or can I work with px? 🤔

By the way, any suggestions or recommendations are welcome.😊

Community feedback

  • Marzia Jalili•3,970
    @MarziaJaliliPosted about 2 months ago

    Nice work!

    Some amandments you can make

    • For smoother changes on hover of the buttons, you can use the transition property.

    Take the code below as an example to get this feature:

    For the proceed to payment:

    .proceed-to-payment-btn {
  transition: filter 0.4s; /* or .4s for short */
}

    For the cancel order and change:

    .change-btn,
.cancel-order {
  transition: color .4s;
}

    This ensures that the colors will change after 400 milliseconds. Which makes it looks even better.

    Other than this you're doing great, man!

    Keep up the great work 💪

    Marked as helpful
    1
    P
    RogeanCosta•150
    @RogeanCostaPosted about 2 months ago

    @MarziaJalili 👋

    Thank you very much for your recommendation!😁

    I will implement the transitions as soon as possible. 😊

    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