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

| HTML5 e CSS | #4 Newbie | Results summary component

@Ramon-Alvez

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


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

I'm proud of the responsiveness and the gradient design, to be honest I didn't know how to do the gradient and I took a good look at w3schools and some videos on YouTube.

I thought it looked really cool and I also ended up adding a hover effect to the average score.

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

The biggest challenges were the gradient and the border of the averageScore div, in fact I made the page very smoothly but I noticed that in the design of the challenge, the average score container has a radius and this radius has a solid border.

I tried, I researched, I even looked for some solutions on the internet but I didn't find any way to do it :/

p.s.: An example of an attempt (which came closest to work) was the use of a gradient on the border, leaving the middle areas transparent and the corners with color, but it didnt work, I couldn't put the radius on the border :-:

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

If anyone knows a way to style the border thickness only in the round corners of the radius, please teach me.

Community feedback

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