Scribd
Importer
5 vues2 pages

Mise en page CSS avec Pseudo-classes

Le document décrit les étapes pour créer une mise en page CSS avec deux sections pour l'inscription et la connexion, en utilisant des propriétés comme float et flex. Il inclut des instructions pour styliser une carte d'inscription avec des coins arrondis et une ombre, ainsi que pour appliquer des pseudo-classes CSS pour la validation des champs et l'interaction des boutons. Enfin, il fournit un exemple de structure HTML pour le formulaire d'inscription et de connexion.

Transféré par

aabouch2017
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues2 pages

Mise en page CSS avec Pseudo-classes

Le document décrit les étapes pour créer une mise en page CSS avec deux sections pour l'inscription et la connexion, en utilisant des propriétés comme float et flex. Il inclut des instructions pour styliser une carte d'inscription avec des coins arrondis et une ombre, ainsi que pour appliquer des pseudo-classes CSS pour la validation des champs et l'interaction des boutons. Enfin, il fournit un exemple de structure HTML pour le formulaire d'inscription et de connexion.

Transféré par

aabouch2017
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

CSS Layout & Pseudo-classes

Question 1 — Mise en page générale


1. Diviser la page en deux sections verticales de largeur égale (50 % / 50 %).
2. Placer :
o la section Inscription à gauche ;
o la section Connexion à droite.
3. La mise en page doit obligatoirement utiliser la propriété float.
4. S’assurer que le conteneur parent englobe correctement les éléments flottants.
Question 2 — Carte d’inscription et positionnement
1. Créer une carte blanche contenant le formulaire d’inscription.
2. Ajouter :
o des coins arrondis ;
o une ombre.
3. Placer le badge « NEW » en haut à droite de la carte.
4. Utiliser obligatoirement :
o position: relative ;
o position: absolute.
Question 3 — Champs de saisie et validation
Appliquer les comportements suivants à l’aide des pseudo-classes CSS :
1. État par défaut des champs :
o bordure claire.
2. Lorsque le champ est sélectionné (focus) :
o la couleur de la bordure change.
3. Lorsque le champ est invalide :
o la bordure devient rouge ;
o le fond devient légèrement rouge.
Utiliser les attributs de validation HTML (required, minlength).
Question 4 — Interaction des boutons
1. Les boutons doivent occuper toute la largeur disponible.
2. Lorsque le pointeur de la souris passe sur un bouton :
o la couleur de fond change ;
o le curseur devient une main (pointer).
3. Ajouter un effet de transition fluide.
Utiliser la pseudo-classe :hover.
Question 5 — Centrage du contenu
1. Centrer la carte d’inscription horizontalement et verticalement.
2. Centrer le contenu du formulaire de connexion.
3. Vous pouvez utiliser :
o display: flex ;
o justify-content ;
o align-items.
4. <body>
5.
6. <div class="container">
7.
8. <div class="register">
9. <div class="card">
10. <span class="badge">NEW</span>
11. <h2>Create Account</h2>
12.
13. <form>
14. <input type="text" placeholder="Full Name" required>
15. <input type="email" placeholder="Email" required>
16. <input type="password" placeholder="Password" minlength="6" required>
17. <input type="password" placeholder="Confirm Password" required >
18. <button type="submit">Register</button>
19. </form>
20. </div>
21. </div>
22.
23. <div class="login">
24. <h2>Welcome Back</h2>
25.
26. <form>
27. <input type="email" placeholder="Email" required>
28. <input type="password" placeholder="Password" required>
29. <button type="submit">Login</button>
30. </form>
31. </div>
32.
33. </div>
34.
35. </body>

Vous aimerez peut-être aussi