Despliegue de ícono al doble clic, landing page hecha con HTML, CSS y Javascript

Esta es una landing page que hace un despliegue de ícono de corazón al doble clic, hecho con HTML, CSS y Javascript. El proyecto número 91 parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Double Heart Click

PROCESO

Basado en los proyecto de Traversy Media 50 Projects in 50 days. Este ejercicio simula la aparición de un corazón como ícono al dar clic a la imagen, y además se muestra un contador que muestra el número de veces que se ha hecho al dar clic a la imagen.

Paleta de colores y estilos

Paleta de colores: FFFFFF 000000

Tipografía: Oswald de Google Fonts

Íconos: Font Awesome

HTML y CSS

Este es el proceso del sitio, primero desde su maquetación con HTML hasta la visualización final con el CSS y Javascript terminado.

Sitio web responsivo

Esta es la vista del sitio visto desde aparatos móviles

Publicación del sitio

Ver código en Github

Puedes visualizar el sitio en: Double Heart Click

Información técnica

  • Visual Studio Code
  • HTML5
  • CSS
  • Javascript
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Font Awesome License

Unsplash

Deja tus comentarios y sugerencias

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...