NFT Review using Pure HTML and CSS

Hey there For your question on how to overlay, use the pseude elements ::before and ::after on the image container.

Below is an example of how to overlay using the pseudo elements I listed above. The before property can be used to set the color, the after property for the eye icon. Doing otherwise means the icon will be hidden behind the color as it will be positioned absolute.

HTML

 div class = 'img'
 img src = "img-here"  alt = "any_text"
  </div>
   </div>

CSS

.container{
position: relative;
}
.img::before{
background-color: blue;
position: absolute;

.img::after{
background: url(./Image jpg) ;
position: absolute;

Don't mind the messy code though, but other than what was given, you can use the top, left or right property to position it to the center of the container (which is the .container specified)

Hi THIH_NEZZY, Great job on this task. Few Suggestions

• Wrap your code with a main tag to remove the accessibility errors

<main> 
   <div class="card">
       ...
   </div>
</main>

• Remove the images from the span in the price-time div and place them side by side with the span

<div class="price-time">
    <div class="price">
        <img src="./images/icon-ethereum.svg" alt="eth" />
        <span>0.041 ETH</span>
    </div>
    <div class="time">
        <img src="./images/icon-clock.svg" alt="clock" />
        <span>3 days left</span>
    </div>
</div>

Also update the CSS to look like

.price-time {
    display: flex;
    justify-content: space-between;
    margin: 7% auto 0 7%;
}

.price,time {
    display: flex;
    align-items: center;
}

.price,time > img {
    margin-right: 5px;
}

.price>span {
    color: var(--cyan);
}

.time>span {
    color: var(--soft-blue);
}

• I would recommend you research the use of padding and apply it to the parent card rather than using margin on child elements.

• To overlay properly would then be easier with absolute positioning and flexbox.

I hope you find this useful