@PhoenixDev22
Posted
Hello @OliverNikolovski ,
I have some suggestions regarding your solution:
-
Anything with a hover style in a design means it's interactive. you need to add an interactive element
<a>around the image `Equilibrium #3429, Jules Wyvern -
For any decorative images, each img tag should have empty
alt=""( as you did )andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images in(icon-view). I see the other decorative images you have used css for them , I recommend to use an unordered list<ul>to wrapclass="card-status card-itemand in each<li>, there would be<img >and<p>. Then use flexbox properties to align them centrally -
the
icon-viewdoesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to bearia-hidden:trueorrole presentationwith empty alt -
the link should be wrapping the original image and either have
Sr-onlytext, anaria-labeloralttext that says where that link takes you. -
you can use
border-top:to theclass="card-footer card-item", no need to use<hr class="card-item"/>
CSS
-
Add this to the overlay as borders are not rounded. .overlay { border-radius: 0.4rem; }
-
Use
min-height: 100vh;for the<body>using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page -
width: 19.5rem;an explicit width is not a good way . Remove the width from the main component and change it tomax widthinstead. That will let it shrink a little when it needs to. -
height: 33rem;Also you would never want to set theheightof the element. Let the content inside the card element dictate the height of it. You can a look at my solution , you might have an idea.
Overall, your solution is good, Hopefully this feedback helps.
Marked as helpful
@OliverNikolovski
Posted
@PhoenixDev22 Hey, thanks for the suggestions, will definitely improve my code and have those in mind. Also, I will check out your solution, too. Cheers!
