diff --git a/style.css b/style.css new file mode 100644 index 00000000..1a4e14f0 --- /dev/null +++ b/style.css @@ -0,0 +1,105 @@ + +/* General Reset */ +body, h2, p, input, button { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Body Styling */ +body { + font-family: Arial, sans-serif; + background: linear-gradient(to right, #6a11cb, #2575fc); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +/* Container */ +.container { + background: #fff; + color: #333; + width: 100%; + max-width: 400px; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +/* Toggle Buttons */ +.toggle-buttons { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +.toggle-buttons button { + flex: 1; + padding: 10px 0; + border: none; + background: #f0f0f0; + color: #333; + font-size: 16px; + cursor: pointer; + border-radius: 5px; + transition: background 0.3s; +} + +.toggle-buttons button.active { + background: #2575fc; + color: #fff; +} + +/* Forms */ +.form { + display: none; +} + +.form.active { + display: block; +} + +.form h2 { + margin-bottom: 20px; + font-size: 24px; + text-align: center; +} + +/* Input Groups */ +.input-group { + margin-bottom: 15px; +} + +.input-group label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 16px; +} + +/* Buttons */ +.btn { + width: 100%; + padding: 10px; + background: #2575fc; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background 0.3s; +} + +.btn:hover { + background: #6a11cb; +}