Profile-card-component using Flexbox

Community feedback

• 

  Adrian H•420

  @AdrianX19

  Posted over 3 years ago

  Hi @cyberspatial!

  The other way to bite this patterns in the background would be to use background-image to the body (it accepts multiple arguments) and then you can use background-position to place the circles wherever you want :) also I would suggest to use <main> tag for your card container instead of a <div>.

  All in all really good job! :)

  20

  Marked as helpful
• 

  ROCKY BARUA•1,090

  @Drougnov

  Posted over 3 years ago

  Hello @cyberspatial, great job. You can add the patterns by using pseudo-classes(:: before,:: after) to the body. Try this:

    body{
    position:relative
    }
  
    body::before {
    background: url(./images/bg-pattern-top.svg) no-repeat bottom right;
    top: 0;
    left: 0;
  }
  
  body::after {
    background: url(./images/bg-pattern-bottom.svg) no-repeat top left;
    top: 100%;
    left: 100%;
  }
  

  It's probably the most efficient way. Also here are something you might wanna consider to change/add:

  • The card looks much wider than the actual design. So add max-width to the card to fix that.
  • You need to start with level one heading(h1). That means you cannot start with lower(h2,h3, etc). Don't use the section or article tag if there is no child heading. Use div instead.

  Overall your design looks great. Have a great day :)

  20

  Marked as helpful