https://github.com/sonvice/easybank

Este proyecto es una landing page diseñada como práctica para el desafío de Frontend Mentor. La landing page está construida utilizando React, Sass
https://github.com/sonvice/easybank

html5 javascript postcss react sass vite

Last synced: 1 day ago
JSON representation

Este proyecto es una landing page diseñada como práctica para el desafío de Frontend Mentor. La landing page está construida utilizando React, Sass

• Host: GitHub
• URL: https://github.com/sonvice/easybank
• Owner: sonvice
• Created: 2023-09-29T12:12:56.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-30T19:09:37.000Z (over 1 year ago)
• Last Synced: 2024-11-10T01:36:39.943Z (about 2 months ago)
• Topics: html5, javascript, postcss, react, sass, vite
• Language: SCSS
• Homepage: https://easybank-fmentor.netlify.app/
• Size: 330 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Landing Page Challenge - FrontendMentor.io

Este proyecto es una landing page diseñada como práctica para el desafío de Frontend Mentor. La landing page está construida utilizando React, Sass, y se han implementado las siguientes tecnologías y metodologías:

- Menú accesible para una mejor experiencia de usuario.

- Plugins de PostCSS para optimizar el código CSS.

- Metodología de arquitectura CSS basada en el patrón 7-1 y clases de utilidad.

- [Enlace al desafío de Frontend Mentor](https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN) donde se encuentra la plantilla original.

## Demostración

![Easybank landing page](https://i.ibb.co/L6vzjQr/image.png)

## Tecnologías Utilizadas

- React

- Sass

- PostCSS

## Características

- **Diseño Responsivo**: La landing page es completamente funcional en dispositivos móviles, tabletas y computadoras de escritorio.

- **Menú Accesible**: El menú de navegación es accesible para todas las personas, incluyendo aquellas con discapacidades visuales o de movilidad. Se utilizan atributos ARIA y prácticas recomendadas de accesibilidad.

- **Animaciones y Transiciones**: Se han añadido animaciones sutiles o transiciones para mejorar la experiencia del usuario y hacer que la landing page sea más atractiva.

- **Optimización de Imágenes**: Todas las imágenes se han comprimido y optimizado para reducir los tiempos de carga de la página y mejorar el rendimiento.

- **Estilos CSS**: Se ha mantenido un conjunto de estilos utilizando una metodología de arquitectura CSS, como el patrón 7-1, y clases de utilidad si es necesario.

- **Compatibilidad con Navegadores**: Se han realizado pruebas en diferentes navegadores (por ejemplo, Chrome, Firefox, Safari, Edge) para garantizar la compatibilidad y una experiencia uniforme.

- **Despliegue en Netlify**: La landing page se ha alojado en Netlify servicio de alojamiento para que sea accesible en línea.

## Instrucciones de uso

1. Clona este repositorio en tu máquina local.

2. Asegúrate de tener Node.js instalado.

3. Abre una terminal en la carpeta raíz del proyecto y ejecuta `npm install` para instalar las dependencias.

4. Luego, ejecuta `npm run dev` para iniciar la aplicación en tu navegador.