Responsive NFT component using HTML , CSS, SASS
Design comparison
Solution retrospective
Hello everyone π I hope everything is okay for everyone π If you have a few minutes to give me to check my code and my site will be great because you are great people I love you don't hesitate to give your criticism
Community feedback
- @MahdiAljazairiPosted almost 2 years ago
@steeven509 Now have I figured out why this isn't working! And tbh, it's kinda embarassing π
The
:hover
pseudo-class must be put after.card__img
, not::before
! Just like this:.card__img:hover::before { ... }
Why? Because, according to the spec, pseudo-elements (like
::before
) can't have pseudo-classes (like:hover
). So you have to apply:hover
to an actual element (like.card__img
) for it to work.For that reason, the selectors in
main.scss
should be arranged like this:.card { ... &__img { ... &::before { ... } &:hover::before { ... } } /* rest of the selectors.. */ }
Marked as helpful1@steeven509Posted almost 2 years ago@MahdiAljazairi Thank you so much π i have a question πββοΈ whatβs editor βοΈ you use for write βοΈ like that for write the feedback like that
0@MahdiAljazairiPosted almost 2 years ago@steeven509 No need for an editor to write feedback π
If you mean code blocks, these are made via Markdown. Place three backticks (```) by themselves on a line, followed by a new line, followed by anything you want to write (Not necessarily code), then another three backticks on another seperate line. This creates a code block.
For more stuff check out the option named Markdown Help whenever you write feedback or replies on Frontend Mentor.
Marked as helpful1 - @MahdiAljazairiPosted almost 2 years ago
Hi There! I have spotted some flaws in
main.scss
:-
In line 62, the ampersand was placed incorrectly:
:hover &{
Then the output in
style.css
was::hover .card__img::before {
Which caused the
::before
to appear wherever you hover on the page.It's no big problem, though. Just put the ampersand before
:hover
and thats it!
- The font weight for
.ethereum
should be bold.
-
In line 94, there is
.card__data-info
instead of just&-info
. For which the output instyle.css
was:.card__data .card__data-info { ... .card__data .card__data-info .ethereum, .card__data .card__data-info .clock { ... /* and so on.. */
This has added an unnecessary layer of specificity. It won't break the webpage. But in terms of reusability, it might make changing the styles of this part a bit more difficult further in the code --say, in a media query, for instance. Not to mention that this actually kills the purpose of using BEM in the first place!
Now, as well as the above, I have some suggestions for overall improvement:
-
Since you're already using Sass, why not make use of Sass variables (
$xxxx
), instead of CSS custom properties (--xxxx
)? As long as you don't intend to alter the values of these variables via Javascript, Sass variables are the best option because they are compiled into their actual values in the output file.Also, CSS custom properties are not supported in Internet Explorer. So if you want users that --are forced to-- use IE to be able to view your website, this is another reason to prefer Sass variables.
-
There is an element called
<hr>
, short for 'Horizontal Rule'. It is used to make a break in the flow of content. Its effect isn't only visual --as you can always change how it looks like. It also gives assistive technology a hint to announce to their users this break in the content.This element could be used in this project for the line that seperates the author's info from the rest of the component.
That's about it! I hope it was helpful. And as they say: Happy Coding!
Marked as helpful1@steeven509Posted almost 2 years ago@MahdiAljazairi Thank you ππΎπ
in line 62 : When i put &:hover {} is not work
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