main.html

<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve.</h1>
  </section>

  <section id="plans">
    <h1 class="section-title">Choose Your Plan</h1>
    <div class="plan__list">
      <article class="plan">
        <h1 class="plan__title">FREE</h1>
        <h2 class="plan__price">$0/month</h2>
        <h3>For hobby projects or small teams.</h3>
        <ul class="plan__features">
          <li class="plan__feature">1 Workspace</li>
          <li class="plan__feature">Unlimited Traffic</li>
          <li class="plan__feature">10GB Storage</li>
          <li class="plan__feature">Basic Support</li>
        </ul>
        <div>
          <button class="button">CHOOSE PLAN</button>
        </div>
      </article>

      <article class="plan plan--highlighted">
        <h1 class="plan__annotation">RECOMMENDED</h1>
        <h1 class="plan__title">PLUS</h1>
        <h2 class="plan__price">$29/month</h2>
        <h3>For ambitious projects.</h3>
        <ul class="plan__features">
          <li class="plan__feature">5 Workspaces</li>
          <li class="plan__feature">Unlimited Traffic</li>
          <li class="plan__feature">100GB Storage</li>
          <li class="plan__feature">Plus Support</li>
        </ul>
        <div>
          <button class="button">CHOOSE PLAN</button>
        </div>
      </article>

      <article class="plan">
        <h1 class="plan__title">PREMIUM</h1>
        <h2 class="plan__price">$99/month</h2>
        <h3>Your enterprise solution.</h3>
        <ul class="plan__features">
          <li class="plan__feature">10 Workspaces</li>
          <li class="plan__feature">Unlimited Traffic</li>
          <li class="plan__feature">Unlimited Storage</li>
          <li class="plan__feature">Priority Support</li>
        </ul>
        <div>
          <button class="button">CHOOSE PLAN</button>
        </div>
      </article>
    </div>
  </section>

  <section id="key-features">
      <h1 class="section-title">Many Good Reasons to Stick Around</h1>
      <ul class="key-feature__list">
          <li class="key-feature">
              <div class="key-feature__image" id="trust-customer">
                <!-- trust-customer svg will be added -->
                <!-- './shared/img-data/svg-html/trusting-customer.html' -->
              </div>
              <p class="key-feature__description">3,857,000 Trusting Customers</p>
          </li>
          <li class="key-feature">
              <div class="key-feature__image" id="uptime-guarantee">
                <!-- uptime guarantee svg will be added -->
              </div>
              <p class="key-feature__description">99.999% Uptime Guarantee</p>
          </li>
          <li class="key-feature">
              <div class="key-feature__image" id="fast-cdn">
                <!-- fast CDN svg will be added -->
              </div>
              <p class="key-feature__description">Lightning Fast CDN</p>
          </li>
      </ul>
  </section>
</main>