Responsive web page using Flexbox.

Community feedback

• 

  Ori Guy•110

  @origuyPosted almost 3 years ago

  hey !

  the card looks really nice.

  1. about the overlay I would add a transition on the color to and as a result the color will change gradually and fade out when you stop hover
  2. I would suggest to add overlay the the color so it would be a bit transparent.
  3. I suggest to add the image in a img tag and not as a background it will be more professional and accessible for people with screen readers

  Keep on Coding !

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Clint,

  You've done a decent job on this one, nice work!

  • I noticed that the card is quite narrow on really wide monitors, this is due to your max-width: 25%; in your max-width: 1368px. I think you could really simplify things here and just swap max-width: 16%; for something like max-width: 350px; and remove all the media queries. Here is how max-widths work
  • You don't need to declare image-equilibrium again on hover: background: url(./images/image-equilibrium.jpg) no-repeat center/cover, url(./images/icon-view.svg) no-repeat center hsl(178, 100%, 50%);
  • you could clear your accessibility/html report if you add some alt-texts

  Hope that helps!

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @AntonioHouTX ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  1. About image overlay, you can add element and set it's position as absolute.
  2. I think adding transition effect on your hoverable elements like heading and creator name will make your work more beautiful.
  3. Try BEM structure for classing the elements. It will help you on bigger projects, I think.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  0