Responsive landing page using flex and grid

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Joseph, Congratulations on completing this challenge!

  I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it: The way you’ve applied the purple color is fine, but if you want the exact color 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

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @joehaddad1000,

  Nice job on your first attempt

  Just a few small fixes, you can replace you body rule with the following to center the card on the page.

  body {
      background-color: hsl(233, 47%, 7%);
      font-size: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: white;
      font-family: 'Lexend Deca', sans-serif;
  }
  

  replace your container rule with the one below and center the content.

  .container {
      border-radius: 10px;
      background-color: hsl(244, 38%, 16%);
      max-width: 1170px;
     margin: 1rem;
  }
  
  .texts {
      margin-inline: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  

  Hope this is helpful.

  Marked as helpful

  0