Used Pure css

Community feedback

• 

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  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🧑‍💻

  1

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @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" />

  1
• 

  Harsh Porwal•10

  @h-harshPosted almost 4 years ago

  Thankyou soo much I got the things you said

  0