Barra de navegación animada con Javascript

Esta es una barra de navegación animada con Javascript, maquetada con HTML y CSS. El proyecto 83 parte del reto #100sitioswebchallenge

Puedes visualizar el sitio en: Animated Navigation

DESAFÍOS

Basado en los proyecto de Traversy Media 50 Projects in 50 days. Este ejercicio es un menú sencillo que a la hora de dar clic en la cruz tiene una pequeña animación que hace aparecer y desaparecer el menu.

PROCESO

Paleta de colores y estilos

Paleta de colores: F8F9FA DFE0E1 5290F9

Tipografía: Muli de Google Fonts

HTML y CSS

Esta es la vista del sitio primero con la maquetación con HTML, y posteriormente el video muestra la vista del sitio en CSS y Javascript.

Sitio web responsivo

Esta es la vista del sitio en móviles.

Publicación del sitio

Ver código en Github

Puedes visualizar el sitio en: Animated Navigation

Información técnica

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

Deja tus comentarios y sugerencias

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...