Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component | is there a cleaner way?

funupulu 120

@funupulu

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Shout out to Web Coach on Youtube. Had to watch tutorial on how to positioning the profile picture. Still don't get it.

(https://www.youtube.com/channel/UCVu2I45VQ_TVin4MGEy4o4Q)

I wonder how to target certain elements inside a container? For example, the 26 next to Victor's name. How do I target only those characters for style?

.row-2, the bottom half of the card. I know there is a better way than just writing span everywhere.

I forgot the background. I'll come back to that later.

Always thank you for any feedback.

Community feedback

@nmnjnklc

Posted

Hello @funupulu,

You could wrap his age with <span> tag in order to target it in CSS. So HTML should look something like this:

<section class="row-1">
<h2>Victor Crest <span>26</span></h2>
      <p>London</p>
</section>

and to target that particular <span> you can either give it a class/id, or:

section.row-1 h2 span {
      font-weight: 400;
      color: #6a6f81;
}

To get those background patterns in place, try adding following css to your body:

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 35vh, 
                 left 48vw top 52vh;
}

Hope this helps. Happy coding!

Marked as helpful

0

funupulu 120

@funupulu

Posted

@nmnjnklc nesting a span inside h2? didn't even occur to me. thank you for that much. I'll update you on the background when I can. Thanks a bunch.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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