Joao Vitor Posted July 17, 2015 Share Posted July 17, 2015 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. 2 Quote Link to comment Share on other sites More sharing options...
Joao Vitor Posted July 17, 2015 Author Share Posted July 17, 2015 Parte 1: Parte 2: 1 Quote Link to comment Share on other sites More sharing options...
S1Host - Web Hosting Posted July 17, 2015 Share Posted July 17, 2015 Meus parabéns @, acompanhei os 3 tópicos. 1 Quote Link to comment Share on other sites More sharing options...
thiago1 Posted August 3, 2015 Share Posted August 3, 2015 =) muito bom 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.