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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Live Site URL: GitHub
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
css
.nft-box {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
padding: 3px;
max-width: 300px;
max-height: 570px;
background-color: hsl(216, 50%, 16%);
box-shadow: 10px 5px 5px black;
border-radius: 20px;
I want to continue learning flexbox and box-shadow. Also learning about how to make the site responsive for mobile users.
- W3S Schools - It's a great site containing resourses for HTML, CSS and JS.
- GitHub - Dri Espindola
- Frontend Mentor - @driespindola
- Twitter - @_driespindola