incubateind · divyanshmmantri · Mar 22, 2020 · Mar 22, 2020 · Mar 22, 2020 · Mar 22, 2020
diff --git a/Divyansh mantri/index.html b/Divyansh mantri/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Login</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css">
+
+  <script src="main.js"></script>
+</head>
+<body>
+<img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo"   alt="">
+  <!-- Beautify This -->
+ <div class="log-form">
+
+     <h1>LOGIN</h1>
+
+
+     <h2>Enter your details:</h2>
+     <form>
+      <label for="username"><b style="color:white">Username</b></label><br>
+      <input type="text" title="username" placeholder="username" id="user" required ><br><br>
+      <label for="email"><b style="color:white">Email</b></label><br>
+      <input type="email" title="email" placeholder="email" id="email" required><br><br>
+      <label for="phone"><b style="color:white ;">Phone no</b></label><br>
+      <input type="number" title="phone" placeholder="Enter phone no" id="phno" required onblur="val()"><br>
+      <span id="message"></span>
+      <br><br>
+      <label for="password"><b style="color:white">Password</b></label><br>
+      <input type="password" title="password" placeholder="password" required id="pass"><br><br>
+      <label for="cpass"><b style="color:white">Confirm password</b></label><br>
+      <input type="password" title="cnfpassword" placeholder="confirm password" required id="cpass" onblur="val1()"><br><br>
+      <label for="text"><b style="color:white">Message</b></label><br>
+      <textarea name="message" id="message" cols="35" rows="4" placeholder="enter message" id="message1"></textarea>
+      <p style="color:white;">Age</p>
+      <input type="radio" id="above" name="age" value="above">
+      <label for="above"><b style="color:white" >Above 18<b></b></label>
+      <input type="radio" id="below" name="age" value="below">
+      <label for="below">Below 18</label><br><br>
+      <button type="submit" class="btn">Submit</button>
+     </form>
+
+
+  </div>
+  <!-- Beautify Ends -->
+</body>
+</html>
diff --git a/Divyansh mantri/main.css b/Divyansh mantri/main.css
@@ -0,0 +1,96 @@
+
+ * {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "open sans", helvetica, arial, sans;
+
+}
+.logo{
+  width: 200px;
+
+
+
+}
+.log-form {
+  width: 100%;
+  min-width: 320px;
+  max-width: 475px;
+  background:grey;
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+h2 {
+  text-align:left;
+  color:white;
+}
+
+.log-form {
+  padding: 2em;
+  -webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
+  -moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
+  box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
+}
+
+form {
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
+/* ========================WRITE YOUR CSS FROM HERE======================== */
+body{
+  background-color:powderblue;
+}
+h1 {
+  text-align: center;
+  color:white;
+  font-style:italic;
+
+}
+
+input[type=text] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+}
+input[type=email] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+input[type=password] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+input[type=number] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+#message{
+  border-radius: 20px;
+}
+.btn{
+  background-color:black;
+  color:white;
+  padding:20px;
+  border-radius:20px ;
+  width: 200px;
+}
diff --git a/Divyansh mantri/main.js b/Divyansh mantri/main.js
@@ -0,0 +1,24 @@
+function val()
+{
+var pno=document.getElementById("phno").value;
+var pno1=/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+if(pno.length===10 && pno.match(pno1))
+{
+document.getElementById("message").style.color="green";
+document.getElementById("message").innerHTML="valid no";
+}
+else
+{
+document.getElementById("message").style.color="red";
+document.getElementById("message").innerHTML="invalid no";
+}
+}
+function val1()
+{
+var pass=document.getElementById("pass").value;
+var cpass=document.getElementById("cpass").value;
+if(pass!=cpass)
+{
+    alert("password and confirm password should match");
+}
+}
diff --git a/Divyansh mantri/text b/Divyansh mantri/text
@@ -0,0 +1,3 @@
+NAME-DIVYANSH MANTRI
+COLLEGE-VIT VELLORE
+YEAR AND BRANCH -SECOND YEAR COMPUTER SCIENCE
diff --git a/LoginPageTask/index.html b/LoginPageTask/index.html
@@ -37,7 +37,37 @@
   </div>
 </nav>
   <!-- Beautify This -->
-  <div class="log-form">
+  <div class="login>
+
+     <h1>LOGIN</h1>
+
+
+     <h2>Enter your details:</h2>
+     <form>
+      <label for="username"><b style="color:white">Username</b></label><br>
+      <input type="text" title="username" placeholder="username" id="user" required ><br><br>
+      <label for="email"><b style="color:white">Email</b></label><br>
+      <input type="email" title="email" placeholder="email" id="email" required><br><br>
+      <label for="phone"><b style="color:white ;">Phone no</b></label><br>
+      <input type="number" title="phone" placeholder="Enter phone no" id="phno" required onblur="val()"><br>
+      <span id="message"></span>
+      <br><br>
+      <label for="password"><b style="color:white">Password</b></label><br>
+      <input type="password" title="password" placeholder="password" required id="pass"><br><br>
+      <label for="cpass"><b style="color:white">Confirm password</b></label><br>
+      <input type="password" title="cnfpassword" placeholder="confirm password" required id="cpass" onblur="val1()"><br><br>
+      <label for="text"><b style="color:white">Message</b></label><br>
+      <textarea name="message" id="message" cols="35" rows="4" placeholder="enter message" id="message1"></textarea>
+      <p style="color:white;">Age</p>
+      <input type="radio" id="above" name="age" value="above">
+      <label for="above"><b style="color:white" >Above 18<b></b></label>
+      <input type="radio" id="below" name="age" value="below">
+      <label for="below">Below 18</label><br><br>
+      <button type="submit" class="btn">Submit</button>
+     </form>
+
+
+=======
 
       <h2 class="mb-4 form-heading">Enter your details</h2>
     <form name="myForm"action="/sucess.html" onsubmit="return validateForm()" method="post">
@@ -75,11 +105,13 @@ <h2 class="mb-4 form-heading">Enter your details</h2>
       </div>
     </form>
 
+
   </div>
   <!-- Beautify Ends -->
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-</body>
+
 </html> 
+
diff --git a/LoginPageTask/main.css b/LoginPageTask/main.css
@@ -44,5 +44,108 @@ h2 {
 form {
   display: block;
   text-align: center;
-  width: 100%;
-}
+  width: 1
+}
+
+/* ========================WRITE YOUR CSS FROM HERE======================== */
+
+
+
+=======
+.submit-button
+{
+  margin-top:15px;
+  width:100%;
+  text-align:center;
+  padding:6px;
+  font-size:15px;
+
+}
+.hero-section
+{
+  background-color:white;
+}
+.nav-section
+{
+  background-color:#646464;
+  padding:3px;
+  position: fixed;
+}
+li.nav-item 
+{
+color:white;
+
+}
+div.form-group
+{
+  margin-top:1.4rem;
+  padding:5px;
+  font-family: 'PT Sans', sans-serif;
+  letter-spacing: 3px;
+  font-weight: bold;
+  color: black;
+}
+
+input.form-control
+{
+
+  box-shadow: 0.5px 0.2px #5b5b5b; 
+}
+
+textarea.form-control
+{
+  box-shadow: 0.5px 0.2px #5b5b5b; 
+}
+
+/* ========================WRITE YOUR CSS FROM HERE======================== */
+=======
+}
+body{
+  background-color:powderblue;
+}
+h1 {
+  text-align: center;
+  color:white;
+  font-style:italic;
+
+}
+
+input[type=text] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+}
+input[type=email] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+input[type=password] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+input[type=number] {
+  width: 200px;
+  padding: 20px;
+  height: 20px;
+  border-radius: 20px;
+
+}
+#message{
+  border-radius: 20px;
+}
+.btn{
+  background-color:black;
+  color:white;
+  padding:20px;
+  border-radius:20px ;
+  width: 200px;
+}
+
+
diff --git a/LoginPageTask/main.js b/LoginPageTask/main.js
@@ -1,4 +1,30 @@
 /* ========================WRITE YOUR JS FROM HERE======================== */
+
+function val()
+{
+var pno=document.getElementById("phno").value;
+var pno1=/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+if(pno.length===10 && pno.match(pno1))
+{
+document.getElementById("message").style.color="green";
+document.getElementById("message").innerHTML="valid no";
+}
+else
+{
+document.getElementById("message").style.color="red";
+document.getElementById("message").innerHTML="invalid no";
+}
+}
+function val1()
+{
+var pass=document.getElementById("pass").value;
+var cpass=document.getElementById("cpass").value;
+if(pass!=cpass)
+{
+    alert("password and confirm password should match");
+}
+}
+=======
 function validateForm() {
     var x = document.forms["myForm"]["user"].value;
     console.log(x); 
@@ -41,4 +67,5 @@ else
 alert( "Please provide your  valid password" );
     return false
 
-  }
+  }
+