diff --git a/form.html b/form.html index a565486..aa8db0d 100644 --- a/form.html +++ b/form.html @@ -4,55 +4,42 @@ User registration - +

User registration

-
What is your personal information? - -
- -
- -
- -
- -
+
+ + +
+
+ + +
+
+ +
-
-
diff --git a/responsive.html b/responsive.html index 5eaf021..003eb25 100644 --- a/responsive.html +++ b/responsive.html @@ -1,9 +1,71 @@ - A title - - + + + +
@@ -13,7 +75,7 @@
  • Home
  • About
  • Services
    • -
  • User Registration
    • +
  • Contact
    • diff --git a/script.js b/script.js index f4851bb..cd5c7f5 100644 --- a/script.js +++ b/script.js @@ -7,11 +7,11 @@ input.addEventListener("input", (event) => { const form = document.getElementById('userinfo'); const checkboxes = form.querySelectorAll('input[name="interests"]'); -const checkedCount = Array.from(checkboxes).some(cb => cb.checked); +const checkedCount = Array.from(checkboxes).some(cb => cb.checked).length; form.addEventListener('submit', (event) => { if (checkedCount < 1) { event.preventDefault(); - alert('Please select at least one country.'); + alert('Please select at least one interest.'); } }); diff --git a/style.css b/style.css index 9ccb4b1..ea28a81 100644 --- a/style.css +++ b/style.css @@ -1,59 +1,129 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - body { - font-family: Arial, sans-serif; - line-height: 1.6; + font-family: 'Inter', sans-serif; + line-height: 3.0; + font-size: 32px; + @media (min-width: 600px) { + font-size: 24px; + } + background-color: #bcd3f2; } -header { - background: #333; - color: #fff; - padding: 20px; - text-align: center; + +input { + font-size: 32px; + @media (min-width: 600px) { + font-size: 24px; + } + border-radius: 2em; + border: none; + padding: 0em 1em 0em 1em; + background-color: #0e7c7b; + height: 2em; } -nav ul { - list-style: none; - padding: 0; +::placeholder { + color: white; + opacity: 1; } -nav ul li { - display: inline; - margin-right: 10px; +input:focus { + outline: 0.1em solid blue; } -nav ul li a { - color: #fff; - text-decoration: none; +select { + padding: 0em 1em 0em 1em; + font-size: 32px; + @media (min-width: 600px) { + font-size: 24px; + } + border-radius: 2em; + height: 2em; + border: none; + background-color: #0e7c7b; + color: white; } -.intro { - text-align: center; - padding: 40px; - background: #f4f4f4; +#gender>label { + display: block; + background-color: #0e7c7b; + border-radius: 2em; + padding: 0em 1em 0em 1em; + color: white; +} +#interests>label { + display: block; + background-color: #0e7c7b; + border-radius: 2em; + padding: 0em 1em 0em 1em; + color: white; } -.features { - display: flex; - justify-content: space-around; - padding: 20px; +input[type="range"] { + border: none; + box-sizing: border-box; + width: 100%; } -.feature-item { - background: #fff; - padding: 20px; - border: 1px solid #ddd; - width: 30%; +input[type="radio"]:focus { + outline: none; +} +input[type="checkbox"]:focus { + outline: none; +} +input[type="date"] { + color: white; } -footer { - text-align: center; - padding: 20px; - background: #333; - color: #fff; +#name { + display: flex; + justify-content: space-between; + width: 100%; +} +#logininfo { + display: flex; + justify-content: space-between; } +label[for="prename"] { + box-sizing: border-box; + flex: 0 0 45%; +} +label[for="surname"] { + box-sizing: border-box; + flex: 0 0 45%; +} +label[for="email"] { + box-sizing: border-box; + flex: 0 0 45%; +} +label[for="password"] { + box-sizing: border-box; + flex: 0 0 45%; +} + +#prename { + width: 100%; + box-sizing: border-box; +} +#surname { + box-sizing: border-box; + width: 100%; +} +#email { + box-sizing: border-box; + width: 100%; +} +#password { + box-sizing: border-box; + width: 100%; +} + +#phone_container { + display: flex; + justify-content: space-around; + width: 100%; +} + +fieldset { + border: none; +}