This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size.
- See hover states for all interactive elements on the page.
As a bonus I want to achieve the following extra challenges:
- The page must be accessible according to WCAG 2.1 standards, things like color contrast and clear element focus.
- I want to add minimal (hover) animations to the page.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- WCAG 2.1 best practices
- CSS Animations
- Astro - Astro Static Site Generator
- Accessible Astro Starter - My own starter template for Astro
- I haven't used the
::before
pseudo element in a long time to create an overlay hover effect, so it was nice doing that one again:
&::before {
content: '';
display: block;
opacity: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: hsl(178, 100%, 50%, 0.4);
background-image: url('../assets/icon-view.svg');
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
position: absolute;
transition: all 0.3s ease-in-out;
}
- Nothing at the moment.
- Nothing at the moment.