Design de Página Inicial Simples e Bonito

Introdução

Neste projeto, você aprenderá como criar um layout de página inicial simples e bonito para o site da LabEx Knowledge Network. O objetivo é projetar uma página inicial esteticamente agradável que apresente efetivamente o conteúdo e os recursos do site.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar os arquivos e a estrutura do projeto
• Como estilizar a área superior da página, incluindo o cabeçalho e a navegação
• Como estilizar o conteúdo dentro da área do cabeçalho
• Como estilizar a área de conteúdo da página
• Como estilizar o rodapé da página

🏆 Conquistas

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

• Criar um layout visualmente atraente usando CSS
• Estruturar e organizar os arquivos HTML e CSS para uma página web
• Aplicar estilos CSS a diferentes seções de uma página web
• Garantir que o layout seja responsivo e consistente em diferentes tamanhos de tela

Configurar o Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

1. Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

   • css/style.css
   • index.html

2. No arquivo css/style.css, adicione o seguinte código para definir os estilos básicos da página:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Este código redefine a margem e o preenchimento padrão de todos os elementos e define a propriedade box-sizing como border-box, o que facilita o controle do tamanho dos elementos.

3. Clique no botão Go Live no canto inferior direito da WebIDE para executar o projeto.
4. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Estilizar a Área Superior

Nesta etapa, você estilizará a área superior da página, que inclui o cabeçalho e a navegação.

1. No arquivo css/style.css, adicione o seguinte código para estilizar a área superior:

.top {
  background-color: #a6b1e1;
}

.nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px;
}

.nav > span {
  font-size: 18px;
  color: white;
  margin-right: 365px;
  font-weight: 600;
}

.nav_c span {
  font-size: 16px;
  color: white;
  margin-right: 28px;
  font-weight: 600;
}

.nav_c span:nth-child(7) {
  margin-right: 0px;
}

Este código define a cor de fundo da área superior para #a6b1e1, centraliza a área do cabeçalho com uma largura de 1024px e estiliza o menu de navegação.

Estilizar o Conteúdo do Cabeçalho

Nesta etapa, você estilizará o conteúdo dentro da área do cabeçalho.

1. No arquivo css/style.css, adicione o seguinte código para estilizar o conteúdo do cabeçalho:

.header {
  width: 1024px;
  margin: 0 auto;
  height: 440px;
  padding-top: 13px;
}

.header_text {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}

.title_header {
  font-size: 45px;
  color: black;
  margin-bottom: 62px;
}

.title_p {
  font-size: 21px;
  font-weight: 200;
  color: white;
  margin-bottom: 36px;
}

.join {
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}

Este código centraliza o conteúdo do cabeçalho vertical e horizontalmente e estiliza o título, o parágrafo e o botão "Join".

Estilizar a Área de Conteúdo

Nesta etapa, você estilizará a área de conteúdo da página.

1. No arquivo css/style.css, adicione o seguinte código para estilizar a área de conteúdo:

.content {
  width: 1024px;
  margin: 74px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 302px;
}

.content .item {
  height: 144px;
  width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content .item span {
  font-size: 30px;
  font-weight: 200;
  color: black;
}

.content .item p {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}

Este código centraliza a área de conteúdo, cria um layout flexível com dois itens por linha e estiliza os itens de conteúdo individuais.

Estilizar o Rodapé

Nesta etapa, você estilizará o rodapé da página.

1. No arquivo css/style.css, adicione o seguinte código para estilizar o rodapé:

.footer {
  width: 100%;
  height: 80px;
  border-top: 2px solid #aaa;
}

.footer_text {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  padding-top: 30px;
}

Este código define a altura do rodapé para 80px, adiciona uma borda de 2px na parte superior na cor #aaa e centraliza o texto do rodapé.

Com estas etapas, você concluiu o layout e a estilização da página inicial da LabEx Knowledge Network.

O resultado final é o seguinte:

Resumo

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