Skip to content
OverviewSolutions
29
Comments
3

Malik Elbadri

@MaliklarAmman, Jordan590 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Malik Elbadri•590
    @Maliklar

    Hi Ibrahim, Your work is great, but I opened your solution and didn't understand your approach of setting the background images. You can check my repo at Github for this problem and I hope it will be of help to you Click Here. <br> This is how I set the background image:

    body {
    padding: 0px;
    margin: 0px;
    background-color: var(--Darkcyan);
    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-position-x: left, right;
    background-position-y: -50vh, 50vh;
    background-attachment: fixed;
    background-size: contain;
    background-repeat: no-repeat, no-repeat;
}

    And for the card I just simply set the using the image attribute and gave the profile image a margin-top: -50% of its size to make it over the background image

    Marked as helpful
  • Malik Elbadri•590
    @Maliklar

    Nice work, Your way is of positioning is fine. <br> If you want to center the element, you can also make the body's display as a flex and then make sure the flex body will occupy the how screen (height: 100vh, width: 100vw) after that you can add a single element to the body which is the Card and set the properties of the body to <br> display: flex; align-items: center; justify-content: center;

    this will make the element centered. <br> But your way of centering the position is totally fine because you have a single element to display.

    Marked as helpful
  • Malik Elbadri•590
    @Maliklar

    Nice work, but you need to edit your solution to be more like the design by doing the following: 1- You need to add the background-color attribute to the color giving in the styles-guide.md. 2- You also need to add the background image provided in the images folder and position it correctly. 3- You have to look for a way to center the card. 4- Finally give the card body (below the card image) a padding.

    Marked as helpful