diff --git a/form.css b/form.css new file mode 100644 index 0000000..2db7341 --- /dev/null +++ b/form.css @@ -0,0 +1,92 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + margin-top: 150px; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + text-transform: capitalize; + margin-bottom: 30px; +} + +form { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 70px; + width: 400px; +} + +h1 { + text-align: center; + color: #007BFF; + font-size: 40px; +} + +h2 { + font-size: 22px; + color: #333; + margin-top: 20px; + display: block; + align-items: center; + align-content: center; + justify-content: center; +} + +fieldset { + border: 1px solid #ccc; + border-radius: 4px; + padding: 10px; + margin: 10px; +} + +legend { + font-weight: bold; +} + +p { + margin: 10px; +} + +label { + font-weight: bold; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +select { + width: 100%; + padding: 10px; + margin: 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +input[type="radio"] { + margin-right: 5px; +} + +button { + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + padding: 10px 15px; + cursor: pointer; + padding: 20px; + width: 400px; + font-size: 20px; +} + +button:hover { + background-color: #0056b3; +} + +input[type="radio"] { + margin-right: 5px; +} + diff --git a/form.html b/form.html new file mode 100644 index 0000000..51f836d --- /dev/null +++ b/form.html @@ -0,0 +1,41 @@ + + +
+ + + +