Diseño de un Panel de Login+Registro con un elegante Carrusel con Bootstrap5

En este tutorial, vamos a crear y diseñar un panel de Login+Registro. Además vamos a incluir un bonito Carrusel diseñado con Bootstrap5.

Si lo que quieres es saltarte el tutorial y ver una previa del ejemplo funcionando con el código necesario para hacerlo funcionar, puedes seguir el siguiente enlace.

Si has decidido continuar leyendo, tienes que conocer las tecnologías web con las que vamos a trabajar, para poder diseñar este bonito panel de acceso.

Requisitos y Componentes

Para poder diseñar este panel de Login+Carousel necesitamos familiarizarnos con los siguientes herramientas y componentes del framework de BootStrap5.

En el momento de la creación de este post, Bootstrap5 aún no dispone de versión estable, por lo que incluiremos la versión beta3 de Bootstrap5.  Toda la documentación relacionada con Bootstrap5 se puede consultar aquí.

A parte de Bootstrap5, también vamos a necesitar otras tecnologías o herramientas:

  • HTML5 y maquetación con CSS3.
  • Incluiremos sesiones con JavaScript, para así poder recordar las pestañas seleccionadas, en el caso de refrescarse la página.
  • Para embellecer los formularios incluiremos algunos iconos y para ello vamos a utilizar el framework Fontawesome5.6.

Estructura HTML

Vamos a trabajar con la grilla de Bootstrap5 para poder separar el panel de acceso y el Carrusel, por lo que recomiendo leer la documentación para saber como funciona. A continuación muestro una estructura básica para poder crearlo.

Estilos

Por un lado vamos a incluir algunos estilos a los formularios y por otro modificaremos los estilos del carrusel de Bootstrap5 ya que por defecto no son muy elegantes.

Javascript

Para poder mantener seleccionadas las pestañas del formulario cuando se refresca la página, vamos a incluir algo de JavaScript. Para ello vamos a trabajar con sesiones (localStorage). Existen muchas formas de crearlo por lo que puedes crear algo más optimizado si te sientes capaz.

Código

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.