Clicky

Jump to content
  • Sign Up
Sign in to follow this  
Joao Vitor

[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

 

 

  • Like 2

Windows Longhorn... :wub: 

Share this post


Link to post
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.

Guest
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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.




×
×
  • Create New...