Skip to content
Submitted over 1 year ago

Results Summary Component Main

Phinda•140
@Phinda824
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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,530
    @Zy8712Posted over 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
    0
    Phinda•140
    @Phinda824Posted over 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

    0
  • Tushar Biswas•4,080
    @itushPosted over 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
    0
    Phinda•140
    @Phinda824Posted over 1 year ago

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

    0
  • Mohammad Shohan•40
    @CephalonShohanPosted over 1 year ago

    This comment was deleted over 1 year ago

    0
    Phinda•140
    @Phinda824Posted over 1 year ago

    Thank you so much, I try my best @CephalonShohan

    0
  • Aziz Berhouma•330
    @AziztheprogrammerPosted over 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 (;

    0
    Phinda•140
    @Phinda824Posted over 1 year ago

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

    0

Please log in to post a comment

Log in with GitHub

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