Order summary component

@Sdann26 gracias compañero! Voy a probar eso a ver que tal ✌

@DilinyerCR Por cierto lo acabo de revisar y todo bien, solo falta el cambio en el fondo para el diseño mobile. Por cierto no te lo mencioné creo pero puedes usar la propiedad transition para los elementos en tu página que cambien de un estado inicial a uno final así el cambio de color no se da tan brusco. Así como transition: all 300ms, el primer valor es para la propiedad y el otro para el retraso aunque tiene más, esto le puedes aplicar a cualquier elemento con :hover, :active, :focus, etc. Aplícalo te quedarán maquetados más profesionales.

@Sdann26 gracias bro, como hago para el cambio de imagen para el diseño móvil? Eso es con media queries?

Si, pensé en ponerle transition al cambio en los colores con el hover pero luego pensé que en ese caso no sería necesario, crees que si lo es?

@DilinyerCR mmm puede que me equivoque pero lo escribiré aquí.

Como estas tomando primero el fondo de escritorio tu quieres que cuando se achique y pase ciertos pixeles se cambie digamos 460px entonces:

@media screen and (max-width: 460px){
   main {
       background: url(/images/pattern-background-mobile.svg)no-repeat top/contain;
   }
}

Lo que dice esta línea es que aplicara los estilos de ahí a lo máximo 460px, entonces ocupara de 0 a 460px.

Y bueno ahora solo le damos el estilo que deseamos cambiarlo, los demás se mantienen.

Ponlo al final de tu hoja de estilos.

Lo de tu pregunta ultima lo de las transiciones depende de lo que creas que se le ve mejor y casi siempre las uso en todo lo que tenga estados.

@Sdann26 ok, gracias, voy a probar. 👍

@umairanwer Thank you very much, I will try that.