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 depending on their device's screen size
- See hover states for interactive elements
- HTML
- CSS
- Flexbox
Use rem for font size rather than px
.attribution {
position: relative;
top: 50px;
font-size: 1.1rem;
}
Use flexbox to center elements vertically and horizontally
body {
background-color: rgb(22, 30, 54);
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 1.6rem;
}
Create shadows for elements
.card {
position: relative;
width: 300px;
height: 550px;
border-radius: 10px;
box-shadow: 0px 25px 4px 15px #17182b;
background-color: rgb(34, 43, 71);
}
Use landscape elements to make site more accessible
<main>
...
</main>
<footer>
...
</footer>
Create transitions when hovering over elements
.mask:hover .background {
opacity: 0.5;
transition: 1s;
cursor: pointer;
}
I want to get more familiar with using flexbox and how to use max-width to make the pages more responsive to resizing
- Frontend Mentor - @jwolf9