Skip to content
OverviewSolutions
29
Comments
3
Malik Elbadri
@Maliklar

All comments

  • Malik Elbadri•590
    @MaliklarPosted over 2 years ago

    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
    2
  • Martin Rečka•20
    @Marty9406Submitted over 2 years ago

    Hello, this is my first project at Frontend Mentor.

    The biggest issue for me was to vertically center the whole element. I did it by using position absolute and transform translate. Are there some other (or maybe better) ways to vertically center elements?

    Did you find something what I could have done better?

    Thank you for your feedback!

    QR code component

    3
    Malik Elbadri•590
    @MaliklarPosted over 2 years ago

    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
    1
  • Malik Elbadri•590
    @MaliklarPosted over 2 years ago

    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
    1