Stat Solution

Community feedback

• 

  hitmorecode•7,540

  @hitmorecode

  Posted about 2 years ago

  Congratulations well done. The problem you have, you can fix it with mix-blend-mode: multiply; and then play with the opacity. You should get there.

  }
  .image-header .cover-image {
  background-color: hsl(277, 64%, 61%);
  position: absolute;
  width: 325px;
  height: 238px;
  top: 78px;
  opacity: 1; ## start with 1 and play around
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  mix-blend-mode: multiply;
  }
  

  10

  Marked as helpful
• 

  Salah Shadoud•240

  @SalahShadoud

  Posted about 2 years ago

  Hey There! Congrats on Finishing this Challenge. Writing HTML classes can save you alot of a time when you review your code or if your working with team on a project, i haev a few notes for you and maybe this will help you in your future challenges and projcts:

  • Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of purple but it doesn't describe what the class is for (prurple text, purple background) so you can give it a class of purple-text to clearify the purpose of the class when someone else read your code.
  • Use Comments for better structuring and understanding of the code (Avoid needless comments), for example comment your main sections of the code like the two sections (text or insights section, image section), and use comment on links and CDNs that you use on your project.
  • Use utility classes for most used styles like: (flex, grids, font sizes, font weights, colors, background colors), for example create two utility classes (one for flex-row and one for flex-column) and create utility classes for font weights that you are using in your prject to prevent reapeating this styles in css and instead use this classes on the html side.

  hope this can help you and give a well understanding of how to write a better and readable code, Happy Coding

  00