Clicky

Ir para conteúdo

Joao Vitor

[Tutorial] Como criar um Layout Responsivo - Parte 3

Posts Recomendados

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.

 

lrxMVl.png

 

 

  • Gostei! 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.


  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.



×
×
  • Criar Novo...