Profile Card Component Built with CSS Flexbox, Grid & Css Positioning.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Johny, congratulations for your solution!

  You've done a really good work here, you've also used a shorthand for the background and this is amazing!

  I don't recommend you do it in this case, because the background will be a huge line of code to manage, try to use instead the properties separately.

  I've positioned the circles and you see the code below (note that you've to give some fine adjustments, but is working now)

  body {
      font-family: var(--ff-primary);
      background-color: var(--clr-primary-100);
      background-image: url(bg-pattern-top.svg) , url(bg-pattern-bottom.svg);
      background-size: cover;
      background-position: top -1086px left -618px, bottom -1146px right -370px;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Hope it helps and happy coding bro!

  Marked as helpful

  0

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  thank you sooo much for all your feedback bro. i don't know what I'd do without you 😢. I'll implement the code soon.

  1
• 

  Yeabsira•480

  @itsyabaPosted over 2 years ago

  Hey Johnny , Nice Work

  Your code is really readable and that's nice and you could have used flexbox instead of position don't get me wrong both of them works but when you are coding a larger project using flexbox is more recommended because when you center items using position you could end up covering items that you don't want to cover up and it really pain in the ass to make it responsive after using position .

  Nice Work Keep It Up!

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  thank you man, for commenting in the readabilty of my code. it neans alot. i intially planned to use flexbox but i got a bit confused as to how to go about it so i went with positions 😂, imagine that?

  but you are right tho. flexbox is a much better option. I'll see how i can refactor. thanks again man.

  0