Submitted about 1 year ago

Profile card component

Alok Suman•2,380

@Alokray007

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

In this challenge I faced issue with background image adjustment but somehow with the help of google I managed to do it. feedback related to margin and padding can be provided. I mostly use padding for providing gap between elements. Is it a right way, please guide.

Community feedback

AGBOHOUN Obed•90
@Obed67Posted 11 months ago
Well done sir. well done it's perfect
0

Adedeeoyin•510

@AdedeeoyinPosted about 1 year ago

how do you add the background image, do you use gradient because its kinda confusing

Hanana•170

@meantoesPosted about 1 year ago

@Iamdodo22 let me try to answer your question

so if you see their code, the background is inserted from CSS, check on this code below

body {
  /* inserting the image from the package */
  background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  /* positioning the images to match the design */
  background-position: right 50vw bottom 40vh, left 40vw top 45vh;
  background-color: var(--clr-primary-bg-body); /* bg color of body */

I hope you find this helpful :) any correction from the author? @Alokray007 have a nice day everyone🌞

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