Calculatrice

Vous devez recréer le plus fidèlement possible la maquette suivante :

Image d'arrière-plan

• Utilisez l'image de votre choix en guise d'arrière-plan.
• L'image ne doit pas se répéter et couvrir toute la page.

Calculatrice

• La calulatrice doit être centrée horizontalement et verticalement.
• La couleur de fond doit être blanche avec une opacité de 80%.
• L'écran noir et les boutons sont des divs.
• Utilisez la stratégie de votre choix pour disposé les boutons et l'écran d'affichage.
• Utilisez la police Press Start 2P.
• Quand on survole les boutons, créez une animation qui donnera l'effet qu'on enfonce le bouton.

Astuce

Dans mon exemple mes boutons on un box shadow dans le bas, c'est ce qui leur donne un effet surélevé. Quand on clique sur un bouton, je fais une transition vers le bas équivalent à la largeur du box-shadow et j'annule celui-ci. Ça donne l'effet qu'on enfonce le bouton.