Como criar: layout de blog

Aprenda a criar um layout de blog responsivo usando CSS.

Aprenda a criar um layout de blog responsivo, que muda entre colunas de duas e colunas de largura total com base na largura da tela.

Ajuste o tamanho da janela do navegador para ver o efeito de resposta:

Experimente pessoalmente

Como criar o layout de um blog

Primeiro passo - Adicionar HTML:

<div class="header">
  <h2>Nome do Blog</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Titular da Título</h2>
      <h5>Descrição do Título, 7 de dezembro de 2017</h5>
      <div class="fakeimg" style="height:200px;">Imagem</div>
      <p>Algum texto...</p>
    </div>
    <div class="card">
      <h2>Titular da Título</h2>
      <h5>Descrição do Título, 2 de setembro de 2017</h5>
      <div class="fakeimg" style="height:200px;">Imagem</div>
      <p>Algum texto...</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Sobre Mim</h2>
      <div class="fakeimg" style="height:100px;">Imagem</div>
      <p>Algum texto sobre mim em culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Publicações Populares</h3>
      <div class="fakeimg">Imagem</div><br>
      <div class="fakeimg">Imagem</div><br>
      <div class="fakeimg">Imagem</div>
    </div>
    <div class="card">
      <h3>Segueme</h3>
      <p>Algum texto...</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Rodapé</h2>
</div>

Segundo passo - Adicionar CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Cabeçalho da página / título do blog */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Criar duas colunas desiguais, flutuando umas nas outras */
/* Coluna esquerda */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Coluna direita */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Imagem falsa */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Adicionar efeito de cartão ao artigo */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Remover flutuação após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Rodapé da página */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Layout responsivo - Quando a largura da tela for menor que 800px, os dois colunas ficam empilhadas em vez de lado a lado */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Layout de site CSS

Tutorial:Design de site responsivo CSS