Skip to content
OverviewSolutions
14
Comments
4

Hamza Masmoudi

@HamzaMasmoudi180 points

I just love coding

Latest solutions

View more solutions

Latest comments

  • Hamza Masmoudi•180
    @HamzaMasmoudiPosted over 1 year ago

    Hello @Leo-Code-CA nice work and great job on recreating the design it looks identical to the original design.

    About the attribution paragraph you can just remove the opacity: 0; from the .attribution class and that will solve your problem. Happy coding, Best regards Hamza Masmoudi

    0
  • Hamza Masmoudi•180
    @HamzaMasmoudiPosted over 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 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

    Marked as helpful
    2
  • Hamza Masmoudi•180
    @HamzaMasmoudiPosted over 1 year ago

    Hello Wijdane! great work on completing the project it looks perfect, and good job on recreating the logo, I just wanna ask: did u intentionally recreate the logo from scratch ? because it is included in the images folder with the downlow pack.

    0
  • Hamza Masmoudi•180
    @HamzaMasmoudiPosted over 1 year ago

    Hello I really like your work and how perfect it is to the design photo I would like to ask you when you use perfect pixel what width and height do you set the image you will follow and what do you use the scale percentage and how much do you usually set it to

    0