Criar um Site Responsivo com HTML5 e CSS3 – Parte 2/3

Série Criar Site Responsivo com HTML5 e CSS3

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:

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:

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

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

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:

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:

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

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.

Já o CSS ficará deste jeito:

O resultado esperado, aproximado, seria este:

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

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:

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:

Onde o resultado obtido seria este:

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

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

DEMO

Trabalhando com as Imagens

Cada coluna dispõe de uma imagem. Vamos inseri-las e formatá-las.

index.html

estilo.css

O resultado esperado, seria aproximadamente este:

Fig. 05: Posicionamento das imagens em suas respectivas colunas

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:

Como resultado, teremos:

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

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

E o resultado final:

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

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

CarlosHPS Webdesigner 8)

Série Criar Site Responsivo com HTML5 e CSS3


Posts Relacionados
Comentários ( 19 )
  1. Jonas Ribeiro
    9 de maio de 2014 at 23:24
    Responder

    Opa, muito bom o artigo, só tá faltando o principal o pulo do gato!kk a parte 3 FINAL para o layout ficar responsivo, tem alguma previsão de quando vai lançar?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      9 de maio de 2014 at 23:34
      Responder

      Jonas, o “gato dará seu pulo” até a próxima semana, pode crer. 😉

      CarlosHPS Webdesigner 8)

      • Jonas Ribeiro
        10 de maio de 2014 at 10:59
        Responder

        Ok então estou no aguardo ansioso, quero aqui aproveitar para parabenizar pelos seus belos artigos pois são muito bons, nós que desenvolvemos para web sempre temos que está atualizados, e nem sempre o que encontramos na net é de fácil leitura, porém você consegue passar isso de uma forma simples e entendível, parabéns pela iniciativa!

        • CarlosHPS Webdesigner
          CarlosHPS Webdesigner
          10 de maio de 2014 at 15:07
          Responder

          Agradeço pela força, Jonas.
          Abs.

          CarlosHPS Webdesigner 8)

  2. Gabriel
    13 de maio de 2014 at 14:53
    Responder

    Aguardando ansiosamente a 3º parte õ/

  3. Tony Moura
    21 de junho de 2014 at 22:07
    Responder

    Gostaria de parabenizar pelo belo trabalho q

    • Tony Moura
      21 de junho de 2014 at 22:09
      Responder

      Gostaria de parabenizar pelo belo trabalho que faz com seus postes, são de muita utilidade e transmitem muita clareza, parabéns mesmo amigo!!! 🙂

  4. marcio lima
    29 de junho de 2014 at 11:12
    Responder

    Ola parabéns pelo post muito bem explicado , gostaria de uma dica sua , estou criando um site para uma concessionaria de veículos e surgiu uma dúvida como criar a galeria dos veículos com a descrição do veículo e ao clicar na imagen abrir em outa pagina coma descrição completa, como seria mais facil em div ou tabelas .

  5. Fernando A Paula
    10 de outubro de 2014 at 11:18
    Responder

    Carlos, bom dia.
    Me formei na ETEC em Bauru, no curso de programação para computadores e programação para internet, faz um ano, não tenho nenhuma experiência em fazer sites ou blogs. Estou acompanhando seu tutorial para criação de site responsivo, e estou gostando muito, ele é bem explicado, dá ênfase nas partes mais necessária. Você está de parabéns. Vou ver se consigo fazer um blog seguindo suas orientações. Grato por este tutorial gratuito.

    Fernando

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      27 de novembro de 2014 at 9:05
      Responder

      Olá, Fernando
      O problema de alguns cursos técnicos e/ou profissionalizantes é que não existe um tempo hábil para associar a teoria junto com a prática, o que pode acarretar em terminar o curso e não saber como se faz. Porém, fico feliz em poder ajudar e, comentários como o seu me dão mais força para desejar criar um curso online.
      Abração.
      CarlosHPS Webdesigner 8)

  6. Tiago de Andrade Silva
    26 de março de 2015 at 13:53
    Responder

    Ola estou com uma duvida estou fazendo o passo a passo aqui so que meu site esta sempre centralizado a esquerdada tela nao estou entendendo muito bem pode me ajudar?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de fevereiro de 2016 at 11:00
      Responder

      Tiago, recomendo que reveja o código ou reinicie do zero, ok?!

  7. Bruno Urbano
    17 de abril de 2015 at 16:29
    Responder

    Melhor conteúdo de aprendizado. Excelente trabalho! Parabéns

  8. Rodrigo de Araujo Leite Pereira
    24 de agosto de 2015 at 12:58
    Responder

    Boa tarde!
    Achei muito bom o tutorial e o resultado final!!!
    Aprendi muito!
    Mas tenho uma duvida. Eu posso utilizar o código final pra modificar e fazer um site para mim? Não entendo muito bem das regras quanto a isso.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      7 de outubro de 2015 at 12:26
      Responder

      Oi, Rodrigo
      A série de tutoriais Criar um Sites Responsivo com HTML5 e CSS3 serve justamente para despertar esse interesse e mostrar o poder da responsividade no dia a dia dos desenvolvedores.
      Fique à vontade para usar o código. Quando terminar, posta o resultado aqui.
      Abraços e boa sorte.
      CarlosHPS Webdesigner 8)

  9. Flavio Everton
    18 de novembro de 2015 at 9:55
    Responder

    Gostei bastante do tutorial, rumo ao passo 3. =D
    “Porém, eu gostaria de deixar algumas observações. Algumas Classes no CSS estão como ID’s e acredito que isto possa dificultar a vida de quem está começando agora.”

    /*imagens*/
    #desktop img, #tablet img, #mobile img{
    margin: 10px auto -15px auto;
    text-align:center;
    }
    seria
    /*imagens*/
    .desktop img, .tablet img, .mobile img{
    margin: 10px auto -15px auto;
    text-align:center;
    }

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de fevereiro de 2016 at 10:34
      Responder

      Flavio, agradeço pelo feeedback, com uma visão diferenciada. Isso é importante, principalmente, quando se quer otimizar um código, na “vida real”.
      Obrigado.
      CarlosHPS Webdesigner 8)

  10. Fred
    24 de julho de 2016 at 15:58
    Responder

    Muito bom o tutorial. Você poderia dar uma conferida pois parece que os campos que contém os códigos, os do html, estão com defeito.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      25 de julho de 2016 at 9:07
      Responder

      Bacana, Fred.
      Estou terminando de publicar a 2ª parte do tutorial e reverei o código do 1º.
      Obrigado! 8)

Deixe uma resposta
Captcha Clique para atualizar o código