@catherineisonline
Posted
Looks nice, I would also add transition to hover states, so it looks smoother
Please provide feedback for the same . It would be helpful for me for the scope of improvement.
@catherineisonline
Posted
Looks nice, I would also add transition to hover states, so it looks smoother
@GitHub-dev12345
Posted
Good Work Bro ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:
transform : scale(0.8); this property decrease the size of card. 😉
large size for increase the number of scale & small size for decrease the number of scale
I hope you find this helpful
@PhoenixDev22
Posted
Hello @znair96,
I have some suggestions regarding your solution:
I would leave the equilibrium main img
in html and use pseudo-elements to change the teal bg color
. Then opacity can be changed from 0 to 1 on the pseudo on hover.
<a>
around the image Equilibrium #3429, Jules Wyvern
.For any decorative images, each img tag should have empty alt=""
and aria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock
).
The icon-view
doesn'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 be aria-hidden or role presentation with empty alt.
The avatar 's alt shouldn't be "empty "
, you can set Jules Wyvern
to it .
Alt text for the profile image shouldn't be empty .
Read more how to write an alt text
Also , read up on how to make inline svgs accessible. They'll either need aria-hidden if meaningless or labelling appropriately if meaningful.
the link should be wrapping the main image and either have Sr-only
text, an aria-label
or alt
text that says where that link takes you.
You can use an unordered list<ul>
to wrap class="price-of-equilibrium"
and in each <li>
, there would be <img >
and<p>
.
To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh
for the <body>
like this:
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; /*If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars. */
min-height: 100vh;
So you can remove the absolute position to the main.
I recommend to use em
and rem
units .Both em
and rem
are flexible, Using px
won't allow the user to control the font size based on their needs.
Never use px
for font size.
width: 24rem;
an explicit width is not a good way . Remove the width from the main component and change it to max width
instead. That will let it shrink a little when it needs to.
min-height: 100vh;
to 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.
Overall, your solution is good, Hopefully this feedback helps.
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