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 with Sass

Yunus Alif 150

@frontendnus

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


I'm done with this project but something confuss me. How to make the line or in my code is border-top is full width, not crash with the padding? Please give me your feedback

Community feedback

Davide 1,725

@Da-vi-de

Posted

Hi, in your case you could delete border-top, in HTML add a <hr> tag right here:

<p class="city">London</p>
     <hr>
        <div class="social">

then you can style it like so

hr {
    padding-right: -3em;
    padding-left: -3em;
    border: 0 none;
    height: 1px;
    background-color: choose a very light grey color
    color: choose a very light grey color
}

you have padding: 3em in class .content if you want an extended line you need to take that padding (left and right) off! It should work.

  • A little caveat: You see in use negative value, this is one of the few case where it can be used. Generally using negative values is not good practice! Be aware of it.

Try in your text editor the above code, hope it helps, keep coding :-)

1

Yunus Alif 150

@frontendnus

Posted

@Da-vi-de Thank's bro I'll try it later

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