Crie uma Página Inicial de Site de Notícias Responsiva

Introdução

Neste projeto, você aprenderá como criar a página inicial para o site do jornal LabEx Daily. Você será responsável por configurar a estrutura HTML e estilizar as várias seções da página inicial usando CSS.

👀 Pré-visualização

LabEx Daily homepage preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura HTML para a página inicial do LabEx Daily
Como estilizar a seção do cabeçalho (header), incluindo o logotipo e os botões de navegação
Como estilizar a seção do banner, incluindo a imagem do telefone e a área de conteúdo
Como estilizar a seção do título da aba, incluindo o texto "Latest News" e "More"
Como estilizar a seção da lista de notícias, incluindo o layout dos itens de notícias e o botão "More"
Como estilizar a seção do rodapé (footer), incluindo as seções esquerda e direita

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Criar uma página inicial responsiva e visualmente atraente para um site de notícias
Usar CSS para estilizar diferentes seções de uma página web
Posicionar e alinhar elementos usando CSS
Aplicar várias propriedades CSS para alcançar o design desejado

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

O código inicial para esta questão já foi fornecido. Abra o ambiente de codificação, e a estrutura do diretório é a seguinte:

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

Onde:

css/style.css é o arquivo de estilo que precisa ser completado para este desafio.
images contém os arquivos de imagem usados no projeto.
index.html é a página inicial do projeto LabEx Daily.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Por favor, complete o arquivo de estilo css/style.css (não modifique o estilo CSS base já fornecido) para que a página inicial do LabEx Daily se pareça com a seguinte (a largura total da página é 1024px):

Image Description

Estilizar o Cabeçalho

Nesta etapa, você aprenderá como estilizar a seção do cabeçalho (header) da página inicial do LabEx Daily. Siga os passos abaixo para completar esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Adicione a seguinte regra CSS após /* TODO */ para ajustar o estilo do cabeçalho:

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

Essas regras CSS estilizam o cabeçalho, incluindo o logotipo do LabEx Daily, o botão "APP Download" e seus efeitos de hover.

Nesta etapa, você aprenderá como estilizar a seção do banner da página inicial do LabEx Daily. Siga os passos abaixo para completar esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Adicione as seguintes regras CSS ao arquivo css/style.css:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

Essas regras CSS estilizam a seção do banner, incluindo a cor de fundo, o posicionamento da imagem do telefone e a área de conteúdo com o título e a descrição.

Estilizar o Título da Aba

Nesta etapa, você aprenderá como estilizar a seção do título da aba da página inicial do LabEx Daily. Siga os passos abaixo para completar esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Adicione as seguintes regras CSS ao arquivo css/style.css:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

Essas regras CSS estilizam a seção do título da aba, incluindo a cor de fundo, o posicionamento do texto "Browse Content" e "Latest Content", e seus respectivos estilos.

Estilizar a Lista de Notícias

Nesta etapa, você aprenderá como estilizar a seção da lista de notícias da página inicial do LabEx Daily. Siga os passos abaixo para completar esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Adicione as seguintes regras CSS ao arquivo css/style.css:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

Essas regras CSS estilizam a seção da lista de notícias, incluindo o layout dos itens de notícias, o tamanho e o posicionamento das imagens, os estilos do texto e o botão "Check out more in the app!" na parte inferior.

Estilizar o Rodapé

Nesta etapa final, você aprenderá como estilizar a seção do rodapé da página inicial do LabEx Daily. Siga os passos abaixo para completar esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Adicione as seguintes regras CSS ao arquivo css/style.css:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

Essas regras CSS estilizam a seção do rodapé, incluindo a cor de fundo, o layout das seções esquerda e direita, os estilos do texto e o posicionamento da imagem do código QR.

Parabéns! Você concluiu a estilização da página inicial do LabEx Daily. Agora você pode abrir o arquivo index.html no seu navegador web para ver o resultado final.

LabEx Daily homepage footer

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Construindo uma Página Inicial de Site de Notícias Responsiva