@Yazdun
Posted
Hello Kristina, well done on this challenge š I see you've written extremely clean code, thumbs up š
- about solution itself, as you said yourself, you don't need JS for hover stats, all you need is :
.card__image--container:hover .card__image--backdrop,
.card__image--container:hover .card__image--icon {
display: block;
}
in your css and you'll achieve same functionality without any javascript.
- here there is another issue I found, you've used
width: 35rem;
andheight: 59.6rem;
on your card, so when device's width gets smaller your layout will break, it is not recommended to use static size for your elements and you must let the content specify the size, so what you can do is :
.card {
width: 100%;
max-width: 35rem;
// rest of the code ...
}
.card__image {
display: block;
position: relative;
/* let the content specify width */
max-width: 100%;
border-radius: 0.8rem;
}
and some padding on the body, will make sure that your layout won't break on small screens.
-
use
PRETTIER
extension on your code editor to format your code. -
side issue about github š : don't jam all your solutions on one branch, create separate branch for each solution, and as you are already using netlify for deployment, you can easily deploy each branch automatically using netlify, this way if you mess up one of your project, your whole repo won't go bananas and you can easily delete the corrupted branch.
I also opened a pull request to your repo which will fix the solution issues I mentioned, keep coding
Marked as helpful
@Kristina225
Posted
@Yazdun thank you so much for your comments about my code! They are really helpful, for both this one and future projects. As for the github repo, I don't know why I thought it would be easier to put all projects together. It's not. And I didn't even think about what would happen if I mess up on one project like you said. :) Thank you again.
@Yazdun
Posted
@Kristina225 glad I could help