All solutions

Hey all,

I have really enjoyed this challenge, it's my favorite one so far! I feel that I've finally got to understand how Flexbox works, thanks to the suggestions kindly provided by @zsoltvarju in my previous challenge.

• Question:

I've managed to make the image overlay in CSS, but it was quite challenging! I would appreciate feedbacks and technical advice.

The code related to the overlay in index.html is in class="pictures" div. In CSS please review the following lines:

/* nft and overlay images container */
.pictures {
position: relative;
}

/* nft image */
.parent-img {
display: block;
width: 100%;
height: 300px;
margin-top: 20px;
border-radius: 10px;
position: relative;
}

/* overlay container */
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
width: 100%;
overflow: hidden;
}

.overlay img {
opacity: 0;
}

/* hover over nft card image */
.pictures:hover img{
opacity: 1;
transition: 0.3s ease-in-out;
}

.overlay:hover {
cursor: pointer;
background-color: hsla(178, 100%, 50%, 0.6);
}

• Problem 1

I think I should have made a grid for the summary content, that way I could have positioned every item in a more precise and clean way. I have to embed the last two scores in a separate div, just to make them justfied on the right side. What was the best way to achieve the correct position?

• Problem 2

The responsive part was tricky. I had to add media queries, instead of relying on Flexbox only. The result side was always too big on mobile. What is the easiest way to do that?

• Problem 1

How to properly position the card div in the center of the viewport (mobile and desktop)

• Problem 2

Text style and positioning: "Improve your front-end skills by building projects", the sentence is not correctly align. I am not sure if it's the padding or the margin.. or anything else.