Jump to content

[Tutorial] Como criar um Layout Responsivo - Parte 3


Recommended Posts

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

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...

Important Information

Do you agree with our terms?