Ver proyecto en GitHub

? Estructura del proyecto

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

? Cómo utilizar este proyecto

1. Descargar o clonar el repositorio:

   git clone https://github.com/yourusername/simple_interface.git

1. Navegar al directorio de proyectos:

   cd payment_app_interface

1. Abra el archivo index.html en su navegador para ver la interfaz de la aplicación de pago.

? Conceptos y características clave

1. Estructura HTML:

   • Navegación en la barra lateral: uso de nav y ul para una barra lateral simple.
   • Secciones de contenido principal:
     • Visualización de saldo con una tarjeta con estilo.
     • Formulario de pago con campos de entrada y un botón de envío.
     • Lista de transacciones usando elementos ul y li.

2. Estilo CSS:

   • Diseño de Flexbox: se utiliza para la barra lateral y la alineación del contenido principal.
   • Combinaciones de colores: colores distintos para la barra lateral, los botones y los tipos de transacciones (ingresos frente a gastos).
   • Efectos de desplazamiento: comentarios interactivos para botones y enlaces de la barra lateral.
   • Diseño responsivo: barra lateral de ancho fijo con contenido principal flexible.

3. Habilidades intermedias practicadas:

   • Diseños complejos con barra lateral y múltiples secciones.
   • Estilo de formulario para entrada del usuario.
   • Diseño de interfaz de usuario consistente con secciones distintas y elementos interactivos.