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

🎯 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):

✨ Verificar Solução e Praticar

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.

✨ Verificar Solução e Praticar

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.

✨ Verificar Solução e Praticar

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.

✨ Verificar Solução e Praticar

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.

✨ Verificar Solução e Praticar

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.