Result Summary Component

Community feedback

• 

  hitmorecode•6,660

  @hitmorecodePosted about 1 year ago

  Nice well done. Just a few thing that you can fix

  • You are using margin on the wrapper to place the card in the middle of the page. You can remove this and add flexbox on the body

  body {
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    font-family: 'Hanken Grotesk', sans-serif;
    background-color: var(--clr-pale-blue);
    display: flex; /* add these four lines */
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  

  • You have a border on the right side, but if you look closer, you'll see that the border is not following the edges of the border radius.

  .right {
    background-color: var(--clr-white);
    border-radius: 0 1rem 1rem 0;
    box-shadow: var(--box-shadow);
    /* border: 1px solid var(--clr-light-lavender); */ /* turn this on */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40ch;
    transform: translateX(-.5rem);
    z-index:-1;
  }
  
  .inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: 2px solid var(--clr-light-lavender); /* remove this one */
    height: 100%;
    padding: 2rem 3rem;
  }
  

  • The left side of the right card also ends with sharp edges the overlapping with the left is is not seamless.

  Marked as helpful

  1
• 

  Alessandro•215

  @alessandro-giuzioPosted about 1 year ago

  Hello hitmorecode, thank you for taking the time to review my work, much appreciate it. Will revisit the design, also I am exploring the json option. Thank you again.

  0