Carregando...
Desenvolvimento Web

Tabela de planos e preços em HTML e CSS

Postado: 2 de setembro de 2021 Tempo de Leitura: 3 Minutos

Neste artigo eu vou fazer uma Tabela de planos e preços em HTML e CSS para demonstrar preços e funcionalidades no site é muito usado em sites de Hospedagem.

Para demonstração clara e objetiva do que está vendendo os planos e os preços, nesse componente, simples você encontra uma tabela que faz esse trabalho.

Geralmente quando se trabalha com prestação de serviços as empresas sempre tem um plano em destaque, nesse exemplo que fizemos, também tem um plano que está em destaque, com um background diferenciado dos demais planos e com tamanho um pouco maior destacado.

Vamos Adicionar o Html:

<div class="box-tabela">
  
    <div class="plano">
      
      <header>
        <h4 class="titulo">Iniciante</h4>
        <div class="box-custo"><span class="valor">$19,90</span><span class="mes">/mês</span></div>
      </header>
      
      <ul class="recursos">
        <li>1 GB de espaço para o site</li>
        <li>5 contas de e-mails</li>
        <li>Bancos MySQL até 2</li>
        <li>500Gb de Transferência</li>
        <li>Certificado de segurança SSL Grátis</li>
        <li>Suporte Técnico</li>
      </ul>
      
      <div class="btn-contratar"><a href="">Contratar</a></div>
    
    </div>
  
    <div class="plano">
      
      <header>
        <h2 class="titulo">Básico</h4>
        <div class="box-custo"><span class="valor">$29,90</span><span class="mes">/mês</span></div>
      </header>
      
      <ul class="recursos">
        <li>2 GB de espaço para o site</li>
        <li>10 contas de e-mails</li>
        <li>Bancos MySQL até 5</li>
        <li>500Gb de Transferência</li>
        <li>Certificado de segurança SSL Grátis</li>
        <li>Suporte Técnico</li>
      </ul>
      
      <div class="btn-contratar"><a href="">Contratar</a></div>
   
    </div>

    <div class="plano destaque">
    
      <header class="branco">
        <h2 class="titulo-azul">Profissional 1</h2>
        <div class="box-custo"><span class="valor">$71,90</span><span class="mes">/mês</span></div>
      </header>
    
      <ul class="recursos-azul">
        <li>10 GB de espaço para o site</li>
        <li>50 contas de e-mails</li>
        <li>Bancos MySQL até 30</li>
        <li>500Gb de Transferência</li>
        <li>Certificado de segurança SSL Grátis</li>
        <li>Suporte Técnico</li>
      </ul>
    
      <div class="btn-contratar-azul"><a href="">Contratar</a></div>
    
    </div>

    <div class="plano">
      
      <header>
        <h2 class="titulo">Profissional 2 </h2>
        <div class="box-custo"><span class="valor">$99,90</span><span class="mes">/mês</span></div>
      </header>
      
      <ul class="recursos">
        <li>100 GB de espaço para o site</li>
        <li>100 contas de e-mails</li>
        <li>Bancos MySQL até 50</li>
        <li>1000Gb de Transferência</li>
        <li>Certificado de segurança SSL Grátis</li>
        <li>Suporte Técnico</li>
      </ul>
      
      <div class="btn-contratar"><a href="">Contratar</a></div>
    
    </div>

</div><!--Fecha Box Tabela-->

Vamos Adicionar o Css

.box-tabela {

    width:100%;
    text-align:left;
    color:#8c8c8c; 
    font-family: 'open_sansregular';
    font-size:16px;
    margin-bottom:20px;

}

.box-tabela .plano {

  width:25%;  
  position:relative;
  float:left;
  overflow:hidden;
  background-color:#ffffff;
  border-radius:6px;
  box-shadow:1px 0px 4px 0px #acacac;

}

.box-tabela .plano:hover{ z-index:2; box-shadow: 1px 0px 8px 0px #9b9b9b; }

.box-tabela * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.box-tabela header        { color: #0775c4;}
.box-tabela header.branco { color: #ffffff; }

.box-tabela .titulo {
  line-height: 60px;
  position: relative;
  margin: 0;
  padding: 0 20px;
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: 700;
  border-bottom: 1px #ececec solid;
  background: #f9f9f9;

}

.box-tabela .titulo-azul {
  
  line-height: 60px;
  position: relative;
  margin: 0;
  padding: 0 20px;
  font-size: 1.6em;
  letter-spacing: 2px;
  font-weight: 700;
  border-bottom: 1px #0e5c93 solid;
  background: #11649d;

}

.box-tabela .box-custo {
  padding: 0 20px;
  margin: 0;
}

.box-tabela .valor {
  font-weight: 400;
  font-size: 2.8em;
  margin: 10px 0;
  display: inline-block;
}

.box-tabela .mes {
  opacity: 0.8;
  font-size: 0.7em;
  text-transform: uppercase;
}


.box-tabela .recursos {
  padding: 0 0 20px;
  margin: 0;
  list-style: outside none none;
  font-size: 0.9em;
}

.box-tabela .recursos li {
  padding: 8px 20px;
}


.box-tabela .recursos-azul {
  padding: 0 0 60px;
  margin: 0;
  list-style: outside none none;
  font-size: 0.9em;
}

.box-tabela .recursos-azul li {
  padding: 8px 20px;
}

.box-tabela .recursos-azul i {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.5);
}

.box-tabela .btn-contratar {
  border-top: 1px solid rgba(136, 136, 136, 0.2);
  padding: 15px;
  text-align: center;
  background-color:#f4f4f4;
}

.box-tabela .btn-contratar a {
  background-color: #156dab;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
}

.box-tabela .btn-contratar a:hover {
  background-color: #0bbaff !important;
}

.box-tabela .btn-contratar-azul {
  border-top: 1px solid rgb(6, 85, 140);
  padding: 15px;
  text-align: center;
  background-color:#156095;
}

.box-tabela .btn-contratar-azul a {
  background-color: #156dab;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
}

.box-tabela .btn-contratar-azul a:hover {
  background-color: #0bbaff !important;
}

.box-tabela .destaque {
  margin-top: -33px;
  z-index: 1;
  border-radius: 10px;
  border: 2px solid #156dab;
  background-color: #156dab;
  color:#fff;
}

.box-tabela .destaque .btn-contratar {
  padding: 30px 20px;
}

.box-tabela .destaque .btn-contratar a {
  background-color: #10507e;
}

/*Responsivo*/
@media only screen and (max-width: 768px) {
  .box-tabela .plano {
    width: 49%;
    margin: 0.5%;
  }
  .box-tabela .titulo,
  .box-tabela .btn-contratar a {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .box-tabela .btn-contratar,
  .box-tabela .destaque .btn-contratar {
    padding: 25px;
  }
  .box-tabela .destaque {
    margin-top: 0;
  }
  .box-tabela .destaque header {
    line-height: 60px;
  }
}

@media only screen and (max-width: 480px) {
  
  .box-tabela .plano {

    width: 100%;
    margin: 5% 0;

  }

}

Veja o Resultado da nossa Tabela de planos e preços em HTML e CSS!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

1.239 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados