I made this component using flexbox and custom properties CSS

Community feedback

• 

  JfuseCodes•270

  @JfuseCodes

  Posted almost 4 years ago

  As far as the background what i did was this: background-repeat: no-repeat;

  This should stop the background from looping over and over.

  01

  Marked as helpful
• 

  Ken•4,915

  @kens-visuals

  Posted almost 4 years ago

  Hey @Starlk 👋🏻

  I have some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <section class="card">...</section> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like so:

  <img src="/images/icon-music.svg" alt="" class="plan__icon" aria-hidden="true”>
  

  • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
  • Next, if you're not using srcset, you should remove it otherwise it's causing some errors.
  • Also, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Lastly, let's fix the background image and here's how to do it:

  body {
      background-image: url("/images/pattern-background-desktop.svg");
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #e0e8ff;
      min-height: 100vh;
  }
  

  I hope this was helpful 👨🏻‍💻 all in all, you did a nice job, keep it going. Cheers 👾

  02

  Marked as helpful