Scribd
Upload
2 views4 pages

Code 2

This document contains CSS styles for a web form, defining the overall layout, including body styles, form container, headings, labels, input fields, and buttons. The styles ensure a modern and user-friendly interface with responsive design elements such as hover effects and transitions. Key features include a centered form with a white background, rounded corners, and distinct button colors for submission and reset actions.

Uploaded by

cissesoumaye37
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
2 views4 pages

Code 2

This document contains CSS styles for a web form, defining the overall layout, including body styles, form container, headings, labels, input fields, and buttons. The styles ensure a modern and user-friendly interface with responsive design elements such as hover effects and transitions. Key features include a centered form with a white background, rounded corners, and distinct button colors for submission and reset actions.

Uploaded by

cissesoumaye37
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

/* Style général */

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: #f0f2f5;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

/* Conteneur du formulaire */

form {

background: #ffffff;

padding: 30px;

border-radius: 12px;

box-shadow: 0 8px 24px rgba(0,0,0,0.1);

width: 350px;

h1 {

font-size: 1.5rem;

color: #333;

text-align: center;

margin-bottom: 20px;
}

hr {

border: 0;

border-top: 1px solid #eee;

margin-bottom: 20px;

/* Style des étiquettes et champs */

label {

display: block;

margin-bottom: 8px;

color: #555;

font-weight: 600;

input[type="text"] {

width: 100%;

padding: 10px;

margin-bottom: 20px;

border: 1px solid #ddd;

border-radius: 6px;

box-sizing: border-box; /* Pour que le padding ne dépasse pas */

transition: border-color 0.3s;

}
input[type="text"]:focus {

border-color: #007bff;

outline: none;

/* Style des boutons */

button {

width: 100%;

padding: 12px;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

transition: background 0.3s, transform 0.1s;

margin-bottom: 10px;

button[type="submit"] {

background-color: #28a745;

color: white;

button[type="submit"]:hover {

background-color: #218838;
}

button[type="reset"] {

background-color: #dc3545;

color: white;

button[type="reset"]:hover {

background-color: #c82333;

button:active {

transform: scale(0.98);

You might also like