Order Summary

Community feedback

• 

  M•940

  @Dev-MV6Posted about 1 year ago

  • There are several ways to center an element in CSS, find the one you prefer the most: https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/, for this project since the card is the only main element in the page you can center it with the following style:

  .card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  

  and also remove the margin-top: 100px; you have set in the .card styles. This way the card would be centered correctly.

  • Regarding to the color issue, simply use the following styles to get the same colors as the original design:

  body {
    background: hsl(225, 100%, 94%) url('./images/pattern-background-desktop.svg');
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .card {
    background-color: #fff;
  }
  
  .card__plan {
    background-color: hsl(225, 100%, 98%);
  }
  
  button {
    background-color: hsl(245, 75%, 52%);
  }
  
  .card > a {
    color: hsl(224, 23%, 55%);
  }
  

  Hope you find this helpful.

  Marked as helpful

  1

  ---

  

  LyttleGC•30

  @LyttleGCPosted about 1 year ago

  @Dev-MV6 Thank you! This helped a lot!

  0
• 

  JosephAbuchi•220

  @JosephAbuchiPosted about 1 year ago

  The easiest way to center your element: display: grid; justify-content: center; align-items: center;

  1