Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

summary bluecard

@ThunderEon

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i cant adjust the position of the images...

Community feedback

@bally4h

Posted

Hi!

I think your solution is very good. I want only suggest two things:

Your question was how to adjust the images. I think there are a lot of possible solution, flex box, grid or many others. For me the ::before pseudo was the simpliest solution: I made the paragraph and then in css:

.blue::before { content: url("./assets/images/icon-visual.svg"); position: relative; top: 4px; right: 5px; }

You can try playing with the top and right pixels to get the best result.

The others suggestion, take your time to observe the challenge. There are more complicated colors, whiches you didn't used: the backgroud and the circle has two colors and some gradient beetween them:

background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));

I hope this helps you, I wish you the best!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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