Skip to content
Submitted almost 2 years ago

Profile card component

NT-squared•110
@nt-squared
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! Here is my solution.

I am not sure about the background-image if it is good practice? Please leave comments on how I can improve my code.

Appreciate your feedback for me. Thank you so much.

Community feedback

  • Rachel Johnson•510
    @rachelktyjohnsonPosted almost 2 years ago

    Hi NT-Squared, thanks for sharing your solution. It's looking great!

    I love the solution that you went with by using ::before and ::after and giving each an absolute position that is still responsive. When I was doing this challenge myself I almost went that way because I wanted to use absolute positioning.

    Another way that you can do this is to give body two background-image and background-position properties, like so:

    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
background-position: left 50vw top 40vh, right 46vw bottom 50vh;

    It does the job in 2 lines!

    Marked as helpful
    0
    NT-squared•110
    @nt-squaredPosted almost 2 years ago

    Thanks, Rachel! Your advice is so helpful 👍

    0

Please log in to post a comment

Log in with GitHub

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