Travail pratique #2 - Partie 1¶

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération :

Travail pratique : 5% session
Questionnaire de la semaine 7 : 2% session

Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La date limite de remise est disponible sur LÉA
- Deux périodes de laboratoire sont allouées pour ce travail

Objectif¶

L'objectif de ce TP est :

Apprendre à créer des pages réactives avec l'approche mobile first
Apprendre à utiliser la base des flexbox en CSS
Apprendre à utiliser la base des grid en CSS
Apprendre à appliquer des requêtes média

Projet¶

Warning

Télécharger le projet

Ce projet contient déjà :

la bonne structure
le HTML de la page index.html

Appliquer l'approche Mobile first

Ce projet se divise en 2 parties :

Partie 1 : index.html
Partie 2 (semaine 7) : realisations.html

head¶

Compléter le <head> dans le HTML

Nom(s) d'auteur(s)
Ajouter la détection du viewport pour assurer la réactivité

CSS général pour mobile¶

Le CSS général au site couvre les styles qui s'appliquent à toutes les pages.

Nous couvrirons les styles :

du body
du header
du nav
du fotter
quelques styles généraux du main

Créer une feuille de styles
Appliquer la feuille de styles à la page index.html (elle sera aussi appliquée à la page de la semaine prochaine)
Écrire le CSS :

Le fond

Sur toutes les balises, ajuster la taille des boîtes en border-box
Sur la balise body, appliquer les styles :
- Marges à 0
- Famille de polices Arial
- couleur de texte blanc
- Image de fond "office.jpg", qui ne défile pas, qui couvre l'esapce

Header

Reproduire le header sur mobile, avec les indications suivantes :

Image de fond "header.png"
marges intérieur de 2rem
alignement du texte centré
Sur le bloc de choix de langue
- Largeur selon le contenu : fit-content
- Marge auto pour la position à droite
Sur le bloc d'identité de compagnie (#header_text), affichage en flexbox

NOTE: Si vous voulez que la taille d'image s'ajuste, mais reste petite :

Largeur à 20% (taille qui s'ajuste à l'espace)
Largeur maximum (max-width) à 8rem (limite maximum de taille)

TP2

Nav

rendre le nav collant au haut de l'écran
couleur de fond
sur l'image du nav, affichage en block, largeur de 10%
sur la div des items de menu, cacher (display: none)
Sur les liens cliquables du nav
- alignement du texte centré
- étirer les items dans le flex avec align-self
- retirer le souligné
Lorsque la souris survole un lien, changer la couleur de fond

TP2

Main

sur les images du main, taille à 100%
sur les sections du main :
- marges du haut et du bas à 10rem
- couleur de fond semi transparente
- marges intérieures de 5rem

TP2

footer

Sur le footer :

couleur de fond en dégradé : background-image: linear-gradient(to right, rgb(19, 202, 235), rgb(4, 71, 214));
marges intérieures
affichage en flexbox, colonne

Sur les images du footer: taille de 25%

Sur les titres du footer :

Appliquer du gras
Écrire en petites majuscules : font-variant-caps: all-small-caps;

TP2

CSS général pour tailles d'écran¶

Dans le CSS général toujours, on veut détecter les tailles suivantes :

Écrans jusqu'à maximum 900px

Gérer l'affichage du menu sous l'image de barres lors du survol de souris
Écrans de minimum 900px et plus

Ajuster le contenu et les styles de la page

Utiliser une requête média pour détecter un écran de maximum 900px avec max-width
Dans la requête média, gérer l'affichage du menu :
- Lorsque la souris survole le nav afficher la div...
  - Sélecteur : nav:hover div{}
  - Affichage en flexbox, colonne

Utiliser une requête média pour détecter un écran de minimum 900px avec min-width
Dans la requête média, gérer l'affichage de la page sur grand écran :

header
- Affichage du texte du header sur une ligne, centré
- Taille du titre 1 dans le header à 2rem
nav
- cacher l'image du nav
- afficher le menu en ligne, centré
main
- sur les sections du main
  - largeur de 50%
  - marges gauches et droites automatiques pour centrer
  - marge du haut à 20rem
- sur les titre 2 des sections
  - bordure du haut
  - alignement centré
footer
- sur le footer
  - affichage sur une ligne, centrée, items alignés
- sur les div du footer
  - largeur de 40%

CSS spécifique à index.html¶

Dans cette feuille de styles, nous allons appliquer les styles propres à la section main de la page index.

Créer une nouvelle feuille CSS
Appliquer cette deuxième feuille à la page index.html

Sur mobile, nous allons simplifier le contenu de la page :

cacher l'image qui se trouve dans la première section du main
Dans la section services, utiliser le flex pour afficher les boîtes une au-dessus de l'autre
- Reproduire l'affichage des blocs
Cacher la section des réalisations (elle ne s'affiche pas sur mobiles)

Ajouter une requête média pour détecter les écrans de minimum 900px.

Dans la requête média :

Afficher en inline l'image de la section "notre histoire"
Dans la section des services :
- afficher les blocs en ligne
- lorsque la souris survole un bloc, changer la couleur de fond
Afficher en bloc la section des réalisations
Dans les réalisations, afficher le bloc de texte :
- avec image de fond "video.jpg"
- en flex, colonne, centré
- couleur de fond

Page finale¶

Assurez-vous que la page est réactive et que chaque bloc s'affiche comme sur les images, selon les tailles d'écrans.

Version mobile

Version mobile

Version grand écran

Version mobile

Validation du code¶

Assurez-vous qu'il n'y a plus d'erreur dans le code.

Validateur

CONSERVER¶

Conservez ce travail, car il constitue la première partie d'un travail de 2 parties.

La deuxième partie sera disponible la semaine prochaine et consistera à créer une deuxième page qui utilise le CSS général créé aujourd'hui auquel on ajoutera une feuille de styles spécifiques à cette page (avec le grid).

Lorsque les deux parties seront complètes, le TP devra être remis sur LÉA.