[Tutorial] Como criar um Layout Responsivo - Parte 3

[Joao Vitor]

Hoje vamos criar três colunas para destacar os principais serviços da sua empresa. Como o conteúdo deste template é para testes, colocarei somente hospedagem, revenda e servidores.

 

Você escolhe se quer incluir mais coisas ou não, pois vamos desenvolver a estrutura das tabelas para se adaptar ao layout. Lembrando que a maioria dos códigos para fazer o layout ficar em responsivo ficará no tutorial final, onde ajustaremos últimos detalhes e aplicaremos os códigos para deixar o layout 100% responsivo.

 

Primeiro vamos criar a div que vai abranger nosso conteúdo (incluindo seu respectivo CSS):

<div id="conteudo-principal"></div>

#conteudo-principal {width:960px;margin:0 auto}

Agora sim vamos criar o código das tabelas, lembrando que as cores tem que ficar de acordo com as cores que selecionamos nas partes anteriores do tutorial.

<div class="tabela">
  <div class="plano-da-tabela">Hospedagem</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="comprar">Comprar</div>
</div>
<div class="tabela">
  <div class="plano-da-tabela">Revenda de Hospedagem</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="comprar">Comprar</div>
</div>
<div class="tabela">
  <div class="plano-da-tabela">Servidores Cloud</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="item">100 GB</div>
  <div class="comprar">Comprar</div>
</div></div>

Agora vamos colocar o CSS:

/***** Tabelas *****/
.tabela {
  background: #fff;
  border: 1px solid #E5E5E5;
  float: left;
  margin: 50px 10px;
  width: 300px;
  border-radius:20px 0 20px 0;
}
.plano-da-tabela {
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #da3610;
  color: #FFF;
  font-size: 1.6em;
  border-radius: 20px 0px 0px 0px;
}
.item {
  border-bottom: 1px dashed #E0E0E0;
  color: #818181;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #F7F7F7;
}
.comprar {
  color: #f9f9f9;
  line-height: 40px;
  text-align: center;
  background: #666564;
  border-radius: 0 0 20px 0;
  transition:all ease-in-out 0.5s;
}
.comprar:hover {background:#353535;cursor:pointer}

O nosso resultado pra hoje é da imagem abaixo. Lembrando: caso tenham alguma sugestão para melhorar o layout, tanto visualmente quanto no código, diga para aplicarmos.

 

 

 

[Joao Vitor]

Parte 1:

Parte 2:

[S1Host - Web Hosting]

Meus parabéns @, acompanhei os 3 tópicos. 

[thiago1]

=) muito bom