diff --git a/Sing Up Page/index.html b/Sign up Page/index.html similarity index 81% rename from Sing Up Page/index.html rename to Sign up Page/index.html index fbffe82..6500828 100644 --- a/Sing Up Page/index.html +++ b/Sign up Page/index.html @@ -1,45 +1,45 @@ - - - - - - - Sing Up Page - - - - - -
-

Sing Up

-
- -
- - -
Username is Required
-
- -
- - -
E-mail is Required
-
Enter a Valid Email
-
- -
- - -
Enter a Valid Password
-
- -
Accept Terms & Conditions
- -
-
- - - - + + + + + + + Sign Up Page + + + + + +
+

Sign Up

+
+ +
+ + +
Username is Required
+
+ +
+ + +
E-mail is Required
+
Enter a Valid Email
+
+ +
+ + +
Enter a Valid Password
+
+ +
Accept Terms & Conditions
+ +
+
+ + + + \ No newline at end of file diff --git a/Sing Up Page/script.js b/Sign up Page/script.js similarity index 95% rename from Sing Up Page/script.js rename to Sign up Page/script.js index 3be4915..62f1f4c 100644 --- a/Sing Up Page/script.js +++ b/Sign up Page/script.js @@ -1,55 +1,55 @@ -let Name = document.getElementById("name") -let Email= document.getElementById("email") -let Pass= document.getElementById("pass") -let Form = document.getElementById("form") -let Check = document.getElementById("check") - -let Ename = document.getElementById("EroName") -let Eemail= document.getElementById("EroEmail") -let Epass= document.getElementById("EroPass") -let Echeck = document.getElementById("EroCheck") -let EemailVali = document.getElementById("EroCheckVali") - -form.addEventListener('submit', (e)=> -{ - e.preventDefault(); - Validate(); -}) - - - -function Validate() -{ - if(Name.value==='') - { - Ename.style.display="block"; - } - else if(Name.value!='') - { - Ename.style.display="none"; - } - if(Email.value==='') - { - Eemail.style.display="block"; - } - else if(Email.value!='') - { - Eemail.style.display="none"; - } - if(Pass.value==='') - { - Epass.style.display="block"; - } - else if(Pass.value!='') - { - Epass.style.display="none"; - } - if(!(Check.checked)) - { - Echeck.style.display="block" - } - else if((Check.checked)) - { - Echeck.style.display="none" - } +let Name = document.getElementById("name") +let Email= document.getElementById("email") +let Pass= document.getElementById("pass") +let Form = document.getElementById("form") +let Check = document.getElementById("check") + +let Ename = document.getElementById("EroName") +let Eemail= document.getElementById("EroEmail") +let Epass= document.getElementById("EroPass") +let Echeck = document.getElementById("EroCheck") +let EemailVali = document.getElementById("EroCheckVali") + +form.addEventListener('submit', (e)=> +{ + e.preventDefault(); + Validate(); +}) + + + +function Validate() +{ + if(Name.value==='') + { + Ename.style.display="block"; + } + else if(Name.value!='') + { + Ename.style.display="none"; + } + if(Email.value==='') + { + Eemail.style.display="block"; + } + else if(Email.value!='') + { + Eemail.style.display="none"; + } + if(Pass.value==='') + { + Epass.style.display="block"; + } + else if(Pass.value!='') + { + Epass.style.display="none"; + } + if(!(Check.checked)) + { + Echeck.style.display="block" + } + else if((Check.checked)) + { + Echeck.style.display="none" + } } \ No newline at end of file diff --git a/Sing Up Page/style.css b/Sign up Page/style.css similarity index 88% rename from Sing Up Page/style.css rename to Sign up Page/style.css index d5383e1..fcad7b0 100644 --- a/Sing Up Page/style.css +++ b/Sign up Page/style.css @@ -1,106 +1,111 @@ -* -{ - padding: 0; - margin: 0; - box-sizing: border-box; -} - -@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); - -.container -{ - - min-height: 450px; - width: 400px; - align-items: center; - margin: 0 auto; - margin-top: 100px; - background-color: aliceblue; - border-radius: 15px; - padding: 15px; - font-family: 'Rubik', sans-serif; -} -.container form -{ - margin: 25px 35px; - -} -body -{ - background: rgb(3,0,57); - background: linear-gradient(90deg, rgba(3,0,57,1) 0%, rgba(12,12,233,1) 72%, rgba(12,12,238,1) 75%, rgba(0,212,255,1) 100%); -} -.ele -{ - margin: 20px 0; -} -.ele label -{ - display: flex; - margin-bottom: 5px; -} -h1 -{ - text-align: center; -} -input -{ - height: 30px; - width: 250px; - border-radius: 5px; - border: 1px solid rgb(211, 211, 211); - padding: 5px; -} -input::placeholder -{ - color: #91949b; -} -input:focus -{ - outline: none; -} -.check -{ - width: 15px; - display: inline-block; - margin-right: 10px; - padding: 0; - height: 12px; -} -h4 -{ - font-size: 10px; -} - - -.btn-grad { - background-image: linear-gradient(to right, #4b6cb7 0%, #182848 51%, #4b6cb7 100%); - margin: 10px; - margin-left: 0; - padding: 15px 45px; - text-align: center; - text-transform: uppercase; - transition: 0.5s; - background-size: 200% auto; - color: white; - box-shadow: 0 0 20px #eee; - border-radius: 10px; - display: block; - } - - .btn-grad:hover { - background-position: right center; /* change the direction of the change here */ - color: #fff; - text-decoration: none; - } -.error -{ - background-color: rgb(227, 222, 222); - width: 250px; - color: red; - font-size: 13px; - padding: 5px; - margin: 1px 0; - border-radius: 5px; - display: none; +* +{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); + +.container +{ + + min-height: 450px; + width: 400px; + align-items: center; + margin: 0 auto; + margin-top: 100px; + background-color: aliceblue; + border-radius: 10px; + padding: 15px; + font-family: 'Rubik', sans-serif; + box-shadow: 0 0 100px black; +} + +.container form +{ + margin: 25px 35px; + +} +body +{ + background: rgb(3,0,57); + background: linear-gradient(90deg, rgba(3,0,57,1) 0%, rgba(12,12,233,1) 72%, rgba(12,12,238,1) 75%, rgba(0,212,255,1) 100%); +} +.ele +{ + margin: 20px 0; +} +.ele label +{ + display: flex; + margin-bottom: 5px; +} +h1 +{ + text-align: center; +} +input +{ + height: 30px; + width: 250px; + border-radius: 5px; + border: 1px solid rgb(211, 211, 211); + padding: 5px; + font-size: 20px; +} +input::placeholder +{ + color: #91949b; +} +input:focus +{ + outline: none; +} +.check +{ + width: 15px; + display: inline-block; + margin-right: 10px; + padding: 0; + height: 12px; +} +h4 +{ + font-size: 10px; +} + + +.btn-grad { + background-image: linear-gradient(to right, #0d2cf6 0%, #e21d0b 51%, #0d2cf6 100%); + margin: 10px; + margin-left: 0; + padding: 15px 45px; + text-align: center; + text-transform: uppercase; + transition: 0.5s; + background-size: 200% auto; + color: white; + box-shadow: 0 0 20px #eee; + border-radius: 10px; + display: block; + font-size: 15px; + color: rgb(251, 247, 247); + } + + .btn-grad:hover { + background-position: right center; /* change the direction of the change here */ + color: #fff; + text-decoration: none; + } +.error +{ + background-color: rgb(227, 222, 222); + width: 250px; + color: red; + font-size: 13px; + padding: 5px; + margin: 1px 0; + border-radius: 5px; + display: none; } \ No newline at end of file