Desktop Preview using Css Flexbox

👾Hello Austin, Congratulations on completing this challenge!

Here's some tips to improve your solution:

1.Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. First step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

body {
    min-height: 100vh;
    /* max-width: 1440px; */
    background-repeat: no-repeat;
    background-color: hsl(225, 100%, 94%);
    background-image: url(./images/pattern-background-desktop.svg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

2.Note that these sizes given in the style-guide.md in the case 1440px for desktop and 375px are only a reference value to say in which dimension the design were created, don't stick to these values because your solution should be fully responsive and fit any screen size.

3.Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

✌️ I hope this helps you and happy coding!

Hi @Ausranking,

Congrats on completing the challenge

You can replace your body rule with the following to center the card on the page.

body {
    max-width: 1440px;
    background-repeat: no-repeat;
    background-color: hsl(225, 100%, 94%);
    background-image: url(./images/pattern-background-desktop.svg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Hope this is helpful.