Soit la maquette d’une page web représentant un formulaire d’inscription.
Travail demandé :
Partie HTML
1) Lancer votre éditeur HTML et créer une page web intitulée « Formulaire design en
CSS3 » et l’enregistrer sous le nom « inscription.html » dans votre dossier de travail.
2) Créer le squelette de la page web à l’aide des balises structurantes (sémantique).
3) Dans la partie Entête du page insérer le titre « Formulaire design en CSS3 »
4) Insérer l’image « signup.png » et le texte indicatif d’inscription.
5) Créer le formulaire représenté dans la maquette.
Les images « signup.png » et « wood.jpg » se trouvent sur votre bureau.
-1-
Partie CSS
1) Créer le fichier CSS « style.css » et l’enregistrer sous votre dossier de travail.
2) Lier le fichier CSS avec la page web.
3) Pour tous les éléments de la page le padding et margin doivent avoir un 0.
4) Tous les titres (h1..h6) avec 0 comme margin, padding et couleur « #444 ».
5) La page web doit avoir :
• Arrière-plan image (wood.jpg)
• Couleur blanc
• Police de votre choix avec « 14px/24px » comme taille.
6) La partie entête avec un ombre du cadre « 0 -1px 2px #111111 », couleur d’arrière-plan
noir, hauteur « 70 px » et largeur « 100% » du conteneur.
7) Titre entête (Formulaire design en CSS3) :
• Police : Taille « 22 px », Graisse normal, Couleur Blanc.
• Position : « 25% » du gauche, absolute.
• Padding : « 22px 0 ».
8) Image formulaire:
• Hauteur et largeur « 45px ».
• Position à droite du texte indicatif de l’inscription.
9) Formulaire
• Largeur : « 510px »
• Marge : « 0 auto »
• Marge haute et bas : « 50px »
• Couleur arrière-plan : « #fff »
• Padding : « 40px »
• Bordure : Taille « 10px », Type « solid » et Couleur « #f2f2f2 »
• Coins arrondis : « 5% » pour tous les coins.
10)Les éléments Input, Textarea du formulaire
• Bordure : Taille « 1px », Type « solid » et Couleur gris.
• Couleur texte : « #545658 »
• Padding : « 8px »
• Taille police : « 14px »
• Largeur : « 95% » du conteneur
• Coins arrondis : 2px pour tous les coins.
11)Boutons annuler et envoyer
• Bordure : Taille « 1px », Type « solid » et Couleur « #B7D6DF »
• Ombre cadre : « 0 1px 1px rgba(0, 0, 0, 0.1) »
• Police : couleur « #437182 » , Taille « 14px »,Graisse « bold »
• Hauteur et largeur : « auto »
• Padding : « 6px 10px »
• Margin : « 2px »
• Position : Droite
• Ombre du texte : « 0 1px 0 #FFFFFF »
12)Label du formulaire
• Marge basse : « 5px »
• Police : Taille « 12px » et Graisse « Bold ».
-2-
