incubateind · shlokbhargava · Mar 23, 2020 · Mar 23, 2020 · Mar 23, 2020 · Mar 23, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/ShlokBhargava/.DS_Store b/ShlokBhargava/.DS_Store
diff --git a/ShlokBhargava/images/.DS_Store b/ShlokBhargava/images/.DS_Store
diff --git a/ShlokBhargava/images/favicon.png b/ShlokBhargava/images/favicon.png
diff --git a/ShlokBhargava/images/img.jpg b/ShlokBhargava/images/img.jpg
diff --git a/ShlokBhargava/images/img3.jpg b/ShlokBhargava/images/img3.jpg
diff --git a/ShlokBhargava/index.html b/ShlokBhargava/index.html
@@ -0,0 +1,80 @@
+<!-- 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">
+  <link rel="icon" type="image/icon" href="images/favicon.png">
+  <title>Login</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css">
+</head>
+
+<body>
+
+    <img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo" alt="">
+
+  <!-- Beautify This -->
+
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-sm-6 log-form">
+          <h2>Enter Your Details</h2>
+          <form onsubmit="return checkForm(this)">
+
+            <div class="form-group">
+              <input class="form-control input" type="text" name="username" placeholder="Username" required/>
+            </div>
+
+            <div class="form-group">
+              <input class="form-control input" type="email" name="email" placeholder="Email" required/>
+            </div>
+
+            <div class="form-group">
+              <input class="form-control input" type="password" name="password" placeholder="Password" required /> 
+            </div>
+
+            <div class="form-group">
+              <input class="form-control input" type="password" name="cnfpassword" placeholder="Confirm Password" required />
+            </div>
+
+            <div class="form-group">
+              <input class="form-control input" type="tel" title="phone" name="phone"
+               placeholder="Phone Number"
+              required>
+            </div>
+
+            <div class="form-group">
+              <textarea class="form-control input" name="message" id="message" cols="35" rows="4" placeholder="Enter Message"></textarea>
+            </div>
+
+            <p>Age</p>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input" type="radio" name="age" id="above" value="above">
+              <label class="form-check-label" for="above">Above 18</label>
+            </div>
+
+            <div class="form-check form-check-inline">
+              <input class="form-check-input" type="radio" name="age" id="below" value="below">
+              <label class="form-check-label" for="below">Below 18</label>
+            </div>
+            <br>
+            <br>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+
+  <script src="main.js"></script>
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+  <!-- Beautify Ends -->
+</body>
+</html>
diff --git a/ShlokBhargava/main.css b/ShlokBhargava/main.css
@@ -0,0 +1,102 @@
+* {
+  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 */
+body{
+  /* background-image: linear-gradient(90deg, #dfb79d 10%, bisque 84%); */
+  background-image: url(images/img3.jpg);
+  background-size: cover;
+  background-attachment: fixed;
+  animation-name: bgimg;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes bgimg{
+  from {background-image: url(images/img3.jpg);}
+  to {background-image: url(images/img.jpg);}
+}
+
+
+/* Input Fields Of The Form */
+.input{
+  outline: 0;
+  border-width: 0 0 1px;
+  border-color: black;
+  background: none;
+}
+
+.form-group input:focus{
+  background: none;
+}
+
+.form-group textarea:focus{
+  background: none;
+}
+
+
+/* Social Icons */
+i{
+  text-align: center;
+  color: rgb(102, 98, 98);
+  font-size: 30px;
+}
+
+
+/* Media Queries */
+@media (max-width: 360px){
+  .logo{
+    width: 75px;
+  }
+}
+
+@media (orientation: portrait) and (max-width: 823px) and (max-height: 568px){
+  .log-form{
+    top: 60%;
+  }
+}
+
+@media (orientation: landscape) and (max-width: 823px) and (max-height: 414px){
+  .log-form{
+    top: 95%;
+  }
+}
diff --git a/ShlokBhargava/main.js b/ShlokBhargava/main.js
@@ -0,0 +1,22 @@
+/* ========================WRITE YOUR JS FROM HERE======================== */
+
+
+function checkForm(form){
+
+    if(form.password.value != form.cnfpassword.value){
+        alert('Password Does Not match the confirm Password');
+        form.password.focus();
+        return false;
+    }
+
+    if(form.phone.value.length != 10){
+        alert('Enter a correct 10 digit phone number');
+        form.phone.focus();
+        return false;
+    }
+
+    else{
+        alert('Login Successful');
+        return true;
+    }
+}
diff --git a/ShlokBhargava/myInfo.txt b/ShlokBhargava/myInfo.txt
@@ -0,0 +1,5 @@
+Name: Shlok Bhargava
+College Name: Netaji Subhas Institute of Technology
+Stream: B.E. Mechanical Engineering(2018-2022)
+Year Of Study: Second Year
+Current Location (City of residence): New Delhi