NFT Preview card using HTML,CSS Grid & Flex

Dear Peter,

I liked your solution to the NTF Preview Card, thought the comparison slider doesn't do it justice. I think something was off when you took the screen shot. When I pull up the site, everything looks correct.

Here are just a couple of pieces of advice that may help you along to the next step:

1. Your accessibility report came back with an error. What this error is pointing out is that you should have and <h1> somewhere in the beginning and in a semantically appropriate place (such as a <nav>, <header>,< main>, or <footer>).

• The <h1> is for screen readers only. Obviously, in this case, you do not need an <h1> for a component, but the screen reader is looking for one to help announce to the user what connection this component has with the overall subject. In this case, a heading such as "User Contributions to Relaxing Music" or something like that.
• The <h1> needs to be hidden from the viewer, but still exist. The way to accomplish this is to insert the <h1> in the HTML, but style it in the CSS as having a display: none. In addition, some sources suggest: height: 1px; width: 1px; position: absolute; left: 3000px. The most important thing is to remove it from sight (and HTML flow - hence the absolute positioning and the display property set to "none") but have it there for the screen reader.

1. Hover effects: As I glanced over a couple of your other projects, I noticed that they, too, were missing the hover effects. Using hover effects, in fact all pseudo-classes, is quite easy once you know how. Here is a tutorial from W3Schools that might help.

• In short, when you write your CSS, for example for and <h1>, it might look something like this:

h1 { font-size: 25px; color: green; background-color: beige; padding-left: 30px; }

• However, when you hover over it, let's say you want it to turn from green to blue and make the cursor into a hand. First, write the same selector in a new entry, but this time add a colon plus the name of the selector (:hover or :active or :link etc.). Once you do that, just restyle the elements you want to change, for example:

h1:hover { color: blue; cursor: pointer; }

• Now, every time the mouse hovers over the <h1>, the cursor will turn into a hand and the text will turn blue.
• You can even change just a part of a text element by just surrounding that part with a <span> and styling its hover elements separately.

Anyway, I hope this helps. Thanks for letting me take a look at your solution. I love your organization, use of variables, and easy to read style. I can't wait to see you try the "hover" solution soon. Check out the other pseudo classes (and pseudo elements, for that matter)! Keep up the good work!

Best wishes!

Jeff