incubateind · shreyarastogi · Mar 25, 2020 · Mar 25, 2020
diff --git a/Shreya Rastogi/Project/Document.txt b/Shreya Rastogi/Project/Document.txt
@@ -0,0 +1,5 @@
+Name: Shreya Rastogi
+College: Bharati Vidyapeeth's College Of Engineering, Paschim Vihar, New Delhi
+Stream: ECE
+Year: 3rd
+Residence: New Delhi
diff --git a/Shreya Rastogi/Project/index.html b/Shreya Rastogi/Project/index.html
@@ -0,0 +1,83 @@
+<!-- THE BOILERPLATE SHOULD NOT BE REMOVED -->
+<!-- Proper naming convention should be used while naming id attributes. -->
+<!-- ADDING A SUCCESS PAGE FOR THE SAME WILL BOOST YOUR CHANCES -->
+<!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">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Lora|MedievalSharp|Petit+Formal+Script|Salsa|Spicy+Rice&display=swap" rel="stylesheet">
+  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
+
+</head>
+<body>
+<img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo" alt="">
+  <!-- Beautify This -->
+  <div class="container">
+   <div  id="register" class="log-form ">
+     <div id="login-row" class="row justify-content-center align-items-center">
+          <div id="login-box" class="col-12">
+          <h2><i class="fa fa-user"></i>Register</h2>
+      <form>
+
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="fa fa-user"></i></span>
+        </div>
+        <input type="text" class="form-control" placeholder="username" required>
+      </div>
+
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="fa fa-envelope"></i></span>
+        </div>
+        <input type="email" class="form-control" placeholder="email" required>
+      </div>
+
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="fa fa-phone-square"></i></span>
+        </div>
+        <input type="tel" class="form-control" placeholder="123-456-7890"  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
+      </div>
+
+     <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"> <i class="fa fa-lock"></i></i></span>
+        </div>
+        <input id="pass" type="password" class="form-control" placeholder="password(minimum length:8 )" minlength="8" required>
+      </div>
+
+      <div class="input-group form-group form-rounded">
+        <div class="input-group-prepend">
+          <span class="input-group-text"> <i class="fa fa-lock"></i></i></span>
+        </div>
+        <input id="confpass" type="password" class="form-control" placeholder="confirm password" minlength="8" required>
+      </div>
+
+
+      <textarea class="text-left form-control" name="message" id="message" cols="20" rows="2" placeholder="enter message" ></textarea>
+      <p>Age</p>
+      <div id="radio-button">
+      <input class="form-group" type="radio" id="above" name="age" value="above" required>
+      <label id="above1" class="form-group" for="above">Above 18</label>
+      <input class="form-group" type="radio" id="below" name="age" value="below" class="text-right">
+      <label id="below1" class="form-group" for="below">Below 18</label required>
+      </div>
+      <div><button id="button" type="submit" class="btn btn-primary btn-md" >Submit</button></div>
+
+       </form>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript" src="main.js"></script>
+  <!-- Beautify Ends -->
+
+</body>
+</html>
diff --git a/Shreya Rastogi/Project/jquery-3.4.1.min.js b/Shreya Rastogi/Project/jquery-3.4.1.min.js
diff --git a/Shreya Rastogi/Project/main.css b/Shreya Rastogi/Project/main.css
@@ -0,0 +1,245 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "open sans", helvetica, arial, sans;
+}
+.logo{
+  width: 100px;
+}
+.log-form {
+  width: 100%;
+  min-width: 320px;
+  max-width: 475px;
+  background: #fff;
+  position: absolute;
+  top: 50%;
+  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: center;
+}
+.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: url("https://images.unsplash.com/photo-1460411794035-42aac080490a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+
+}
+
+.log-form{
+  margin: 25px 20px;
+}
+
+html {
+height: 100%;
+}
+
+h2{
+padding-bottom: 15px;
+font-weight: 1000;
+font-size: 20px;
+color: pink;
+font-family: 'MedievalSharp', cursive;
+font-family: 'Salsa', cursive;
+font-family: 'Lora', serif;
+font-family: 'Petit Formal Script', cursive;
+font-family: 'Spicy Rice', cursive;
+font-family: 'IBM Plex Sans', sans-serif;
+}
+
+.log-form{
+
+  background: #654ea3;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #eaafc8, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+}
+
+.form-rounded {
+  border-radius: 105px;
+  }
+
+  #above1{
+    padding-right: 30px;
+    color: pink;
+    font-size: 18px;
+    font-family: 'MedievalSharp', cursive;
+    font-family: 'Salsa', cursive;
+    font-family: 'Lora', serif;
+    font-family: 'Petit Formal Script', cursive;
+    font-family: 'Spicy Rice', cursive;
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+
+  #below1{
+    color: pink;
+    font-size: 18px;
+    font-family: 'MedievalSharp', cursive;
+    font-family: 'Salsa', cursive;
+    font-family: 'Lora', serif;
+    font-family: 'Petit Formal Script', cursive;
+    font-family: 'Spicy Rice', cursive;
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+
+  .input-group-prepend span{
+    width: 45px;
+    background-color: whitesmoke ;
+    color: palevioletred;
+    border:0 !important;
+    }
+
+    p{
+      font-size: 20px;
+      color: pink;
+      padding-top: 10px;
+      font-family: 'MedievalSharp', cursive;
+      font-family: 'Salsa', cursive;
+      font-family: 'Lora', serif;
+      font-family: 'Petit Formal Script', cursive;
+      font-family: 'Spicy Rice', cursive;
+      font-family: 'IBM Plex Sans', sans-serif;
+    }
+
+    /* #button{
+      color: #4B1248;
+      padding: 20;
+      border: none;
+      /* background: none;
+      font-family: 'MedievalSharp', cursive;
+      font-family: 'Salsa', cursive;
+      font-family: 'Lora', serif;
+      font-family: 'Petit Formal Script', cursive;
+      font-family: 'Spicy Rice', cursive;
+      font-family: 'IBM Plex Sans', sans-serif;
+      background: #ee9ca7;  /* fallback for old browsers
+      background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7);   Chrome 10-25, Safari 5.1-6
+      background: linear-gradient(to right, #ffdde1, #ee9ca7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
+
+    }*/
+
+    #button {
+      padding: 8px 15px;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: center;
+      cursor: pointer;
+      outline: none;
+      color:  #20002c;
+      background: #d9a7c7;  /* fallback for old browsers */
+      background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);  /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(to right, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+      border: none;
+      border-radius: 15px;
+    }
+
+     #button:hover {
+       color: pink;
+      background: #B24592;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #F15F79, #B24592);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #F15F79, #B24592); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+    }
+
+    #button:active {
+      background: #B24592;  /* fallback for old browsers */
+      background: -webkit-linear-gradient(to right, #F15F79, #B24592);  /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(to right, #F15F79, #B24592); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+      box-shadow: 0 5px #666;
+      transform: translateY(4px);
+
+    }
+
+
+
+   /* .container {
+      display: block;
+      position: relative;
+      padding-left: 35px;
+      margin-bottom: 12px;
+      cursor: pointer;
+      font-size: 22px;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    /* Hide the browser's default radio button */
+    /*.container input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    /* Create a custom radio button */
+    .checkmark {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 25px;
+      width: 25px;
+      background-color: #eee;
+      border-radius: 50%;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark {
+      background-color: #ccc;
+    }
+
+    /* When the radio button is checked, add a blue background */
+    .container input:checked ~ .checkmark {
+      background-color: #2196F3;
+    }
+
+    /* Create the indicator (the dot/circle - hidden when not checked) */
+    .checkmark:after {
+      content: "";
+      position: absolute;
+      display: none;
+    }
+
+    /* Show the indicator (dot/circle) when checked */
+    .container input:checked ~ .checkmark:after {
+      display: block;
+    }
+
+    /* Style the indicator (dot/circle) */
+    .container .checkmark:after {
+      top: 9px;
+      left: 9px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: white;
+    }
+
+
+
+
diff --git a/Shreya Rastogi/Project/main.js b/Shreya Rastogi/Project/main.js
@@ -0,0 +1,31 @@
+/* ========================WRITE YOUR JS FROM HERE======================== */
+
+$(function () {
+    $("#button").click(function () {
+        var password = $("#pass").val();
+        var confirmPassword = $("#confpass").val();
+        if (password != confirmPassword) {
+            alert("Passwords do not match.");
+            return false;
+        }
+        return true;
+    });
+});
+function validateForm() {
+    var valid = true;
+    $('.form-field').each(function () {
+        if ($(this).val() === '') {
+            valid = false;
+            return false;
+        }
+    });
+    return valid
+}
+
+function success(){
+    var good = validateForm();
+    if(good == true){
+     alert('You have successfully registered!!!');
+    }
+}
+