please don't hesitate to leave my any tips to improve myself
Design comparison
Community feedback
- @HamzaMasmoudiPosted about 1 year ago
Congratulations @Islam-Yasser for completing the challenge. You did a very good job on recreating the design as it looks similar to the actual design. However you need to do some changes in the main.css file.
You design is not centered in the screen because the body element is not taking the whole height of the screen so try
body { min-height: 100vh; }
you can also get rid of the background div and instead go to the body and addbody { background-image: url(/images/bg-desktop.png); background-repeat: no-repeat; background-position: bottom right; background-color: hsl(229, 57%, 11%); }
and that will take care of the background in a much easier way.
You can also get rid of all the
bottom
top
andmargin
elements in the fylo div and sec div as it will make it look similar to the original design with less unnecessary code.In the sec div I saw that u just gave margins to the elements inside of it which is a way to do it but not the best one as I advice you to get rid of the margins of the "header" , "chart" and "info" divs and instead go to the sec div and
.sec { display: flex; justify-content: center; flex-direction: column; padding-left: 2rem; gap: 1rem; }
and finally for the message you don't need so many divs to make that small arrow you can leave only the arrow class and remove all the divs inside it and do :
.arrow { height: 0; width: 0; border-bottom: 25px solid transparent; border-right: 25px solid white; position: absolute; top: 65px; right: 0; }
and that will do the job. Thank you for taking the time to read my review and I advice you to complete the beginner challenges first as they will improve your CSS and then go to the junior challenges. Best regards, Hamza Masmoudi
Marked as helpful2@Islam-YasserPosted about 1 year agoOh,@HamzaMasmoudi thank u for u and ur precious time for reading my code and improve it and leaving such a feedback !! that am sure it will improve my skills , I will take your advice and waiting from u more comments on my upcoming challenges ,, I really want to thank you for fixing this back.
1
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