Design comparison
SolutionDesign
Solution retrospective
Any feedback is, as always, appreciated :)
Community feedback
- @faha1999Posted about 2 years ago
Hello, filecc 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
<main>
to wrap your code, instead ofdiv
. like
<main class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center"> <div class="card"></div> </main> <footer class="attribution container-fluid d-flex justify-content-center"> </footer>
You could also make use of
<section>
and/or<article>
semantic tags. This would help improve accessibility.- active-state of
img
<div class="item"> <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 > <img class="card-image img-fluid" src="./images/image-equilibrium.jpg" alt="image-equilibrium"> </div> </div> </a> </div>
- hover effect
.item { 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; }
I hope it will work. Happy coding.
Marked as helpful0@fileccPosted about 2 years ago@faha1999 thank you! honestly, I’ve completed forget about the hover effect on the image… 🤣 I’ll give it a try with your code, thank you.
0 - You might want to use semantic tags like the
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord