D'accord, rendons le formulaire encore plus moderne en intégrant un espace pour une image et en affinant le style. Nous allons créer une mise en page en deux colonnes sur les écrans plus larges, avec une image d'illustration sur un côté et le formulaire sur l'autre. Comme je ne peux pas intégrer de vrais fichiers image directement, je vais ajouter un espace réservé stylisé où vous pourrez facilement insérer votre propre image (par exemple, depuis Unsplash, Pexels ou une illustration SVG). Enregistrer un Projet | Moderne

Gestion de Projet Simplifiée

Organisez vos projets efficacement.

Nouveau Projet

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); :root { --primary-color: #6a11cb; /* Violet */ --secondary-color: #2575fc; /* Bleu */ --gradient-start: var(--primary-color); --gradient-end: var(--secondary-color); --background-color: #f0f2f5; /* Gris très clair */ --card-background: #ffffff; --text-color: #333; --label-color: #555; --input-border-color: #d9d9d9; --input-focus-border-color: var(--primary-color); --shadow-color: rgba(0, 0, 0, 0.1); --image-section-bg: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .main-container { display: flex; background-color: var(--card-background); border-radius: 15px; box-shadow: 0 10px 30px var(--shadow-color); overflow: hidden; /* Important pour les coins arrondis */ width: 100%; max-width: 900px; /* Largeur max augmentée */ } .form-image-section { flex-basis: 40%; /* Prend 40% de la largeur */ background: var(--image-section-bg); color: white; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .form-image-section h2 { font-weight: 600; margin-bottom: 15px; font-size: 1.6em; } .form-image-section p { font-weight: 300; margin-bottom: 30px; font-size: 1em; opacity: 0.9; } .image-placeholder { width: 150px; height: 150px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .illustration-icon { font-size: 4em; color: white; opacity: 0.8; } /* Ajoutez ici le style pour votre si vous l'utilisez */ /* .form-image-section img { max-width: 80%; height: auto; margin-top: 20px; border-radius: 8px; } */ .form-container { flex-basis: 60%; /* Prend 60% de la largeur */ padding: 40px 50px; } .form-container h1 { color: var(--text-color); text-align: left; /* Alignement à gauche */ margin-bottom: 30px; font-weight: 600; font-size: 1.7em; display: flex; align-items: center; } .form-container h1 i { margin-right: 12px; color: var(--primary-color); font-size: 1.1em; /* Taille icône titre */ } .form-group { margin-bottom: 20px; position: relative; /* Pour positionner l'icône à l'intérieur si besoin */ } .form-group label { display: block; margin-bottom: 8px; color: var(--label-color); font-weight: 500; /* Légèrement plus gras */ font-size: 0.9em; } .form-group label i { margin-right: 8px; color: var(--primary-color); width: 18px; text-align: center; opacity: 0.8; } .form-group input[type="text"], .form-group input[type="date"], .form-group select { width: 100%; padding: 12px 15px; /* Ajustement padding */ border: 1px solid var(--input-border-color); border-radius: 8px; font-size: 0.95em; font-family: 'Poppins', sans-serif; transition: border-color 0.3s ease, box-shadow 0.3s ease; color: var(--text-color); background-color: #fff; } .form-group input::placeholder { color: #aaa; font-weight: 300; } .form-group input[type="text"]:focus, .form-group input[type="date"]:focus, .form-group select:focus { border-color: var(--input-focus-border-color); outline: none; box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.2); /* Ombre focus subtile */ } .form-row { display: flex; gap: 20px; /* Espace entre les champs sur la même ligne */ } .form-row .form-group { flex: 1; /* Chaque groupe prend une part égale */ } .form-group select option[value=""][disabled] { color: #aaa; } .submit-btn { background: var(--image-section-bg); /* Utilise le même dégradé */ color: white; padding: 14px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 1.05em; font-weight: 500; width: 100%; margin-top: 15px; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .submit-btn i { margin-right: 10px; } .submit-btn:hover { opacity: 0.9; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .submit-btn:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* Responsive adjustments */ @media (max-width: 768px) { .main-container { flex-direction: column; /* Empile les sections */ max-width: 500px; /* Réduit la largeur max */ } .form-image-section { flex-basis: auto; /* Réinitialise la base */ height: 200px; /* Hauteur fixe pour la section image */ padding: 20px; border-radius: 15px 15px 0 0; /* Arrondis seulement en haut */ } .form-image-section h2 { font-size: 1.4em; } .form-image-section p { font-size: 0.9em; margin-bottom: 15px; } .image-placeholder { width: 80px; height: 80px; } .illustration-icon { font-size: 2.5em; } .form-container { flex-basis: auto; padding: 30px; border-radius: 0 0 15px 15px; /* Arrondis seulement en bas */ } .form-container h1 { font-size: 1.5em; margin-bottom: 25px; } .form-row { flex-direction: column; /* Empile les champs date */ gap: 0; /* Supprime l'espace */ } .form-row .form-group { margin-bottom: 20px; /* Rétablit la marge normale */ } /* Assure que le dernier groupe dans la row n'a pas de marge en trop */ .form-row .form-group:last-child { margin-bottom: 0; } /* Rétablit la marge générale du groupe contenant la row */ .form-group.form-row-container { /* Ajoutez cette classe si nécessaire ou ciblez le parent */ margin-bottom: 20px; } } @media (max-width: 480px) { .form-container { padding: 25px; } .form-group input[type="text"], .form-group input[type="date"], .form-group select { padding: 10px 12px; } .submit-btn { padding: 12px 15px; font-size: 1em; } } Les changements clés incluent : 1. **Structure HTML (`index.html`)** : * Un conteneur principal `.main-container` qui englobe tout. * Deux sections enfants : `.form-image-section` pour l'image/illustration et `.form-container` pour le formulaire. * Un espace réservé `.image-placeholder` avec une icône Font Awesome dans la section image. Vous pouvez remplacer ce `div` par une balise `

`. * Les champs de date sont regroupés dans un `.form-row` pour une meilleure disposition sur les grands écrans. * Ajout d'attributs `placeholder` aux champs texte. 2. **Style CSS (`style.css`)** : * Utilisation de `display: flex` sur `.main-container` pour créer la disposition en deux colonnes. * La section image (`.form-image-section`) a un fond en dégradé (violet à bleu) et centre son contenu. * Le formulaire (`.form-container`) occupe l'espace restant. * Styles améliorés pour les inputs (bordures, focus, ombres). * Le bouton de soumission utilise le même dégradé que la section image. * **Responsive Design** : Sur les écrans plus petits (tablettes et mobiles), les deux sections s'empilent verticalement, et la section image devient plus petite. Les champs de date s'empilent également. N'oubliez pas de remplacer le `.image-placeholder` par votre propre image si vous le souhaitez !