Submitted about 3 years ago

Frontend Mentor | Order summary card - html, CSS

@MarioLisbona

A solution to the Order summary component challenge

Solution retrospective

I initially had difficulties with using the SVG graphics so i ended up finding a site that i could paste the svg markup in and download an image.

The background image doesn't exactly lineup like the design file. I couldn't figure out how to get it exact. Any tips on this would be much appreciated.

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted about 3 years ago
Hi! 👋

The site still using the SVG. I thought you were using png or jpg instead of svg.

Regarding the background image. I made some changes to the CSS.
```
body {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.1;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(./images/background-dekstop.svg);
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-size: 100%;
}
```
I recommend adding the background-color. You should be able to find the color code on the style-guide.md.

In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.

Keep in mind that, Anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc.

Hope you find this useful!

P.S. I recommend keeping the .gitignore file to prevent the GitHub repository get filled with .DS_Store files.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord