profile card using HTML, CSS, and Flexbox

Community feedback

• 

  Hadiza•200

  @ThedeezatPosted over 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

  0

  ---

  

  Marcus Hugo•365

  @marcus-hugoPosted over 3 years ago

  @Thedeezat

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

  0
• 

  Austin Christopher•20

  @achristopher144Posted over 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

  0

  ---

  

  Marcus Hugo•365

  @marcus-hugoPosted over 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!

  0