Submitted about 3 years ago

html, css, flexbox, vw unit

@akennich

A solution to the NFT preview card component challenge

Solution retrospective

Hi nice people, It was quite chalenging for me. I've learned new features such as the css-position, vw unit or how to add a coloured filter on an image. My solution is not that perfect for sure. I used too many ids, with some strange names hhhh, which is not easy to manipulate later. your notes and advices are amply welcomed.

Code

Please log in to post a comment

Community feedback

Luis paz•390
@Pazispeace
Posted about 3 years ago
Hi there aKennich! Nice solution :). I have some feedback that might help.
- First of all I would recommend you to use rem unit instead of em unit (you will have some troubles using em unit if you don´t know when to use it) rem vs em Units in CSS
- Set a max width to the card so the card does´t get bigger and bigger, I tried with 21 rem and works fine! Avoid using % in this case since it will always take the 40 % of its container, and its container is the body (which does not have a fixed width)
```
.card {
    max-width: 21rem;
    background-color: hsl(216, 50%, 16%);
    border-radius: 1rem;
    font-family: 'Outfit', sans-serif;
    padding: 1rem;
}
```
- I think you forgot to add to the span of "Jules Wyvern" a white color hehe
```
span.cyan{
    color:hsl(0, 0%, 100%);
}
```
Change the em unit for rem so you won´t have troubles with sizes : - )

happy coding, wish you a nice day! :D

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord