Dar un cambio de aspecto a tu página

Introducción

En este proyecto, aprenderás a diseñar y dar estilo a una página de inicio de sesión con una interfaz bonita. El objetivo es crear una página de inicio de sesión visualmente atractiva que ofrezca una agradable experiencia de usuario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura del proyecto y entender los archivos proporcionados
• Cómo dar estilo al cuerpo y a la barra de navegación de la página de inicio de sesión
• Cómo dar estilo al formulario de inicio de sesión, incluyendo la imagen del avatar, el contenedor del formulario, los elementos del formulario y el texto

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un diseño de página de inicio de sesión visualmente atractivo utilizando CSS
• Dar estilo a diferentes elementos de un formulario de inicio de sesión, como los campos de entrada, los botones y el texto
• Incorporar imágenes y estilos de fondo para mejorar el diseño general de la página de inicio de sesión

Skills Graph

Configurar la estructura del proyecto

En este paso, aprenderás a configurar la estructura del proyecto para la página de inicio de sesión.

1. Abra el entorno de laboratorio y navegue hasta el directorio del proyecto.
2. Dentro del directorio del proyecto, debería ver la siguiente estructura de archivos:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. El archivo css/style.css es donde escribirás tu código CSS para dar estilo a la página de inicio de sesión. La carpeta images contiene los archivos de imagen utilizados en el proyecto.
4. Abra el archivo index.html en un editor de texto. Este es el archivo HTML que contiene la estructura de la página de inicio de sesión.
5. Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.
6. Abra "Web 8080" en la parte superior de la VM y actualícela manualmente y verá la página.

Dar estilo al cuerpo y a la barra de navegación

En este paso, darás estilo al cuerpo y a la barra de navegación de la página de inicio de sesión.

1. Abra el archivo css/style.css en un editor de texto.
2. Agregue el siguiente código CSS al archivo:

/* Agregue su código CSS aquí */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Este código establece la imagen de fondo para el cuerpo, el estilo de la barra de navegación y agrega una imagen en la esquina superior derecha de la página para acceder al perfil.

Dar estilo al formulario de inicio de sesión

En este paso, darás estilo al formulario de inicio de sesión.

1. Agregue el siguiente código CSS al archivo css/style.css:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Este código da estilo al formulario de inicio de sesión, incluyendo la imagen del avatar, el contenedor del formulario, los elementos del formulario (encabezado, botón y campos de entrada) y el texto en la parte inferior del formulario.

Revisar y probar el resultado final

En este paso, puedes probar la similitud de tu página completada con la página dada en realidad.

1. Guarda los cambios en el archivo style.css.
2. Refresca el navegador para ver el resultado final. Después de completar los pasos anteriores, podrás aprender cómo hacer un diseño y embelezar una página a través de la sintaxis de CSS para que tu página de inicio de sesión se vea lo más posible como se muestra a continuación:

¡Felicitaciones! Has completado con éxito el proyecto de dar un cambio de aspecto a tu página de inicio de sesión.

Resumen

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