html and css

Community feedback

• 

  Adriano•42,800

  @AdrianoEscarabotePosted 4 months ago

  Hi Ewane-Christian, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

  To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

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

  The rest is fantastic.

  Hopefully, you'll find it helpful. 👍

  0
• 

  hitmorecode•7,240

  @hitmorecodePosted 4 months ago

  Nice well done. These are the issues with your page.

  • Avoid using inline CSS style.
  • There is no <h1> tag on your page.
  • Avoid using margin to place the card in the center of the page. Remove margin: auto and margin-top: 50px in the container. Do this instead.

  body{
      background-color: hsl(233, 47%, 7%);
      // add these lines
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  • Inside .text remove margin: 7%; and add padding: ..px.
  • Always apply some kind of CSS reset. Here is an example of a simple CSS reset.

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  • Instead of using grind-template-columns: 1fr 1fr use grid-template-columns: ..px ..px;.
  • Remove width: 70%; on the .container.
  • For the overlay use mix-blend-mode: multiply; and play with the opacity to get as close as possible to the design.
  • Don't forget to make the page responsive.
  • When using the same font style on the entire page, is best to add it on the body.

  These are just the few things. I hope you find this helpful. Keep it up👌👍

  0