Slider de página completa hecho con HTML, CSS y Javascript

Este es un slider de página completa hecho con HTML, CSS y Javascript. El proyecto número 74 parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Slider

DESAFÍOS

Basado en el ejercicio de Traversy Media “Full Screen Responsive Image Slider”. La implementación de Javascript para este proyecto consistió en leer la primera imagen del slider y que se quedara fija por 5 segundos y seguir con la siguiente de manera automática, pero también con la opción de seleccionar la siguiente con las flechas de siguiente y previo.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 000000

Tipografía: Roboto de Google Fonts

Íconos: Font Awesome

HTML y CSS

La vista del sitio antes de activar los estilos de CSS y las animaciones de Javascript

Sitio web responsivo

Aquí se puede ver el sitio de manera responsiva, cómo el párrafo responde apareciendo de abajo hacia arriba.

 

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Slider

Información técnica

  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS
  • JavaScript
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Font Awesome License

Unsplash

Deja tus comentarios y sugerencias para el slider de página completa hecho con HTML, CSS y Javascript.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Este es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...