Simple card web page using HTML and CSS only

hello my dear friend ♥ you can easily solve the svg background problem by simply just using background properties in right way

• so you have two so you just separate them with "," in background property. then set the position of them from right and bottom ( i mean change default direction which is left and top) then using vh and vw (vh for y , vw for x).sorry if my English is bad also you can check others or mine solution for that background too.
• other problem in your project is color. that name , numbers are not pure black if you see style guide you can find out.

Hey @IvanaCliffords 👋🏻 it's me again 😅

I have some quick tips for the accessibility issues and some other things.

• First, the background bubbles should have aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. Here's an example:

<img class="bg-pattern-top" src="images/bg-pattern-top.svg" alt="" aria-hidden="true”>
<img class="bg-pattern-bottom" src="images/bg-pattern-bottom.svg" alt="" aria-hidden="true”>

• Next, let's center the card, so here's how to do it:

body {
    width: 100%;
    background-color: hsl(185, 75%, 39%);
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

I hope this was helpful 👨🏻‍💻 If you want to see a different approach for the background images, you can check out my solution, if you have any question about my solution, feel free to drop them here. Cheers 👾