Profile card

Community feedback

• 

  Alexandre•140

  @Alexandre-ChsPosted almost 4 years ago

  Hey !

  I'm french, sorry for my english..

  1. For the line gray :

  You can do :

  -Make in HTML a div with nothing inside, just a class like class ="border-gray" -In css you can do : .border-gray { display : block; height: 1px; and background-color : xxx; } Easier way i think. Just play with opacity on you'r hsl to match with the preview.

  2. For the svg/background :

  It's a solution, but i don't know if it's the good way.. but :

  • add background-image on you'r body ( the two svg ).
  • play with background-position and the vh/vw.
  • don't forget a media queries, because circle it's not the same on desktop and mobile!

  If you want to see the my solution, you can go on my profil!

  I hope it's ok for you ! bye

  0

  ---

  

  Gabriel Albuquerque Magalhães•50

  @magaliaisPosted almost 4 years ago

  @Alexandre-Chs Hey man, thanks. No problem about the english, I'm from Brazil hahaha. I used a border-top propertie from CSS for the gray line, but I'm having some issues about the positioning of the svg on the background. I'll try to use some position: absolute or something like that. And than try to add the @media for responsivity.

  Edit: I moved the img tag with the svg and now they are inside the "card" div. Then I used position: relative on the card and position: absolute on both of the SVG details. And now they are responsive, adjusting as the screen gets smaller.

  0