diff --git a/img/Background.jpg b/img/Background.jpg new file mode 100644 index 0000000..b1f7725 Binary files /dev/null and b/img/Background.jpg differ diff --git a/login.html b/login.html new file mode 100644 index 0000000..324ffb2 --- /dev/null +++ b/login.html @@ -0,0 +1,33 @@ + + + + + + Registration Form + + + + +
+

Medical Website

+
+ +
+ + +
+
+ + +
+
+ +
+
+ New User ? Register +
+
+ + + + \ No newline at end of file diff --git a/register.html b/register.html new file mode 100644 index 0000000..13aa8e3 --- /dev/null +++ b/register.html @@ -0,0 +1,37 @@ + + + + + + Registration Form + + + + +
+

Medical Website

+
+ +
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/script3.js b/script3.js new file mode 100644 index 0000000..9bfa35a --- /dev/null +++ b/script3.js @@ -0,0 +1,41 @@ +function validateInputs(){ + var fullName=document.getElementById('name').value; + var email=document.getElementById('email').value; + var password=document.getElementById('password').value; + if (fullName==='') { + alert("Name is required"); + return false; + }else{ + true; + } + if (email===''){ + alert("Email is required"); + return false; + } + else{ + true; + } + if (password===''){ + alert("password is required"); + return false; + }else{ + alert("Registered successfully"); + } +} +function validateInputs1(){ + var email=document.getElementById('email').value; + var password=document.getElementById('password').value; + if (email===''){ + alert("Email is required"); + return false; + } + else{ + true; + } + if (password===''){ + alert("password is required"); + return false; + }else{ + alert("Registered successfully"); + } +} \ No newline at end of file diff --git a/style3.css b/style3.css new file mode 100644 index 0000000..30533dd --- /dev/null +++ b/style3.css @@ -0,0 +1,105 @@ +body{ + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + background-image: url("img/Background.jpg"); +} +.main{ + width: 100%; + max-width: 700px; + background: rgba(0,0,0,0.5); + padding: 28px; + margin: 0 28px; + border-radius: 10px; +} +.form-title{ + font-size: 60px; + text-align: center; + padding-bottom: 5px; + font-style: italic; +} +.main-user-info{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 20px 0; +} +.user-input-box{ + justify-content: end; + display: flex; + flex-wrap: wrap; + width: 50%; + padding-bottom: 15px; +} +.user-input-box label{ + width: 95%; + font-size: 20px; + margin: 5px 0; +} +.user-input-box input{ + height: 35px; + width: 95%; + border-radius: 7px; + outline: none; + border: 1px solid grey; +} +.gender-details{ + width: 100%; + padding: 10px; +} +.gender-title{ + font-size: 23px; +} +.gender-category{ + margin: 15px 0; +} +.gender-category label{ + padding: 0 20px 0 5px; +} +.gender-category label, +.gender-category input, +.form-submit-button input{ + cursor: pointer; +} +.form-submit-button{ + width: 100%; +} +.form-submit-button input{ + width: 100%; + margin-top: 10px; + font-size: 20px; + padding: 10px; + border: none; + border-radius: 3px; + background: rgba(56,204,93,0.7) +} +.form-submit-button input:hover{ + color: rgb(255,255,255); +} +.register{ + font-size: 25px; + text-align: center; + padding-top: 20px; +} +@media(max-width: 600px){ + .main{ + min-width: 200px; + } + .user-input-box{ + margin-bottom: 12px; + width: 100%; + } + .gender-category{ + display: flex; + justify-content: space-between; + width: 100%; + } + .main-user-info{ + max-height: 300px; + overflow: auto; + } + .main-user-info::-webkit-scrollbar{ + width: 0; + } +} \ No newline at end of file