flexbox

Community feedback

• 

  riverCodes•300

  @riverCodesPosted over 2 years ago

  Hi, you don't need media queries or responsive anything for this challenge - this is just a static card design. At most it should be centered vertically and horizontally on the page. Anything more would be overkill. Besides that, I would suggest you a few improvements you could make.

  1. Your HTML indentation could be better, at the moment it is not quite readable.

  2. Your div.card-body doesn't have a closing tag. I think this is why your div.attribution is inside the card.

  3. To fix your HTML and Accessibility issues, wrap your main card in a <main> tag and your .attribution in a <footer> tag. Also, your page should always contain one <h1> element. Also, in line #21 of your HTML you have misspelt your href attribute as hred.

  4. Try using nested Flexbox's to create the layout of content inside the card.

  5. I can't see the active states in your design.

  • You have the right approach in using ::after pseudo element for the eye-icon. You should also use ::before for the color overlay between the thumbnail and the eye-con.
  • Next, you should apply the styles on hover (div:hover::before and div:hover::after). (pseudo classes are indicated by : and always go before pseudo elements, indicated by ::, if they are used together)
  • Use opacity: 1; and on the non-hovered states, opacity: 0; Put the transition property on the non hovered state.

  I hope that's helpful. Let me know if you would like further clarification. Besides all that, the actual size of your card is spot on. It is centered as well. You don't need to make it anymore responsive. Your image styling is correct as well :D

  0

  ---

  

  Just9krish•590

  @Just9krishPosted over 2 years ago

  @riverCodes Bro you're awesome, explaining all thing by typing, i can't think of typing all these by my self for others. But you are helping others.

  0

  

  riverCodes•300

  @riverCodesPosted over 2 years ago

  @Just9krish thanks bro, i appreciate it. I enjoy doing this from time to time :D

  0
• 

  Felipe•40

  @FelipeBMostPosted over 2 years ago

  Hi Melissa! Great job! You can get a better scaling making it smaller in a mobile-first approach and then increasing in size for wider screens. You can use Flexbox too to make elements stay side by side. Take a look at other people's codes. That will definetly help you a lot!

  0