This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: https://www.frontendmentor.io/solutions/3column-preview-card-component-JddbIVTFRP
- Live Site URL: https://andreimaier.github.io/3-column-card/
- Semantic HTML5 markup
- BEM naming convention
- Flexbox
- Mobile-first workflow
- to upgrade my CSS reset plate
- using CSS variables for colors and fonts
- hiding the main heading of the page using
position: absolute
,overflow: hidden
and negative margin to get it out of the viewport - positioning the card vertically using
display: flex
on thebody
margin-top: auto
will make the last element in a container float to the bottom of its parent (which in turn helps with responsiveness)mix-blend-mode: screen
combined withcolor: black
is a nifty way to setcolor
to match the background. used it to set the color of my buttons' text- which images need
alt
text and which should usearia-hidden: true
instead - used BEM naming convention for the first time and found it useful
- used
flex
property for the first time
<h1 class="sr-only">3-column preview card component</h1>
.card__button {
color: black;
mix-blend-mode: screen;
}
CSS Grid
flex
property
- MDN - flex - This helped me make some sense of
flex
shorthand. I really like how it worked and I will continue trying to make sense of it in the next projects. - Markdown Guide - Used this documentation to write this README.
- Frontend Mentor - @andreimaier
Learned a lot from @MelvinAguilar's solution