OpenClassrooms-Développeur Web

Projet 3 : Dynamisez une page web avec des animations CSS

Le développement devra se faire en CSS.
L’ensemble du site devra être responsive.
Le page HTML devra passer la validation w3c sans erreur.
Aucun framework ne devra être utilisé.
Le code CSS passe la validation w3c CSS.
Des règles CSS @media et/ou des feuilles de styles dédiées identifiées par un attribut media doivent être utilisées. Aucun code CSS ne devra être appliqué via un attribut style dans une balise HTML.
Le site doit être parfaitement compatible avec les dernières versions desktop de Chrome, Firefox et Safari.

Un site web comprenant :

une page d’accueil avec le logo de l’entreprise, un espace contenant les 4 menus, une section “prochainement” et les rubriques « Mention légales » et « Contactez-nous » ;
4 pages contenant chacune le menu d’un restaurant. Au clic sur le menu sur la page d’accueil, l’utilisateur est redirigé vers la page du menu ;
au clic sur “Mentions légales”, une nouvelle page s’ouvre ;
au clic sur “Contactez-nous”, un renvoi vers une adresse mail est effectué ;
le header (contenant le logo de l’entreprise) et le footer (contenant “Mentions légales” et “Contactez-nous) sont présents sur toutes les pages ;
le footer doit rester visible même si l’on scrolle. Des effets graphiques :
Pour chaque item de type menu, une animation qui fait un zoom sur l'image devra être intégrée, avec un effet de fondu (réduire l'opacité) sans faire grossir le cadre initial ;
dans la section prochainement, des points de suspension devront s’animer progressivement. Ils pourront soit s’agiter comme quand quelqu’un tape un nouveau message, soit apparaître progressivement ;
les boutons “contact” et “mentions légales” devront se secouer (effet wiggle) ;
les titres représentant les catégories entrées, plats, desserts devront être soulignés de gauche à droit au survol de la souris.

Compétences évaluées :