Submitted about 2 years ago

SVG Order Summary Component

yishak abrham•2,150

@yishak621

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Built with

Semantic HTML5 markup
CSS custom properties
Flex
CSS Grid
Mobile-first workflow
javascript

What I learned

this project helps me to work friendly with SVG picture backgrounds 1]mixing svg picture backgrounds with background color 2]positioning svg background to y-offset according to design image 3]adding slightly box shadows to buttons and grid

`.grid1x2 {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1); /*box-shadow: h-offset v-offset blur spread color */
}`

`@media screen and (min-width: 800px) {
  .center {
    display: flex;
    justify-items: center;
    background: url(./images/pattern-background-desktop.svg) no-repeat top;
    background-size: contain;
    background-position-y: -30%;
    background-color: var(--color-secondary);

    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: 100vw;
  }
}`

i added a little bit of javascript to spice things up ,when the user click on change the subscribe choice is changing.

`function showPlan(currentItem) {
  const item = subscribe[currentItem];
  headText.textContent = item.head;
  price.textContent = item.price;
}`

Community feedback

Lucas 👾•104,340
@correlucasPosted about 2 years ago
👾Hi @yishak621, congrats on completing this challenge!

I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

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.

Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!
Marked as helpful
0
yishak abrham•2,150
@yishak621Posted about 2 years ago
@correlucas thanks lukas i will apply that too ....very helpfull
0
Hyron•5,870
@hyrongennikePosted about 2 years ago
Hi @yishak621,

Good job on your first attempt of the challenge

Just a few suggestion. You can add background-repeat: no-repeat on the .center to stop the background from repeating.

You can either the following rule below you other rules in the CSS file.

.grid1x2 { max-width: 350px; height: auto; transform: none; box-shadow: rgb(149 157 165 / 30%) 0px 8px 24px; }

remove the max-width on the .sub and add the following.

.annual { flex-grow: 1; text-align: left; margin-left: 20px; font-size: 1.2rem; }

background color of the content.

.order { background: #fff; }

This is a good starting point it will get you closer to the design in the challenge.
Marked as helpful
0
yishak abrham•2,150
@yishak621Posted about 2 years ago
@hyrongennike thanks man i will update it ..it means a lot
0
yishak abrham•2,150
@yishak621Posted about 2 years ago
@hyrongennike https://www.frontendmentor.io/solutions/responsive-two-svg-background-for-profile-card-component-JgBJN8jCrD please help me with these SVG background problem
0
Hyron•5,870
@hyrongennikePosted about 2 years ago
@yishak621 they look okay on desktop you'll just have to position them differently for mobile and desktop mobile will obviously need a media query
0
yishak abrham•2,150
@yishak621Posted about 2 years ago
@hyrongennike thank you u can see it now it is awesome bro
0

Please log in to post a comment

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