Skip to content
Submitted over 2 years ago

Profile page using CSS grid and flexbox

Kate•170
@YayoKB
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted over 2 years ago

    Congrats @Kate for completing this challenge!

    To answers you question regarding the background images, since this are decorative images, you want to use the background-image property. So in your <body> element your css styling should look like this:

    body {
  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-color: hsl(185, 75%, 39%);
}

    (You can play around with the background-position to place background wherever you want)

    I also suggest adding the following to your body element to perfectly center you card to you page and deleting the current height you have and the overflow. You'll also want to delete everything from you wrapper class since its no longer needed with the bottom code.

    body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Happy Coding!

    Marked as helpful
    1
    Kate•170
    @YayoKBPosted over 2 years ago

    @vcarames Thank you so much for this! I've updated my code and credited you. I had no idea about adding values after the left and top etc.!

    0
    バレンタイン 😈•64,170
    @VCaramesPosted over 2 years ago

    @YayoKB Background looks good!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord