DEV Community

Cover image for Página principal de coinbase.com maquetada con Bootstrap
Luis Badiali
Luis Badiali

Posted on • Updated on

Página principal de coinbase.com maquetada con Bootstrap

Herramientas que he usado

  • Bootstrap
  • Sass
  • Handlebars
  • Webpack

Demo

🔗 coinbase-bootstrap.netlify.app

ATENCIÓN: Al ser una copia de la página original puede salir la pantalla (fondo rojo) de web no segura, en este caso, pulsar:
Detalles -> accede a este sitio web no seguro.

Repositorio GitHub

🔗 https://github.com/badiali/coinbase-bootstrap


Versión escritorio

En escritorio, el menú funciona con el hover no con el click, de esta forma le he podido añadir una transición de CSS.

La tabla de rankings que aparece, está maquetada con el componente de tablas responsive de Bootstrap que añade una barra de desplazamiento para poder ver todas sus columnas y no tener que ocultar información relevante.



Versión móvil

He utilizado el componente Offcanvas de Bootstrap 5, consiguiendo con un solo elemento todas las versiones responsive del menú.

Para animar el icono del menú, he usado los callbacks del componente Offcanvas añadiendo y quitando una clase al mismo.

Usando las clases que añade Bootstrap a los elementos de dropdown, al hacer click en ellos se cambia la dirección del icono.


Discussion (0)