Donnez un look neuf à votre page

Introduction

Dans ce projet, vous allez apprendre à concevoir et à styliser une page de connexion avec une interface attrayante. L'objectif est de créer une page de connexion visuellement attrayante qui offre une expérience utilisateur agréable.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la structure du projet et comprendre les fichiers fournis
• Comment styliser le corps et la barre de navigation de la page de connexion
• Comment styliser le formulaire de connexion, y compris l'image d'avatar, le conteneur de formulaire, les éléments de formulaire et le texte

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une disposition visuellement attrayante pour la page de connexion à l'aide de CSS
• Styliser différents éléments d'un formulaire de connexion, tels que les champs de saisie, les boutons et le texte
• Intégrer des images et des styles d'arrière-plan pour améliorer la conception globale de la page de connexion

Configurer la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet pour la page de connexion.

1. Ouvrez l'environnement de laboratoire et accédez au répertoire du projet.
2. Dans le répertoire du projet, vous devriez voir la structure de fichiers suivante :

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. Le fichier css/style.css est celui dans lequel vous allez écrire votre code CSS pour styliser la page de connexion. Le dossier images contient les fichiers d'image utilisés dans le projet.
4. Ouvrez le fichier index.html dans un éditeur de texte. Il s'agit du fichier HTML qui contient la structure de la page de connexion.
5. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
6. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement pour voir la page.

Styler le corps et la barre de navigation

Dans cette étape, vous allez styliser le corps et la barre de navigation de la page de connexion.

1. Ouvrez le fichier css/style.css dans un éditeur de texte.
2. Ajoutez le code CSS suivant au fichier :

/* Ajoutez votre code CSS ici */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Ce code définit l'image d'arrière-plan pour le corps, le style de la barre de navigation et ajoute une image en haut à droite de la page pour accéder au profil.

Styler le formulaire de connexion

Dans cette étape, vous allez styliser le formulaire de connexion.

1. Ajoutez le code CSS suivant au fichier css/style.css :

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Ce code style le formulaire de connexion, y compris l'image d'avatar, le conteneur de formulaire, les éléments de formulaire (en-tête, bouton et champs de saisie) et le texte en bas du formulaire.

Vérifier et tester le résultat final

Dans cette étape, vous pouvez tester la similitude de votre page terminée avec la page donnée réellement.

1. Enregistrez les modifications dans le fichier style.css.
2. Raffraîchissez le navigateur pour voir le résultat final. Après avoir effectué les étapes précédentes, vous serez capable d'apprendre à disposer et à embellir une page grâce à la syntaxe CSS pour que votre page de connexion ressemble le plus possible à celle ci-dessous :

Félicitations ! Vous avez réussi à compléter le projet de donner un look neuf à votre page de connexion.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.