aprendiendo a usar scss

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Jhonny, Congratulations on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered. First of all remove the margins from the container and add min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      min-height: 100vh;
      background-color: #090b1a;
      font-family: Inter,sans-serif;
      font-size: 15rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .contenedor {
      /* margin: 0 auto; */
      width: min(95%,1200rem);
  }
  

  2.The code you've used to make the overlay effect on the image its working, but you can take a shortcut:

  YOUR CODE:

  .overlay {
      background-color: rgba(141,42,203,.524);
      border-top-left-radius: 10rem;
      border-top-right-radius: 10rem;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
  }
  

  USING MIX-BLEND-MODE:

  To have the exact tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1