Kawsar Ahmed Fahad• 2,680
@faha1999
Posted
Hello, Eliabe Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- You might want to use semantic tags like the
<footer>
to wrap your code, instead ofdiv
. like
<footer class="attribution">
</footer>
This would help improve accessibility.
- active-state of
img
<section id="img">
<a class="hover-effect" data-overlay="rgba(52,58,64,.6)" target="_blank" rel="noreferrer"><span class="hover-effect-container">
<span class="hover-effect-icon ">
<span class="top-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
</path>
</svg>
</span>
</span>
</span>
<div class="p-2">
<div class="ethereum-logo">
<img src="images/image-equilibrium.jpg" alt="nft image">
</div>
</div>
</a>
</section>
- hover effect
.img {
overflow: hidden;
position: relative;
}
.hover-effect {
display: block;
overflow: hidden;
position: relative;
}
.hover-effect:before {
background-color: rgba(44,45,48,0);
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.hover-effect-container {
left: 50%;
position: absolute;
top: -1.25rem;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
transition: .4s;
}
.hover-effect-icon {
color: #fff;
display: inline-block;
font-size: .75rem;
text-align: center;
}
- active-state of
h3
&p span
#content h1:hover, #creator :hover{
cursor: pointer;
color: #25e6eb;;
}
a small transition
will be more attractive.
I hope it will work. Happy coding.
Marked as helpful
0