Code Monkey home page Code Monkey logo

lydiehenckes_3_19112020's Introduction

LydieHenckes_3_19112020

Projet 3 du parcours Développeur Web (Openclassrooms)
Intégrer la page web OhMyFood et la dynamiser en utilisant HTML et le préprocesseur Sass.

Eléments fournis:

  • maquette mobil, (maquette desktop n'est pas fournie, à improviser), les images,
  • les couleurs : Primaire: #9356DC, Secondaire: #FF79DA, Tertiaire: #99E2D0,
  • la police : Logo & titres: Shrikhand, texte: Roboto.

Consignes:

  • Mobil-first (l’ensemble du site devra être responsive sur mobile, tablette et desktop)
  • Validation W3C HTML et CSS : sans erreur
  • Compatibilité : Dernières versions de Chrome, Firefox & Safari
  • Le développement en CSS, sans JavaScript
  • Aucun code CSS appliqué via un attribut dans une balise HTML

Contenu des pages :

  • Page d’accueil (x1). Affichage de la localisation des restaurants, une courte présentation de l’entreprise, une section contenant les 4 menus sous forme cartes. Au clic sur la carte, l’utilisateur est redirigé vers la page du menu.
  • Pages de menu (x4). 4 pages contenant chacune le menu d’un restaurant.
  • Footer. Le footer est identique sur toutes les pages. Au clic sur “Contact”, un renvoi vers une adresse mail est effectué.
  • Header. Le header est présent sur toutes les pages. Sur la page d’accueil, il contient le logo du site. Sur les pages de menu, il contient en plus un bouton de retour vers la page d’accueil Animations :
  • Boutons. Au survol, la couleur de fond des boutons principaux devra légèrement s’éclaircir et l’ombre portée devra également être plus visible.
  • Au survol du bouton "J’aime" en forme de cœur, il devra se remplir progressivement.
  • Loader. Il devra apparaître pendant 1 à 3 secondes quand on arrive sur la page d'accueil, couvrir l'intégralité de l'écran, et utiliser les animations CSS
  • Pages de menu. À l’arrivée sur la page, les plats devront apparaître progressivement avec un léger décalage dans le temps (soit apparaître un par un, soit par groupe “Entrée”, “Plat” et “Dessert”).
  • Élément du menu. Au survol une petite coche doit apparaître de la droite vers la gauche. Si l’intitulé du plat est trop long, il devra être rogné avec des points de suspension.

lydiehenckes_3_19112020's People

Contributors

lydiehenckes avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.