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 add
body {
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 and margin 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
