Profile-card-component solution

Community feedback

• 

  imad•3,330

  @imadvvPosted over 2 years ago

  Greetings Alexandru Stefan Gherhes!! Congratulations on completing This challenge!, 👏

  The background images, a litter tricky on this challenge, but you can control it very easy with pseudo-elements on the body, I actually take some time to go trough your solution and, I did some fixes, Hope you found it useful

  index.html, line 32

     <div class="background">
        <img src="/images/image-victor.jpg" alt="" />
      </div>
  

  we moved img to .background div to control it position with css, and also Notice that the path to images need to fix.

  style.css line 52

  body {
    background: var(--dark-cyan);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  
  body::after {
    content: "";
    position: absolute;
    height: 50%;
    width: 50%;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url(./images/bg-pattern-top.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 100%;
  }
  
  
  
  body::before {
    content: "";
    position: absolute;
    height: 50%;
    width: 50%;
    bottom: 0;
    right: 0;
    z-index: -1;
    background-image: url(./images/bg-pattern-bottom.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  article {
    /* margin: 50% auto;   no need of all this margin*/
  }
  
  .background {
    background: url(/images/bg-pattern-card.svg);
    height: 130px;
    /* max-width: 375px; */
    border-radius: 10px 10px 0px 0px;
    position: relative;
    padding: 1rem;
  }
  
  .background img {
    width: 30%;
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer {
     padding: 1rem 2rem;
  }
  h2 {
    margin-block-start: 2rem;
  }
  
  /* now You can safely  remove all this media query */
  
  @media (min-width: 1440px) {
    /* body {
      background-image: url(/Profile-card-component-main/images/bg-pattern-top.svg),
        url(/Profile-card-component-main/images/bg-pattern-bottom.svg);
      background-position: top -320px left -330px, bottom -450px right -250px;
      background-repeat: no-repeat, no-repeat;
    } */
  
    article {
      /* margin: 300px auto; */
    }
  }
    
  
  
  

  if you like and found this useful, you can play around with this code a take what work's well for you,

  Over All Keep up The Good Work, and Have a Good Day/Night 👍

  Marked as helpful

  2

  ---

  

  P

  Alexandru Stefan Gherhes•580

  @AlexandruStefanGherhesPosted over 2 years ago

  @imadbg01

  I have just went over and applied what you suggested, and it works as it should.

  I have not thought on applying pseudo elements on the body for the background images, now i see that is a good method.

  Regarding the display:flex on body to align the content to center, i have also tried it and found it was squishing the div making it smaller width wise, and not finding a solution i opted for the margin 50% auto to compensate.

  For the body::after when you specify background-size: 100%; it works fine for the desktop size, but when i resize it for mobile the picture is very small and not in the correct position, but applying background-size:cover seems to fix that.

  Thank you for the help, i learned something new regarding the pseudo element for the body image.

  1

  

  imad•3,330

  @imadvvPosted over 2 years ago

  @AlexandruStefanGherhes

  Glad to hear that it was helpful!, and as a rule of dump that I follow, when I have a decorative element on the design, I use the pseudo element for it, because then I can split the decorative elements from the structure of the page, and have a clean workflow to follow. but over all Thanks for the feedback! am really happy to hear that you found our suggestion helpful.

  1