Submitted about 1 year ago

Results Summary Component Main

Phinda• 140

@Phinda824

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was not easy for me, I got some difficulties to finish. I did not know how to add shadows, and mobile layout. Please help.

Community feedback

Bryan Li• 3,550

@Zy8712

Posted about 1 year ago

Your layout looks pretty solid. To answer your questions:

You can add shadows by using something like: box-shadow: 0 10px 30px hsla(0, 0%, 0%, 20%);
The box shadow is added to your div with class of "container"
for the mobile layout you can adjust your .main under the @media tag with:

.main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

This should give you a vertical layout with your boxes that you could adjust accordingly.

So additional things I might suggest for you to have a site closer to the original design is the use of linear-gradient for you background.

Your current background for the results box looks like this: background: var(--Light-royal-blue);.

In order for you to get the same background as the design you should probably use this instead: background-image: linear-gradient(var(--light-slate-blue), var(--light-royal-blue));.

This can also apply to the circle in the results div: background-image: linear-gradient(var(--theme-violet-blue), var(--theme-persian-blue));.

Hope I was able to help you in some sort of way. You are welcome to look at my solutions if you feel the need to.

Marked as helpful

Phinda• 140

@Phinda824

Posted about 1 year ago

Thank you so much, now I understand what I can do. Also I would love to look at your solutions, I need to @Zy8712

Tushar Biswas• 4,080

@itush

Posted about 1 year ago

Congratulations on completing the challenge! 🎉

Thank you for sharing you thoughts and issues with the project.
You can quickly go through this CSS box-shadow playground to get an idea.
It is also important to correctly understand media query to build responsive projects.

In my projects:

I always start with mobile-first workflow.
I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.

<body>
<main>
All content 
</main>
</body>

I Use relative units as much as possible and avoid absolute units whenever possible.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with other topics.

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

Marked as helpful

Phinda• 140

@Phinda824

Posted about 1 year ago

Thank you so much for your help, I will go through article. 🤝@itush

Mohammad Shohan• 40

@CephalonShohan

Posted about 1 year ago

This comment was deleted about 1 year ago

Phinda• 140

@Phinda824

Posted about 1 year ago

Thank you so much, I try my best @CephalonShohan

Aziz Berhouma• 330

@Aziztheprogrammer

Posted about 1 year ago

Hi Phinda, First of All I Appreciate Your Effort ! And Congratulations for Finishing This Project (; But You Have Some Mistakes I’ll Try to Mention Some of Them for You :

The Padding In the Bottom of the Card Is So Big
The Circle Should Be Colored Through Gradient Property
You Are Not Using the Right Fonts in the Project
And the Elements in the Summary Section Are Not Colored With the Right Colors

So Try to Solve This Problem and I’ll Check Your Project Later to See the Improvement ! Enjoy Coding (;

Phinda• 140

@Phinda824

Posted about 1 year ago

I appreciate your help, I will try to fix my mistakes @Aziztheprogrammer

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