@RenszCamacho
Posted
Hi, harsh.
I've been digging into your code. And this is how I would do it.
- I would give your card width, height, and a box-shadow.
.card-box { width: 353px; height: 376px; background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: -30px 50px 50px #00000030; }
-
I would delete the images from the Html. and places it in the Css.
-
Now place the card in the center, so in the main it would do something like this.
.main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
- Finally to the body I would place the background-images.
body { background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }
Hopefully, it helps.
Happy coding🧑💻
@RenszCamacho
Posted
@RenszCamacho Another thing, that I forget, is to add an alternative text to the images and remove the id if you are not using it.
<img src="./images/bg-pattern-card.svg" alt="victor" />
