15/index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap"
      rel="stylesheet"
    />

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pricing Table</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="media-query.css">

    <script src="https://unpkg.com/@phosphor-icons/web"></script>
  </head>
  <body>
    <div class="pricing-table">
      <section class="essentials" style="--delay: 10ms">
        <div class="inner">
          <p>PARA VOCÊ COMEÇAR</p>
          <div class="title-price">
            <strong class="title">Essentials</strong>
            <span class="price">R$ <strong>19,97</strong></span>
          </div>
          <button class="primary">Assinar agora</button>
          <ul>
            <li>
              <i class="ph ph-check"></i>
              <span>Até 3 usúarios</span>
              <i class="ph ph-info"></i>
            </li>
            <li>
              <i class="ph ph-check"></i>
              <span>Autoatendimento</span>
              <i class="ph ph-info"></i>
            </li>
          </ul>
        </div>
      </section>

      <section class="ultimate" style="--delay: 210ms">
        <div class="inner">
          <p>para você decolar</p>

          <div class="title-price">
            <strong class="title">Ultimate</strong>
            <span class="price">R$
              <strong>29,97</strong>
            </span>
            </div>
            <button class="secondary">
              Assinar agora
            </button>
            <ul>
              <li>
                <i class="ph ph-check"></i>
                <span>Usuários ilimitados</span>
                <i class="ph ph-info"></i>
              </li>
              <li>
                <i class="ph ph-check"></i>
                <span>Suporte 24/7</span>
                <i class="ph ph-info"></i>
              </li>
              <li>
                <i class="ph ph-check"></i>
                <span>CSM Dedicado</span>
                <i class="ph ph-info"></i>
              </li>
              <li>
                <i class="ph ph-check"></i>
                <span>Treinamentos</span>
                <i class="ph ph-info"></i>
              </li>
            </ul>
          
        </div>
      </section>
      <section class="enterprise" style="--delay: 410ms">
        <div class="inner">
          <p>para sua empresa</p>
          <div class="title-price">
            <strong class="title">Enterprise</strong>
          </div>
          <button class="primary">Fale com a gente</button>
          <ul>
            <li>
              <i class="ph ph-check"></i>
              <span>Plano customizado especialmente para a necessidade de seu negocio</span>
            </li>
          </ul>
        </div>
      </section>

    </div>
  </body>
</html>