Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1. Créez un dossier sous votre nom et prénom qui servira de dossier conteneur p

1. Créez un dossier sous votre nom et prénom qui servira de dossier conteneur pour votre solution à cette affectation. Créez un fichier index.html dans le dossier du conteneur de solution, par exemple nom_prénom/index.html. 2. La mise en œuvre de la page que vous allez créer doit suivre les illustrations de maquette ci-dessous. Vous disposez de 3 maquettes: ordinateur de bureau et tablette (identiques), mobile et avec le menu déroulant. Votre implémentation doit être JUSTE 1 page. En d'autres termes, vous allez créer une seule page réactive. 3. Votre page doit inclure un fichier CSS. Aucun style en ligne autorisé. Votre fichier CSS doit être placé dans un dossier css sous le dossier du conteneur de solution, par exemple nom_prenom/css. 4. Pour cette mission, vous devez utiliser le plus possible le framework CSS Twitter Bootstrap. 5. Puisque nous utilisons Bootstrap pour cette affectation, au lieu de spécifier des plages de pixels, je définirai notre bureau, tablette, et des vues mobiles en termes de préfixes de classe Bootstrap CSS, à savoir md, sm, et xs.  L'illustration de la maquette de bureau doit correspondre aux classes md basées sur Bootstrap  L'illustration de la maquette de la tablette doit correspondre aux classes sm basées sur Bootstrap  L'illustration de la maquette mobile doit correspondre aux classes xs basées sur Bootstrap 8. Barre de navigation: créez une barre de navigation qui défile avec la page (la barre de navigation doit devenir invisible et n'est pas fixée en haut lorsque vous faites défiler la page vers le bas). La barre de navigation doit avoir un nom de société (c'est-à-dire une classe navbar-brand) appelé «Food, LLC» aligné sur le côté gauche de la barre de navigation. Pour l'affichage sur ordinateur et tablette, la barre de navigation ne doit contenir rien d'autre. Aucun autre bouton ne doit être visible. ( Astuce: utilisez la classe 'visible-xs'. ) 9. Navbar - Mobile View: Créez un bouton de menu simple (3 barres horizontales). Lorsque l'utilisateur clique sur ce bouton, un menu déroulant doit apparaître (comme illustré dans l'illustration du menu Ouvrir mobile ci- dessous.) Le menu déroulant doit contenir 3 éléments: poulet, bœuf et sushi. Le menu déroulant doit occuper toute la largeur de la fenêtre du navigateur. Assurez-vous que le menu déroulant a un jeu de couleurs d'arrière-plan qui le distingue du reste du contenu. 10. En-tête de page. L'en-tête de page qui indique que notre menu doit être centré dans la fenêtre du navigateur. Vous devez utiliser une classe Bootstrap pour ce faire. 11. Créez une seule section très haute qui utilisera la grille Bootstrap et occupera toute la largeur de la fenêtre du navigateur (moins quelques marges, bien sûr) pour toutes les vues: bureau, tablette et mobile. Pour rendre la section vraiment haute, vous pouvez soit la remplir avec BEAUCOUP de texte ou simplement définir sa hauteur à quelque chose comme 1000px. Il doit être suffisamment haut pour que le défilement vers le bas soit nécessaire pour afficher le bas de la section. Assurez-vous que sa couleur d'arrière-plan est définie pour la distinguer du reste du contenu. ( Astuce: n'oubliez pas d'avoir un élément avec un class = 'container' ou class = 'container-fluid' enveloppant votre grille. N'oubliez pas que pour que la grille fasse quelque chose "toujours", c'est-à-dire quelle que soit la taille de la fenêtre du navigateur , utilisez les classes col-xs- ... Dans ce cas,col-xs-12. ) La vue de la tablette et la vue du bureau de ce qui est noté et requis sont les mêmes. Voici l'illustration de la maquette de la version bureau et tablette du site (seules les parties requises sont affichées): Voici l'illustration de la maquette de la vue mobile (seules les parties requises sont affichées): uploads/s1/ devoir-2 2 .pdf