Este es un sitio sencillo con tarjetas extendibles animadas en Javascript, maquetado en HTML y estilizado en CSS. El proyecto 75 parte del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Expanding Cards
DESAFÍOS
Basado en los proyecto de Traversy Media 50 Projects in 50 days. El proceso para hacer el sitio es iniciando con la maquetación con HTML y empezando a dar forma en CSS, y en el transcurso uno se puede ir imaginando el tipo de animación que queremos que en este caso las tarjetas tenga. Seguí completamente las instrucciones de Traversy, aún no puedo decir que domino Javascript pero estos ejercicios me están ayudando a entender la forma de trabajar las funciones para que logren las animaciones que nosotros buscamos.
PROCESO
Paleta de colores y estilos
Paleta de colores: FFFFFF 000000
Tipografía: Montserrat de Google Fonts
HTML y CSS
Esta es la vista del sitio previo a activar los estilos y las animaciones.
Esta es la vista final del sitio, con las tarjetas animadas
Sitio web responsivo
Así se vería el sitio de manera responsiva
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Expanding Cards
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS
- JavaScript
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Deja tus comentarios y sugerencias. Este fué un sitio sencillo con tarjetas extendibles animadas en Javascript, maquetado en HTML y estilizado en CSS.
