Design comparison
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
- @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 helpful0@Phinda824Posted over 1 year agoThank you so much, now I understand what I can do. Also I would love to look at your solutions, I need to @Zy8712
0 - @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 helpful0@Phinda824Posted over 1 year agoThank you so much for your help, I will go through article. π€@itush
0 - @CephalonShohanPosted over 1 year ago
This comment was deleted about 1 year ago
0 - @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@Phinda824Posted over 1 year agoI appreciate your help, I will try to fix my mistakes @Aziztheprogrammer
0
Please log in to post a comment
Log in with GitHubJoin 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