Single price grid component using HTML & CSS

Community feedback

• 

  P

  Joshua Briley•415

  @somecallmejosh

  Posted over 5 years ago

  Hey there, this looks great. It loads fast, too. I think you've done a great job here. Here's some thoughts regarding your HTML here for your consideration.

  In the following section <div id="sec1">:

  <h2>Monthly Subscription</h2>
  <h3>$29 per month</h3>
  <h3>Full access for less than $1 a day</h3>
  

  You have an <h2> immediately followed by two <h3>'s. While this won't return a validation error, an <h3> or any header element, should be followed by some content—like a paragraph, or list, or tabular data. So, in order to keep the HTML semantically correct, I'd recommend converting those H3's to <p>'s.

  You could also consider replacing the <div class="header"> with the HTML5 <header> element. The <main> element could be used to include your two divs, id="sec1" and id="sec2"

  So, a structure like

  <header>... all your header content </header>
  <main>
    <div id="sec1">...</div>
    <div id="sec2">...</div>
  </main>
  <footer>
    ... all your footer content
  </footer>
  

  One recommendation regarding your responsive design:

  You may consider using a width and a max width on your container element. For instance:

  .container {
    width: 100%;
    max-width: 720px;
  }
  

  This will help ensure your content doesn't get cut off when resizing the browser.

  I hope this helps. Again, super job. Keep up the fantastic work.

  12