HTML, CSS, Flexbox

Community feedback

• 

  mitch-webdev•60

  @mitch-webdevPosted almost 3 years ago

  Hey Dejan,

  Good work in my opinion!

  My suggestion would be:

  • You could make sure the text and the image are using the exact same space by specifying the amount of grow both elements have. Use flex:1 for both elements so they use the same amount of space. :)

  I am a beginner so I cannot guarantee it is the best solution but you could look into it ;)

  Keep doing great work!

  Mitch

  Marked as helpful

  1
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi YDekidex,

  Great solution - nailed it!

  • you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approach
  • you also need to explore background-blend-mode. (multiply usually does the trick)

  All the best!

  Marked as helpful

  1