Submitted about 1 month ago

Streamlined Order Summary with HTML & SCSS

Natali 👻 Grimm•1,130

@Grimm-N

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I managed to build this card pretty quickly... that is, when I'm not giving myself extra tasks along the way! 😅

What challenges did you encounter, and how did you overcome them?

I couldn't figure out the hover color for the button at first, but Photoshop's eyedropper tool saved the day in no time! 🎨✨

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

I’m happy to receive any feedback and suggestions for optimizing and improving the code! Always looking to learn and grow. 💡

Community feedback

KapteynUniverse•2,150
@KapteynUniversePosted about 1 month ago
Hey, great job. I love your backgrounds.

I didn't do this one yet, so i am guessing they didn't give on hover effect color. I think it is possible with hsla(hue, saturation, lightness, alpha).

Checked your code a bit, i guess this is the button background color value hsl(245, 75%, 52%); , this should do the trick.

.order__button:hover{ background-color: hsla(245, 75%, 52%, 0.7); }

I think there is a way to use with variables like hsla(var(--button-bg), 0.7); but i couldn't manage to use it like that. Maybe it is possible with scss
Marked as helpful
0
Natali 👻 Grimm•1,130
@Grimm-NPosted 30 days ago
@KapteynUniverse Got it! Thank you!
0
Yacoub AlDweik•970
@YacoubDweikPosted about 1 month ago
This is too much creativity and I can't bear that!

Amazing!
1

Please log in to post a comment

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