HTML-CSS: Figure 1 - Maquette Du Formulaire D'inscription
HTML-CSS: Figure 1 - Maquette Du Formulaire D'inscription
HTML-CSS: Figure 1 - Maquette Du Formulaire D'inscription
L’objectif de ce TP est de créer un formulaire d’inscription en HTML et le mettre en forme avec un fichier de
style CSS.
Créez un dossier " TP2 HTML-CSS " sur le bureau , télécharger les fichiers images et enregistrez votre travail
dans ce dossier.
Partie HTML :
1. Créer une page web intitulée « Formulaire design en CSS3 » et l’enregistrer sous le nom «inscription.html».
2. Créer le squelette de la page web à l’aide des balises structurantes.
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.
[1]
Partie CSS :
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, absolue.
• 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.
[2]
Figure 2 – Page résultat
Importer le dossier " TP2 HTML-CSS " dans votre Drive dans le répertoire Web.
[3]