17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog

Série Criar Site Responsivo com HTML5 e CSS3
Criar Site Responsivo com HTML5 e CSS3 – Parte 01
Criar Site Responsivo com HTML5 e CSS3 – Parte 02
Criar Site Responsivo com HTML5 e CSS3 – Parte 03 – FINAL

Dando continuidade à série de tutoriais, Como Criar um Site Responsivo com HTML5 e CSS3, detalharei as seções criadas

no tutorial anterior, Criar Site Responsivo com HTML5 e CSS3 – Parte 01.

Passo 6 – Finalizando a Seção Header – Cabeçalho e Menu
Logotipo
Para concluir o logotipo, complete o o código html como mostrado abaixo:

1 <h1><a href="index.html" title="Como Criar um SITE RESPONSIVO com HTML5 e CSS3"><span></
?

A utilização da tag span é para trabalharmos a imagem do logotipo com o CSS como um background. Com isso, o CSS fica da

seguinte forma:

1 header{ ?
2      border‐bottom: 1px solid #E0E0E0; /*borda na base da seção*/
3      height:150px;
4      width:1200px; /*largura do topo*/
5 }
6 /*
7 =========================
8 logotipo
9 =========================
10 */
11      header h1 a{
12           background:url(imagens/logo‐criar‐site‐responsivo.png) no‐repeat; /*logotipo*/
13           display:block; /*torna o link como um bloco, um retângulo*/
14           float:left; /*posiciona o logotipo à esquerda do site*/
15           height:139px; /*altura da imagem*/
16           text‐indent:‐9999; /*recuo para ocultar texto à esquerda*/
17           width:302px; /*largura da imagem*/
18      }

Assim, o layout deverá ficar parecido com este resultado:

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 1/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog

Fig. 01: Configuração do logotipo do site

DEMO

Menu de Navegação
O próximo passo é configurarmos o menu de navegação. Com isso, o código html ficará da seguinte maneira:

1 <nav> ?
2      <ul>
3           <li><a href="#">home</a></li>
4           <li><a href="#">html5</a></li>
5           <li><a href="#">css3</a></li>
6           <li><a href="#" class="ativo">responsive</a></li>
7           <li><a href="#">contato</a></li>
8      </ul>
9 </nav><!‐‐ fim nav ‐‐>

Perceba que criei uma classe chamada .ativo a qual será responsável por simular um link com a página ativa. Assim, o CSS

ficará com esta estrutura:

1 /* ?
2 =========================
3 nav ‐ menu de navegação
4 =========================
5 */
6 nav{
7      float:right; /*posiciona menu à direita*/
8      margin‐top:78px; /*distância do menu à margem superior do navegador*/
9      text‐align:right; /*alinha os links à direita*/
10      width:490px;
11 }
12 nav ul{
13      list‐style‐type:none; /*retira os marcadores da lista*/
14 }
15      nav li {

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 2/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog
15      nav li {
16           display: inline; /*deixa o menu na horizontal*/
17      }
18           nav ul li a{
19                margin‐right: 30px; /*espaço à direita de cada link do menu*/
20           }
21           nav ul li:nth‐child(5) a{
22                margin‐right:0px; /*indica que o 5º elemento da lista (contato) terá a margem direita
23           }
24 nav a:link, nav a:visited{
25      color:#999;
26      font‐size: 22px;
27      font‐weight: 300;
28      letter‐spacing: ‐2px; /*espaçamento entre as letras*/
29      line‐height: 26px;
30      display:inline‐block;
31 }
32 nav a.ativo:link, nav a:hover{
33      color:#FE9380; /*indica a página ativa e o link:hover*/
34 }

O resultado esperado até aqui seria aproximadamente igual a imagem abaixo:

Fig. 02: Finalização do header com o menu de navegação do site responsivo

DEMO

Chamada Principal
Passemos agora para a seção .chamada, onde trabalharei os dois cabeçalhos H2 e H3, além de uma configuração particular

com o span.

1 <div class="chamada"> ?
2      <h2><span>Como Criar um</span> SITE RESPONSIVO <span>com</span> HTML5 <span>e</span
3      <h3>Com este tutorial você verá como criar um site responsivo onde poderá ser bem visualizado em
4 </div><!‐‐ fim .chamada ‐‐>

Já o CSS ficará deste jeito:

1 /*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ?
2 Seção .CHAMADA <<<<<========================================
3 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
4 .chamada{

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 3/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog
4 .chamada{
5      height:290px;
6      text‐align:center;
7      width:1200px;
8 }
9      h2 span{
10           font‐size: 60px;
11           font‐weight: 300;
12           letter‐spacing: ‐2px;
13           line‐height: 60px;
14      }
15      .chamada h3 {
16           margin: 0 auto;
17           width:900px;
18      }

O resultado esperado, aproximado, seria este:

Fig. 03: Seção .chamada do site responsivo

DEMO

Passo 7 – Finalizando a Seção Container e os Box’s
Até aqui, já concluímos aproximadamente 50% do trabalho de criação do site responsivo com HTML5 e CSS3. A próxima etapa
é formatarmos a seção .container e suas 3 colunas. Para isso, vamos complementar o arquivo html:

1 <section class="container"> ?
2 <div class="desktop">
3           <h3>Site Responsivo DESKTOP</h3>
4        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
5        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
6      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
7    </div><!‐‐ fim #desktop ‐‐>
8    <div class="tablet">
9           <h3>Site Responsivo TABLET</h3>
10        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
11        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
12      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
13    </div><!‐‐ fim #tablet ‐‐>

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 4/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog
13    </div><!‐‐ fim #tablet ‐‐>
14    <div class="mobile">
15           <h3>Site Responsivo MOBILE</h3>
16        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
17        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
18      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
19    </div><!‐‐ fim #mobile ‐‐>
20 </section><!‐‐ fim .container ‐‐>

Posicionando as colunas
O primeiro passo a ser dado é com relação ao alinhamento e posicionamento das colunas. Para isso, o seguinte CSS já
resolve:

1 /*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ?
2 Seção .CONTAINER ‐ Conteúdo com 3 colunas <<<<<=============
3 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
4 .container{
5      background‐color:#FE9481;
6      height: 417px;
7      padding:30px;
8      max‐width:1200px;
9 }
10 .desktop, .tablet, .mobile{
11      float:left;
12      position:relative;
13      text‐align:center;
14      width:360px;
15 }
16 .desktop, .tablet{
17      margin‐right: 30px;
18 }
19 .mobile{
20      background‐color:#9C8CB9;
21      margin‐right:0px;
22 }
23 .desktop{
24      background‐color:#FE9481;
25 }
26 .tablet{
27      background‐color:#FCDA92;
28 }
29 /*

Onde o resultado obtido seria este:

Fig. 04: Posicionamento das colunas na seção .container

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 5/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog

DEMO

Trabalhando com as Imagens
Cada coluna dispõe de uma imagem. Vamos inseri­las e formatá­las.

index.html

1 <section class="container"> ?
2 <div class="desktop">
3      <figure>
4           <img src="imagens/desktop‐responsive‐design.png" width="238" height="125" alt
5        </figure>
6           <h3>Site Responsivo DESKTOP</h3>
7        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
8        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
9      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
10    </div><!‐‐ fim #desktop ‐‐>
11    <div class="tablet">
12      <figure>
13           <img src="imagens/tablets‐responsive‐design.png" width="241" height="125" alt
14        </figure>
15           <h3>Site Responsivo TABLET</h3>
16        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
17        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
18      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
19    </div><!‐‐ fim #tablet ‐‐>
20    <div class="mobile">
21      <figure>
22           <img src="imagens/mobile‐responsive‐design.png" width="194" height="125" alt
23        </figure>
24           <h3>Site Responsivo MOBILE</h3>
25        <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site responsivo
26        multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktops, ta
27      e smartphones.<span class="btn"><a href="#" title="Leia mais...">Leia mais...</a></
28    </div><!‐‐ fim #mobile ‐‐>
29 </section><!‐‐ fim .container ‐‐>

estilo.css

1 /*imagens*/ ?
2 #desktop img, #tablet img, #mobile img{
3      margin: 10px auto ‐15px auto;
4      text‐align:center;
5 }

O resultado esperado, seria aproximadamente este:

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 6/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog

Fig. 05: Posicionamento das imagens em suas respectivas colunas

DEMO

Encerrando esta seção, concluirei os botões, cabeçalhos e parágrafos das colunas. Para tal, o arquivo CSS, será alterado da
seguinte maneira:

1 /* ?
2 =========================
3 formatação do texto
4 =========================
5 */
6 .container h3{
7      color:#fff;
8      font‐size: 32px;
9      font‐weight: 300;
10      letter‐spacing: ‐2px;
11      margin‐bottom: 30px;
12      text‐shadow:none;
13 }
14 .container p{
15      background‐color:#fff;
16      float:left;
17      height:160px;
18      padding:7px;
19      position:absolute;
20      width‐max:360px;
21      text‐align:justify;
22      top:225px;
23 }
24 /*
25 =========================
26 formatação do botão
27 =========================
28 */
29 span.btn{
30      font‐size: 20px;
31      font‐weight: 400;
32      letter‐spacing: ‐2px;
33      height:27px;
34      margin‐top: 30px;
35      position:absolute;
36      right: 1px;
37      text‐align:center;
38      text‐shadow:none;

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 7/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog
38      text‐shadow:none;
39      width:120px;
40 }
41 span.btn a{
42      color:#fff;
43      padding: 2px 4px;
44 }
45 .desktop span.btn a{
46      background‐color:#FE9481;
47 }
48 .tablet span.btn a{
49      background‐color:#FCDA92;
50 }
51 .mobile span.btn a{
52      background‐color:#9C8CB9;
53 }

Como resultado, teremos:

Fig. 06: Criação dos botões css nas colunas da seção .container

DEMO

Passo 8 – Finalizando a Seção Footer – Rodapé
E, para concluir a 2ª parte da série Criar um Site Responsivo com HTML5 e CSS3, finalizarei o rodapé.

estilo.css

1 /*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ?
2 Seção FOOTER ‐ Rodape com 2 colunas <<<<<===================
3 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
4 footer{
5      clear:both;
6      height: 50px;
7      padding: 10px 0px;
8      width:1200px;
9 }
10 .copyright{
11      float:left;
12      margin‐left:30px;
13 }
14 .desenvolvedor{
15      float:right;

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 8/9
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 2/3 ­ CarlosHPS Blog
15      float:right;
16 }
17 .desenvolvedor figure{
18      width:182px;
19 }

E o resultado final:

Fig. 07: Resultado final do tutorial Criar Site Responsivo co HTML5 e CSS3

Bom, pessoal, no próximo post, continuarei a mostrar como criar um site responsivo com HTML5 e CSS3, aplicando as técnicas
de responsive design.

Até lá.

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3B… 9/9