NFT card using Flexbox

Hi, LadyLucyfurr👏

Congratulation for finishing the challenge🎉.

• For the fonts its its better to imported in css .

eg :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

Here we imported font family poppins, with the following weight: (400, 500, 700).

• For the avatar image you can use border, like this :

img{
border : 2px  solid  white;
}

• For the view icon here a way to do it:

• HTML code:

<div class="img-container">
<img class='view' src="images/icon-view.svg" alt="">
</div>

• CSS code:

.img-container{
height: 30rem;
background: url('images/image-equilibrium.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 1rem;
border-radius: 10px;
}
.img-container:hover{
box-shadow: inset 0 0 0 1000px var(--cyan-bg);
}

.img-container:hover .view{
display: block;
}

.img-container .view{
display: none;
}

Tip remember to use relative values rem em instead of absolute values px that help you make your website responsive in different screen sizes.

good luck:)

Hey 👋,

for number 2, even though you got the font weights you'll have to explicitly set them where you need them. for example, if you wanted paragraphs to have a weight of 400, you have to put that in your CSS p {font-weight: 400;}

for number 3, you can put a white border around the image. so, grab that image in your CSS and add these styles:

border: 1px solid white;
border-radius: 100vw;

*note: I added the extra wide border radius to make sure its a circle.

number 1, you'll have to put some styles over that div with a class of 'img__wrapper' in a hover state, e.g.:

div.img__wrapper:hover {
...put styles here...
}

CSS Image hover effects

good job on your solution!