Submitted almost 3 years ago

Profile Card Component Built with CSS Flexbox, Grid & Css Positioning.

accessibility, bem

Johnny•490

@johnnysedh3lllo

A solution to the Profile card component challenge

Preview Code

Solution retrospective

hey guys, finally got another one done.

here are some of my observations from taking on this challenge.

#Difficulties-and-Uncertainties

although my major difficulty was being able to place the profile image at the specified position, i was able to get it done but i still am not exactly sure i took the best approach. please if you have suggestions in regards to a better approach, i would love to know about it.
secondly, i had a bit of an issue positioning the svg background image properly. i still got it done to some degree but I'm not exactly sure of it in terms of scalability on other viewports. if you do have an idea on the best way to position them, i am open to learn from you.

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello Johny, congratulations for your solution!

You've done a really good work here, you've also used a shorthand for the background and this is amazing!

I don't recommend you do it in this case, because the background will be a huge line of code to manage, try to use instead the properties separately.

I've positioned the circles and you see the code below (note that you've to give some fine adjustments, but is working now)
```
body {
    font-family: var(--ff-primary);
    background-color: var(--clr-primary-100);
    background-image: url(bg-pattern-top.svg) , url(bg-pattern-bottom.svg);
    background-size: cover;
    background-position: top -1086px left -618px, bottom -1146px right -370px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
Hope it helps and happy coding bro!
Marked as helpful
Yeabsira•480
@itsyaba
Posted almost 3 years ago
Hey Johnny , Nice Work

Your code is really readable and that's nice and you could have used flexbox instead of position don't get me wrong both of them works but when you are coding a larger project using flexbox is more recommended because when you center items using position you could end up covering items that you don't want to cover up and it really pain in the ass to make it responsive after using position .

Nice Work Keep It Up!

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