Frontend Mentor | profile card using HTML, CSS, and Flexbox coding challenge solution

Community feedback

@Thedeezat

Posted almost 3 years ago

Hey Marcus 👋,

Nice work on this challenge. Both layout in desktop and mobile is pretty good and for the background i think you did a good job in the background positioning 👍.

I think for the horizontal line you can try this:

<span class = 'horizontal-line'></span>

.horizontal-line {
   width: 100%;
   height: 0.1rem;
   background: hsla(0, 0%, 59%, 0.3);
}

Marked as helpful

Marcus Hugo• 365

@marcus-hugo

Posted almost 3 years ago

@Thedeezat

Thanks for the help, I'll give it a try!

Austin Christopher• 20

@achristopher144

Posted almost 3 years ago

I'm just curious because I'm trying to solve this as well.

In your code, how did you size the card, I don't see any width or anything in your code regarding the size.

I'm just about 2 weeks into coding so I'm probably ignorant of what you used.

How how did you specify the height and width of the card within your code?

TIA

Marcus Hugo• 365

@marcus-hugo

Posted almost 3 years ago

@achristopher144

Thanks for asking! I went back through my css and the sizing is based on the bg-pattern-card.svg(350x140).

Originally, I did this without flexbox instead using display and position and width and height trying to match it to the design.

It's easier centering the card and the attribution using flexbox on the body and setting the direction to column and centering it's content. Then, setting the image-victor.jpg to display: block and position: relative to set it on the next line.

I don't fully understand this, but setting the min-height: 100vh, centers the card.

If you want to use flexbox, I started looking at this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and watched tutorials.

Hope this is helplful!

profile card using HTML, CSS, and Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community