Blog Preview

Community feedback

• 

  Justin•100

  @aduatgitPosted 5 months ago

  I think your solution looks very good!

  Some suggestions:

  • You don't need to use Javascript to create the hover effect, you can use the :hover tag to do that. Although using Javascipt definitely was good practice! Here is how I did it:

  .card__description_title {
      text-decoration: none;
      font-size: 1.5rem;
      color: var(--clr-neutral-900);
      font-weight: var(--fw-800);
  }
  
  .card__description_title:is(:hover, :focus) {
      color: var(--clr-primary);
  }
  

  I used variables for the colors, but you get the gist.

  • You can use media queries to implement a mobile version, if you open your dev tools and squish the site you can see that you have some overflow. It could look like this:

  @media (max-width:420px) {
      .card {
          max-width: 320px;
      }
  }
  

  This changes the width of the card to (max) 320px if the screen of the user is smaller than 420px.

  But overall your solution is very, very nice!

  Marked as helpful

  1