Barra fija con animación, construída con HTML, CSS y Javascript

Esta es una barra fija con animación, construída con HTML, CSS y Javascript. El proyecto 88 parte del proyecto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Sticky Navbar

DESAFÍOS

Basado en los proyecto de Traversy Media 50 Projects in 50 days. Un ejercicio que podría simplificar lo que bootstrap puede hacer con la animación del navegador. En este caso todo se escribe de manera manual, al dejar el navegador fijo y posteriormente cambiar el color del background mientras se va bajando hacía la parte inferior del sitio.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 222222 C0392B

Tipografía: Montserrat de Google Fonts

HTML y CSS

Este es el proceso seguido en el ejercicio por Brad Traversy, primero la vista sólo maquetada en HTML para posteriormente llegar al resultado final con los estilos de CSS y script de javascript.

Sitio web responsivo

Vista del sitio de manera responsiva, quiere decir lo que se ve en aparatos móviles.

Publicación del sitio

Ver código en Github

Puedes visualizar el sitio en: Sticky Navbar

Información técnica

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

Recursos

Unsplash

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