@MohamedAridah
Posted
Hello @12Kentos, Good job it's almost identical to the design👍👏
However i have some notes for you:
-
use
min-height: 100vh
for the body instead of usingheight: 100vh
. This will allow your content to take more vertical height if content needed to. So user can see all the content. -
instead of using these styles for
.eth-cube-img
.eth-cube-img {
width: 30.02rem;
height: 30.02rem;
border-radius: 0.8rem;
}
you can just give the <img>
the full width and the padding
of .eth-card-container
will make sure that there are space around the image. So your styles for .eth-cube-img
could be:
.eth-cube-img {
width: 100%;
border-radius: 0.8rem;
}
- for the hover effect you can Delete
.eth-eye-img
img tag and.eth-img-container
styles and try pseudo elements like::after
or::before
like:
.eth-img-container::after{
content: url(./images/icon-view.svg);
position: absolute;
background-color: rgb(0 255 247 / 45%);
width: 100%;
height: 100%;
opacity: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
transition: .3s ease;
}
.eth-img-container:hover::after {
opacity : 1;
}
-
instead of using
<p>
element for.eth-title
you can use<h1>
because this is a a heading. -
use
<a>
element instead of span for.eth-auth-name
. It's more Semantic and on click this name this may lead to another page. -
you can see My solution for this challenge it may be helpful for you..!
I hope this wasn't too long for you, hoping also it was useful😍.
Goodbye and have a nice day.
Keep coding🚀
Marked as helpful