This is a solution to the Blog preview card challenge on Frontend Mentor.
Users should be able to:
- See hover and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
-Responsive web design,making the card to adopt depending on the user device. -Making the images responsive by adding a max-width property on them
img{
max-width:100%;
display:block;
}
-Css transitions-making the link transition smoothly by adding transition timing function
transition: .2s ease-in;
-
Web.dev - This article helped me understand how to make images responsive.I would recommend it to anyone still learning this concept.
-
Conquering ressponsive layouts - This is an amazing course by Kevin Powell it helped me greatly to level up my responsive design concepts.
-Opudo Prince
- Frontend Mentor - @codecrasher
- Twitter - @opudoprince