Design comparison
Solution retrospective
It was too hard to align (ETH and 3 days left) in one line.
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @mnizhadali-afg, I was about to check your code, I found it was the Qr code challenge repo !!
Marked as helpful0@mnizhadali-afgPosted almost 3 years agoHello dear @PhoenixDev22 , I am putting the link for NFT repo here: https://github.com/mnizhadali-afg/code-challenges/tree/main/nft-preview-card
0 - @TheArkhamKnight781526Posted almost 3 years ago
If you use put the price and the days in one div, you can use this snippet:
#container { display: flex; justify-content: space-between; align-items: center; }
Marked as helpful0 - @PhoenixDev22Posted almost 3 years ago
CSS:
-
To make the card perfectly in the middle of the page, you can use flexbox and
min-height:100vh;
to the<main>
. -
You can add hover effects on the image and
Equilibrium #3429
andJules Wyvern
. -
You should use
em
andrem
units .Bothem
andrem
are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Usingpx
will not allow the users to control the size of the page based on their needs. -
It's good practice to use a css reset at the start of css every time.
-
Instead of setting
width
, consider usingmax-width
. That will let the component grow up to a point and be limited.
Hopefully this feedback helps .
1 -
- @PhoenixDev22Posted almost 3 years ago
hello @mnizhadali-afg,
I have some suggestions :
-
All page content should be contained by landmarks. You can wrap the body content by
<main>
tag.READ MORE ABOUT LANDMARKS -
Page should contain a level-one heading . So ensure that the page contains only one < h1> element. You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.
-
Equilibrium #3429
is a heading<h2>
. -
Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in this challenge is an anchor tag
<a>
). -
Images must have alternate text.
-
For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. And alt in the avatar img shouldn't be empty .read more about alt text for informative and decorative images -
The eye image doesn't really need to be in the html, you could do it with css.
-
You can use unordered list
<ul>
to wrapclass="ether"
and in each list item would have<img >
and<p>
. -
You shouldn't have used <hr/> , you can use border-top property for the
class="bottom"
. -
You can use
<footer >
for<div class="attribution">
. Footer goes outside of<main
>` .
Hopefully this feedback helps.
0@mnizhadali-afgPosted almost 3 years ago@PhoenixDev22 So much great research content! Thank you buddy.
1 -
- @Kamasah-DicksonPosted almost 3 years ago
You have to learn CSS flexbox and CSS Grid you won't regret getting those two stuffs..I believe you can do this :)
0
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