Diseño de página de inicio simple y bonito

Introducción

En este proyecto, aprenderás a crear un diseño de página de inicio simple y bonito para el sitio web de la Red de Conocimiento LabEx. El objetivo es diseñar una página de inicio atractiva visualmente que presente efectivamente el contenido y las características del sitio web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar los archivos y la estructura del proyecto
• Cómo dar estilo a la área superior de la página, incluyendo el encabezado y la navegación
• Cómo dar estilo al contenido dentro del área del encabezado
• Cómo dar estilo al área de contenido de la página
• Cómo dar estilo al pie de la página

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Crear un diseño visualmente atractivo utilizando CSS
• Estructurar y organizar los archivos HTML y CSS para una página web
• Aplicar estilos CSS a diferentes secciones de una página web
• Asegurarse de que el diseño sea reactivo y consistente en diferentes tamaños de pantalla

Configurar el proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

1. Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

   • css/style.css
   • index.html

2. En el archivo css/style.css, agrega el siguiente código para establecer los estilos básicos de la página:

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

Este código restablece el margen y el relleno predeterminados de todos los elementos y establece la propiedad box-sizing en border-box, lo que facilita el control del tamaño de los elementos.

3. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
4. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Dar estilo a la área superior

En este paso, darás estilo a la área superior de la página, que incluye el encabezado y la navegación.

1. En el archivo css/style.css, agrega el siguiente código para dar estilo a la á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 establece el color de fondo de la área superior en #a6b1e1, centra el área del encabezado con un ancho de 1024px y da estilo al menú de navegación.

Dar estilo al contenido del encabezado

En este paso, darás estilo al contenido dentro del área del encabezado.

1. En el archivo css/style.css, agrega el siguiente código para dar estilo al contenido del encabezado:

.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 centra el contenido del encabezado vertical y horizontalmente y da estilo al título, el párrafo y el botón "Unirse".

Dar estilo a la área de contenido

En este paso, darás estilo a la área de contenido de la página.

1. En el archivo css/style.css, agrega el siguiente código para dar estilo a la área de contenido:

.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 centra la área de contenido, crea un diseño flexible con dos elementos por fila y da estilo a los elementos de contenido individuales.

Dar estilo al pie de página

En este paso, darás estilo al pie de página de la página.

1. En el archivo css/style.css, agrega el siguiente código para dar estilo al pie de página:

.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 establece la altura del pie de página en 80px, agrega un borde de 2px en la parte superior en el color #aaa y centra el texto del pie de página.

Con estos pasos, has completado el diseño y el estilo de la página principal de la Red de Conocimiento de LabEx.

El resultado final es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.