This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size (375px and 1440px)
- See hover states for interactive elements
- Solution URL: https://github.com/marazza-dev/fm-nft-card-solution
- Live Site URL: https://marazza-dev.github.io/fm-nft-card-solution/
- HTML5 markup
- Dart Sass
- CSS3 custom properties
- BEM naming convention
- Flexbox
The importance of using CSS pseudo-elements in order to create layout components such as the image overlay and the break line.
// LINE BREAK
&::before {
content: "";
width: 100%;
height: 1px;
position: absolute;
top: -1rem;
left: 0;
background: $clr-line;
}
// IMAGE OVERLAY
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: none;
cursor: pointer;
top: 0;
left: 0;
border-radius: 15px;
background-image: url("../images/icon-view.svg");
background-repeat: no-repeat;
background-position: center;
background-color: hsla(178, 100%, 50%, 0.589);
}
&:hover {
&::after {
display: unset;
}
}
I need to get more used to BEM naming convention with Sass super powers and improve my HTML semantic markup.
- Kevin Powell - Before and After pseudo elements - YouTube
- BEM Naming Convention - Greate explanation of BEM by examples.
- Frontend Mentor - @marazza-dev
- Twitter - @marazza_dev