This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Live Site URL: Blog Preview Card GitHub Page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This challenge allowed me to review how to style the span elements and practice adding the box-shadows around the card. What stood out to me from the design was the label for the preview card. I went with the span element but I learned that there were some other options to recreate the design.
<div id="label">
<span>Learning</span>
</div>
#label {
height: 1.75rem;
width: 5rem;
background-color: var(--Yellow);
border-radius: 5px;
text-align: center;
}
span {
color: var(--Black);
padding: 10px 0;
display: inline-block;
position: relative;
bottom: 4px;
font-weight: 800;
}
I'd like to use this solution in an actual blog homepage and enabling a filtering feature.
- Frontend Mentor - @ysstudio22
- X - @YoshiCode03