Submitted almost 3 years ago

Profile card component

Eshan Chandra Dangwal•50

@Eshan01

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I faced a problem setting the background images as given in the sample design. Is there any better way to do it?

Community feedback

Alex•660

@al3xbackPosted almost 3 years ago

Hi Eshan,

My feedback is:

step 1: remove place-content and background properties(except: background-color) from body and add some grid properties.

body {
   ...
   place-content: center; //remove
   background-color: //keep!
   background-image: //remove
   background-position: //remove
   background-repeat: //remove
   grid-template-columns: 1fr auto 1fr; //add
   grid-template-rows: 1fr auto 1fr; //add
   overflow: hidden; //add
}

step 2: add 2 new html elements, place it before main, the structure will be like this.

<body>
   <div class="decoration-bg decoration-bg-1"></div>
   <div class="decoration-bg decoration-bg-2"></div>
   <main>...</main>
   <footer>...</footer>
</body>

step 3: add styles to newly added elements.

.decoration-bg {
    position: relative;
}

.decoration-bg-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.decoration-bg-2 {
    grid-area: 3 / 3 / 4 / 4;
}

.decoration-bg-1::before,
.decoration-bg-2::before {
    content: "";
    position: absolute;
    width: 980px;
    height: 980px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.decoration-bg-1::before {
    bottom: 0;
    right: 0;
    background-image: url(./images/bg-pattern-top.svg);
    transform: translate(20%, 20%);
}

.decoration-bg-2::before {
    top: 0;
    left: 0;
    background-image: url(./images/bg-pattern-bottom.svg);
    transform: translate(-20%, -20%);
}

step 4: add styles to main and footer.

.card {
   ...
   grid-area: 2 / 2 / 3 / 3;
}

.attribution {
   ...
   padding: 12px 0;
   grid-area: 3 / 1 / 4 / span 3;
   align-self: end;
}

Marked as helpful

Eshan Chandra Dangwal•50

@Eshan01Posted almost 3 years ago

@al3xback thank you, I will make these changes.

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