├── README.md ├── images ├── GitHub_Logo.png ├── add-user1.png ├── bg-img-min.jpg └── validated.png ├── index.html ├── script.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Sign-up Form 2 | 3 | ## [Live Demo](https://hmjatt.github.io/Sign-up-Form/) 4 | 5 | ![This is an image](https://raw.githubusercontent.com/hmjatt/Sign-up-Form/main/images/validated.png) 6 | 7 | 8 | A responsive sign-up form. Feel free to give me reviews at my [Twitter](https://twitter.com/hmjatt/) 9 | 10 | ### Technologies Used 11 | 12 |

13 | 14 | ### Updates made to old project 15 | 16 | 1. Client-Side Form Validation with JavaScript 17 | 18 | 2. Custom error messages with validation 19 | 20 | 3. Password and Confirm Password validation with custom error message 21 | 22 | 4. REGEX validation for Name, Phone, Email, Password, Confirm Password 23 | 24 | 5. Min & Max Length validation for Name, Phone, Email, Password, Confirm Password 25 | 26 | 6. Name and Phone number support for international Names and Phone numbers 27 | 28 | 7. Client-Side Form Validation with JavaScript is not a substitute for Server-Side Validation 29 | 30 | 31 | 32 | ### Links to content that helped me with this project 33 | 34 | 1. MDN 35 | - [Client-side Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript) 36 | 37 | 3. The Odin Project 38 | - [Article](https://www.theodinproject.com/lessons/node-path-javascript-form-validation-with-javascript) 39 | 40 | 4. W3Schools 41 | - [JavaScript Validation Api](https://www.w3schools.com/js/js_validation_api.asp) 42 | - [Custom Password Validation](https://www.w3schools.com/howto/howto_js_password_validation.asp) 43 | 44 | 5. Stack Overflow 45 | - [List of standard lengths for database fields](https://stackoverflow.com/questions/20958/list-of-standard-lengths-for-database-fields) 46 | - [Validating First and Last Name](https://stackoverflow.com/questions/2385701/regular-expression-for-first-and-last-name) 47 | - [Validating Phone Number(kuzey beytar)](https://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript) 48 | 49 | 50 | 51 | #### Quote 52 | 53 | "A computer science teacher asks the class to turn to page 404. 54 | The students search feverishly, to no avail" 55 | 56 | > 57 | > :smile: :wavy_dash: 58 | -------------------------------------------------------------------------------- /images/GitHub_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmjatt/Sign-up-Form/b0afe304f846ebbe732121640ef30f11013abed9/images/GitHub_Logo.png -------------------------------------------------------------------------------- /images/add-user1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmjatt/Sign-up-Form/b0afe304f846ebbe732121640ef30f11013abed9/images/add-user1.png -------------------------------------------------------------------------------- /images/bg-img-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmjatt/Sign-up-Form/b0afe304f846ebbe732121640ef30f11013abed9/images/bg-img-min.jpg -------------------------------------------------------------------------------- /images/validated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmjatt/Sign-up-Form/b0afe304f846ebbe732121640ef30f11013abed9/images/validated.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sign-up Form 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

Welcome!

25 |

Create an account or Log-in

26 | 27 |

28 |

29 |

30 | 31 |

32 | 33 |

34 |

35 |

First Name:

36 |

37 | 38 | 39 |

40 |

41 |

42 |

Last Name:

43 |

44 | 45 | 46 |

47 |

48 |

49 |

50 |

51 |

Email:

52 |

53 | 54 | 55 |

56 |

57 |

58 |

Phone Number:

59 |

60 | 61 | 62 |

63 |

64 |

65 | 66 | 67 |

68 |

69 |

*Password:

70 |

71 | 72 | 73 |

74 | 75 |

76 |

Password must contain the following:

77 |

A lowercase letter

78 |

A capital (uppercase) letter

79 |

A number

80 |

Minimum 8 characters

81 |

82 | 83 |

84 |

85 |

*Confirm Password:

86 |

87 | 88 | 89 |

90 |

91 |

92 |

93 | 94 |

95 | 96 | 97 | 98 |

99 | 100 |

101 |

102 |

103 | 104 |

Already have an account? 105 | Log in 106 |

107 | 108 |

109 | 110 | 111 | 112 | 113 |

114 |

115 |

116 |

117 | 118 |

119 | 120 |

121 | 122 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Sign-up Form 2 | 3 | const submit = document.getElementById('submitBtn'); 4 | submit.disabled = true; 5 | // get all input elements 6 | const inputs = document.querySelectorAll('input'); 7 | 8 | inputs.forEach(input => { 9 | input.addEventListener('keyup', (a) => { 10 | enableSubmit(); 11 | }); 12 | }); 13 | 14 | 15 | //if all input is valid, enable submit button 16 | function enableSubmit() { 17 | if (firstName.validity.valid && lastName.validity.valid && phone.validity.valid && pass.validity.valid && email.validity.valid && confirmPass.validity.valid) { 18 | submit.disabled = false; 19 | } else { 20 | submit.disabled = true; 21 | } 22 | } 23 | 24 | 25 | 26 | //for email validation 27 | 28 | // There are many ways to pick a DOM node; here we get the form itself and the email 29 | // input box, as well as the span element into which we will place the error message. 30 | const form = document.getElementsByTagName('form')[0]; 31 | 32 | const email = document.getElementById('mail'); 33 | const error = document.getElementById('error'); 34 | // const emailError = document.querySelector('#mail + span.error'); 35 | 36 | error.innerText = email.validationMessage; 37 | error.classList.add('invalid'); 38 | error.classList.remove('valid'); 39 | 40 | email.addEventListener('input', function (event) { 41 | // Each time the user types something, we check if the 42 | // form fields are valid. 43 | 44 | // If the email field is empty, show the error message 45 | 46 | if (email.validity.valid) { 47 | // In case there is an error message visible, if the field 48 | // is valid, we remove the error message. 49 | // emailError.innerText = email.validationMessage; // Reset the content of the message 50 | // emailError.className = 'error'; // Reset the visual state of the message 51 | error.innerText = "Valid E-mail Address"; 52 | error.classList.remove('invalid'); 53 | error.classList.add('valid'); 54 | 55 | } else { 56 | // If there is still an error, show the correct error 57 | showError(); 58 | } 59 | }); 60 | 61 | form.addEventListener('submit', function (event) { 62 | // if the form contains valid data, we let it submit 63 | event.preventDefault(); 64 | 65 | if (!email.validity.valid) { 66 | submit.disabled = true; 67 | // If it isn't, we display an appropriate error message 68 | showError(); 69 | // Then we prevent the form from being sent by canceling the event 70 | event.preventDefault(); 71 | } 72 | }); 73 | 74 | function showError() { 75 | if (email.validity.valueMissing) { 76 | // If the field is empty 77 | // display the following error message. 78 | error.textContent = 'You need to enter an e-mail address.'; 79 | } else if (email.validity.typeMismatch) { 80 | // If the field doesn't contain an email address 81 | // display the following error message. 82 | error.textContent = 'Entered value needs to be an e-mail address.'; 83 | } else if (email.validity.tooShort) { 84 | // If the data is too short 85 | // display the following error message. 86 | error.textContent = `Email should be at least ${email.minLength} characters; you entered ${email.value.length}.`; 87 | } 88 | 89 | // Set the styling appropriately 90 | // error.className = 'error active'; 91 | error.classList.add('invalid'); 92 | error.classList.remove('valid'); 93 | 94 | 95 | } 96 | 97 | 98 | // for password validation 99 | const pass = document.getElementById("user_password"); 100 | const userPasswordVal = document.getElementById("userPasswordVal"); 101 | userPasswordVal.innerText = "Please Enter a Valid Password"; 102 | userPasswordVal.classList.add('invalid'); 103 | userPasswordVal.classList.remove('valid'); 104 | 105 | const myInput = document.getElementById("user_password"); 106 | const letter = document.getElementById("letter"); 107 | const capital = document.getElementById("capital"); 108 | const number = document.getElementById("number"); 109 | const length = document.getElementById("length"); 110 | 111 | // When the user clicks on the password field, show the message box 112 | myInput.onfocus = function () { 113 | document.getElementById("message").style.display = "block"; 114 | } 115 | 116 | // When the user clicks outside of the password field, hide the message box 117 | myInput.onblur = function () { 118 | document.getElementById("message").style.display = "none"; 119 | } 120 | 121 | // When the user starts to type something inside the password field 122 | myInput.onkeyup = function () { 123 | // Validate lowercase letters 124 | let lowerCaseLetters = /[a-z]/g; 125 | if (myInput.value.match(lowerCaseLetters)) { 126 | letter.classList.remove("invalid"); 127 | letter.classList.add("valid"); 128 | } else { 129 | letter.classList.remove("valid"); 130 | letter.classList.add("invalid"); 131 | } 132 | 133 | // Validate capital letters 134 | let upperCaseLetters = /[A-Z]/g; 135 | if (myInput.value.match(upperCaseLetters)) { 136 | capital.classList.remove("invalid"); 137 | capital.classList.add("valid"); 138 | } else { 139 | capital.classList.remove("valid"); 140 | capital.classList.add("invalid"); 141 | } 142 | 143 | // Validate numbers 144 | let numbers = /[0-9]/g; 145 | if (myInput.value.match(numbers)) { 146 | number.classList.remove("invalid"); 147 | number.classList.add("valid"); 148 | } else { 149 | number.classList.remove("valid"); 150 | number.classList.add("invalid"); 151 | } 152 | 153 | // Validate length 154 | if (myInput.value.length >= 8) { 155 | length.classList.remove("invalid"); 156 | length.classList.add("valid"); 157 | } else { 158 | length.classList.remove("valid"); 159 | length.classList.add("invalid"); 160 | } 161 | 162 | if(pass.validity.valid){ 163 | passIsValid(); 164 | } 165 | 166 | } 167 | 168 | function passIsValid() { 169 | userPasswordVal.innerText = "Valid Password"; 170 | userPasswordVal.classList.remove('invalid'); 171 | userPasswordVal.classList.add('valid'); 172 | userPasswordVal.style.color = "green"; 173 | } 174 | 175 | 176 | // for password confirmation validation 177 | const divCheckPassword = document.getElementById('divCheckPassword'); 178 | const confirmPass = document.getElementById('user_password_confirm'); 179 | const confirmPassVal = document.getElementById('confirmPassVal'); 180 | const userPasswordConfirmVal = document.getElementById('userPasswordConfirmVal'); 181 | userPasswordConfirmVal.innerText = "Please Confirm Password"; 182 | userPasswordConfirmVal.classList.add('invalid'); 183 | userPasswordConfirmVal.classList.remove('valid'); 184 | 185 | confirmPass.addEventListener('keyup', (e) => { 186 | let password = pass.value; 187 | let confirmPassword = confirmPass.value; 188 | userPasswordConfirmVal.style.display = "none"; 189 | 190 | if (password != confirmPassword) { 191 | divCheckPassword.innerHTML = "Passwords do not match!"; 192 | divCheckPassword.classList.remove("valid"); 193 | divCheckPassword.classList.add("invalid"); 194 | submit.disabled = true; 195 | } else { 196 | divCheckPassword.innerHTML = "Password Confirmed"; 197 | divCheckPassword.classList.remove("invalid"); 198 | divCheckPassword.classList.add("valid"); 199 | } 200 | }); 201 | 202 | 203 | 204 | //for first name, last name and phone validation 205 | const firstName = document.getElementById('first_name'); 206 | const firstNameVal = document.getElementById('firstNameVal'); 207 | const lastName = document.getElementById('last_name'); 208 | const lastNameVal = document.getElementById('lastNameVal'); 209 | const phone = document.getElementById('phone_number'); 210 | const phoneNumberVal = document.getElementById('phoneNumberVal'); 211 | 212 | function validateForm() { 213 | 214 | 215 | firstNameVal.innerText = firstName.validationMessage; 216 | firstNameVal.classList.remove("valid"); 217 | firstNameVal.classList.add("invalid"); 218 | 219 | lastNameVal.innerText = lastName.validationMessage; 220 | lastNameVal.classList.remove("valid"); 221 | lastNameVal.classList.add("invalid"); 222 | 223 | phoneNumberVal.innerText = phone.validationMessage; 224 | phoneNumberVal.classList.remove("valid"); 225 | phoneNumberVal.classList.add("invalid"); 226 | 227 | firstName.addEventListener('input', function (event) { 228 | // Each time the user types something, we check if the 229 | // form fields are valid. 230 | 231 | if (firstName.validity.valid) { 232 | // In case there is an error message visible, if the field 233 | // is valid, we remove the error message. 234 | firstNameVal.innerHTML = 'Valid First Name'; // Reset the content of the message 235 | firstNameVal.classList.remove("invalid"); 236 | firstNameVal.classList.add("valid"); 237 | firstNameVal.style.color = 'green'; 238 | } else { 239 | // If there is still an error, show the correct error 240 | firstNameVal.innerHTML = firstName.validationMessage; 241 | firstNameVal.classList.remove("valid"); 242 | firstNameVal.classList.add("invalid"); 243 | firstNameVal.style.color = 'rgb(185, 1, 1)'; 244 | submit.disabled = true; 245 | } 246 | }); 247 | 248 | lastName.addEventListener('input', function (event) { 249 | // Each time the user types something, we check if the 250 | // form fields are valid. 251 | 252 | if (lastName.validity.valid) { 253 | // In case there is an error message visible, if the field 254 | // is valid, we remove the error message. 255 | lastNameVal.innerHTML = 'Valid Last Name'; // Reset the content of the message 256 | lastNameVal.classList.remove("invalid"); 257 | lastNameVal.classList.add("valid"); 258 | lastNameVal.style.color = 'green'; 259 | 260 | } else { 261 | // If there is still an error, show the correct error 262 | lastNameVal.innerHTML = lastName.validationMessage; 263 | lastNameVal.classList.remove("valid"); 264 | lastNameVal.classList.add("invalid"); 265 | lastNameVal.style.color = 'rgb(185, 1, 1)'; 266 | submit.disabled = true; 267 | } 268 | }); 269 | 270 | phone.addEventListener('input', function (event) { 271 | // Each time the user types something, we check if the 272 | // form fields are valid. 273 | 274 | if (phone.validity.valid) { 275 | // In case there is an error message visible, if the field 276 | // is valid, we remove the error message. 277 | phoneNumberVal.innerHTML = 'Valid Phone Number'; // Reset the content of the message 278 | phoneNumberVal.classList.remove("invalid"); 279 | phoneNumberVal.classList.add("valid"); 280 | phoneNumberVal.style.color = 'green'; 281 | 282 | } else { 283 | // If there is still an error, show the correct error 284 | phoneNumberVal.innerHTML = phone.validationMessage; 285 | phoneNumberVal.classList.remove("valid"); 286 | phoneNumberVal.classList.add("invalid"); 287 | phoneNumberVal.style.color = 'rgb(185, 1, 1)'; 288 | submit.disabled = true; 289 | } 290 | }); 291 | } 292 | 293 | validateForm(); 294 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Sign-up Form */ 2 | 3 | html { 4 | height: 100vh; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | body { 11 | background-color: #2d3436; 12 | background-image: linear-gradient(to bottom right, rgb(249 250 250), rgb(129 136 144)); 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | .sign-up-div { 18 | display: flex; 19 | /* justify-content: center; */ 20 | box-shadow: 21 | 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 22 | 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 23 | 0 12.5px 10px rgba(0, 0, 0, 0.06), 24 | 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 25 | 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 26 | 0 100px 80px rgba(0, 0, 0, 0.12) 27 | ; 28 | } 29 | 30 | .left { 31 | width: 20px; 32 | height: 900px; 33 | background-color: rgb(4, 116, 97); 34 | } 35 | 36 | .content-div { 37 | display: flex; 38 | flex-direction: column; 39 | height: 900px; 40 | padding-left: 50px; 41 | padding-right: 100px; 42 | background-color: rgb(248, 248, 248); 43 | transition: 0.5s; 44 | } 45 | 46 | .logo-img { 47 | height: 70px; 48 | width: 70px; 49 | padding-top: 30px; 50 | padding-bottom: 30px; 51 | } 52 | 53 | .content { 54 | padding-left: 50px; 55 | font-family: 'Space Mono', monospace; 56 | display: flex; 57 | flex-direction: column; 58 | } 59 | 60 | h1 { 61 | font-family: 'Space Mono', monospace; 62 | font-weight: 400; 63 | font-size: 45px; 64 | margin: 0; 65 | } 66 | 67 | p { 68 | margin: 0; 69 | } 70 | 71 | label { 72 | font-weight: bold; 73 | text-transform: uppercase; 74 | font-size: 14px; 75 | letter-spacing: 5px; 76 | padding-left: 5px; 77 | padding-bottom: 10px; 78 | } 79 | 80 | input { 81 | border: 1px solid rgba(0, 0, 0, 0.11); 82 | border-radius: 5px; 83 | height: 30px; 84 | width: 250px; 85 | font-family: 'Space Mono', monospace; 86 | } 87 | 88 | input:focus { 89 | outline: none; 90 | border: 2px solid rgba(0, 89, 255, 0.822); 91 | box-shadow: 2px 2px 5px #aaaaaaa4; 92 | } 93 | 94 | 95 | input:invalid { 96 | outline: none; 97 | border: 2px solid rgb(185, 1, 1); 98 | } 99 | 100 | button { 101 | margin-top: 30px; 102 | margin-bottom: 30px; 103 | height: 70px; 104 | width: 230px; 105 | border: none; 106 | background-color: rgb(4, 116, 97); 107 | color: rgb(255, 255, 255); 108 | border-radius: 10px; 109 | font-family: 'Space Mono', monospace; 110 | font-size: 22px; 111 | } 112 | 113 | button:disabled { 114 | background-color: rgba(4, 116, 97, 0.171); 115 | color: rgb(255, 255, 255); 116 | } 117 | 118 | .form-div { 119 | font-family: 'Raleway', sans-serif; 120 | font-weight: 400; 121 | margin-top: 20px; 122 | } 123 | 124 | #first_name, #mail, #user_password { 125 | margin-right: 80px; 126 | transition: 0.3s; 127 | } 128 | 129 | #last_name, #phone_number, #user_password_confirm { 130 | transition: 0.3s; 131 | } 132 | 133 | .spacing { 134 | padding-top: 30px; 135 | } 136 | 137 | .first-last-name { 138 | display: flex; 139 | justify-content: space-between; 140 | flex-wrap: wrap; 141 | } 142 | 143 | /* for first and last name */ 144 | 145 | #first_name, #last_name { 146 | display: flex; 147 | flex-direction: column; 148 | } 149 | 150 | #firstNameVal, #lastNameVal { 151 | font-size: 13px; 152 | color: rgb(185, 1, 1); 153 | margin-left: 5px; 154 | } 155 | 156 | .email-phone { 157 | display: flex; 158 | justify-content: space-between; 159 | flex-wrap: wrap; 160 | } 161 | 162 | /* for phone */ 163 | 164 | .validity { 165 | font-size: 13px; 166 | margin-top: 5px; 167 | /* margin-left: 5px; */ 168 | } 169 | 170 | #phoneVal { 171 | display: flex; 172 | flex-direction: column; 173 | } 174 | 175 | #phoneVal input:invalid+span:before { 176 | content: "✖"; 177 | padding-right: 5px; 178 | color: rgb(185, 1, 1); 179 | } 180 | 181 | #phoneVal input:valid+span:before { 182 | content: "✔"; 183 | padding-right: 5px; 184 | color: #009000; 185 | } 186 | 187 | /* for email */ 188 | 189 | .error { 190 | /* display: none; */ 191 | margin-top: 5px; 192 | width: 85%; 193 | margin-left: 10px; 194 | /* padding: 0; */ 195 | /* font-size: 80%; */ 196 | font-size: 13px; 197 | color: rgb(185, 1, 1); 198 | } 199 | 200 | #emailVal { 201 | display: flex; 202 | flex-direction: column; 203 | /* align-items: center; */ 204 | /* height: 50px; */ 205 | } 206 | 207 | /* password error msg */ 208 | 209 | #passVal, #confirmPassVal { 210 | display: flex; 211 | flex-direction: column; 212 | } 213 | 214 | #userPasswordVal, #userPasswordConfirmVal { 215 | font-size: 13px; 216 | color: rgb(185, 1, 1); 217 | margin-left: 5px; 218 | } 219 | 220 | .pass-confirm { 221 | display: flex; 222 | justify-content: space-between; 223 | flex-wrap: wrap; 224 | } 225 | 226 | #usrPwd { 227 | display: flex; 228 | flex-direction: column; 229 | } 230 | 231 | #pwdMsg { 232 | margin: 0px; 233 | margin-bottom: 5px; 234 | font-size: 13px; 235 | } 236 | 237 | #message { 238 | display: none; 239 | background: rgb(248, 248, 248); 240 | color: #000; 241 | position: relative; 242 | padding: 5px; 243 | margin-top: 5px; 244 | } 245 | 246 | #message p { 247 | font-size: 13px; 248 | } 249 | 250 | /* Add a green text color and a checkmark when the requirements are right */ 251 | .valid { 252 | color: green; 253 | } 254 | 255 | .valid:before { 256 | position: relative; 257 | padding-right: 5px; 258 | content: "✔"; 259 | } 260 | 261 | /* Add a red text color and an "x" when the requirements are wrong */ 262 | .invalid { 263 | color: rgb(185, 1, 1); 264 | } 265 | 266 | .invalid:before { 267 | position: relative; 268 | padding-right: 5px; 269 | content: "✖"; 270 | } 271 | 272 | #divCheckPassword { 273 | font-size: 13px; 274 | margin-top: 5px; 275 | } 276 | 277 | footer { 278 | margin-top: -70px; 279 | font-size: 13px; 280 | padding-left: 50px; 281 | color: rgb(126, 126, 126); 282 | font-family: 'Space Mono', monospace; 283 | transition: 0.5s; 284 | } 285 | 286 | 287 | span { 288 | font-size: 20px; 289 | } 290 | 291 | a { 292 | text-decoration: none; 293 | color: rgb(126, 126, 126); 294 | } 295 | 296 | a:hover { 297 | text-decoration: underline; 298 | } 299 | 300 | .have-account{ 301 | font-weight: 700; 302 | } 303 | 304 | .login { 305 | color: rgb(4, 116, 97); 306 | font-weight: 900; 307 | } 308 | 309 | .right { 310 | display: flex; 311 | } 312 | 313 | img { 314 | height: 900px; 315 | width: 450px; 316 | } 317 | 318 | 319 | .github-link { 320 | color: rgb(0, 0, 0); 321 | font-weight: 700; 322 | } 323 | 324 | @media only screen and (max-width: 1300px) { 325 | .content-div { 326 | 327 | padding-left: 10px; 328 | padding-right: 10px; 329 | } 330 | footer { 331 | margin-top: -80px; 332 | width: 550px; 333 | } 334 | 335 | #first_name, #mail, #user_password { 336 | margin-right: 10px; 337 | 338 | } 339 | 340 | } 341 | 342 | @media only screen and (max-width: 1100px) { 343 | .right { 344 | display: none; 345 | } 346 | 347 | .content-div { 348 | height: 1100px; 349 | padding-right: 50px; 350 | } 351 | 352 | .left { 353 | height: 1100px; 354 | } 355 | 356 | html { 357 | height: 1225px; 358 | } 359 | 360 | .logo-img { 361 | padding: 0px; 362 | margin-top: 15px; 363 | } 364 | 365 | .content { 366 | margin-top: 100px; 367 | } 368 | } 369 | 370 | @media only screen and (max-width: 687px) { 371 | .content-div { 372 | display: flex; 373 | width: 100%; 374 | } 375 | 376 | .content { 377 | margin-top: 30px; 378 | align-items: center; 379 | /* width: 70vw; */ 380 | } 381 | 382 | .first-last-name, .email-phone, .pass-confirm { 383 | display: flex; 384 | flex-direction: column; 385 | justify-content: center; 386 | align-items: center; 387 | } 388 | 389 | .logo-div { 390 | display: none; 391 | } 392 | 393 | .spacing { 394 | padding-top: 20px; 395 | display: flex; 396 | flex-direction: column; 397 | align-items: center; 398 | } 399 | 400 | #emailVal { 401 | align-items: center; 402 | } 403 | 404 | .error { 405 | width: 100%; 406 | } 407 | } 408 | 409 | @media only screen and (max-width: 600px) { 410 | footer { 411 | width: 375px; 412 | } 413 | } 414 | 415 | @media only screen and (max-width: 430px) { 416 | footer { 417 | padding:0px; 418 | } 419 | 420 | .content-div { 421 | padding-right: 0px; 422 | } 423 | 424 | html { 425 | width: 100vw; 426 | } 427 | 428 | .content{ 429 | padding-left: 40px; 430 | } 431 | 432 | button { 433 | margin-left: 10px; 434 | } 435 | 436 | .have-account { 437 | margin-left: -15px; 438 | } 439 | 440 | .copyright, .attribute { 441 | padding-left: 30px; 442 | } 443 | } 444 | --------------------------------------------------------------------------------