Merge pull request codemistic#336 from aaushitiwari/main

Sign-In and Sign-Up Page
som-sama · Oct 9, 2022 · 364f05f · 364f05f
2 parents baf0ea4 + 34ecbfc
commit 364f05f
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 0 deletions.
diff --git a/sign-in-up/index.html b/sign-in-up/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <div class="login">
+        <h1>Log In</h1>
+        <form class="needs-validation">
+            <div class="form-group was-validated">
+                <label class="form-label" for="email">Email Address</label>
+                <input class="form-control" type="email" id="email" required>
+                <div class="invalid-feedback">
+                    Please enter your Email Address!
+                </div>
+            </div>
+            <div class="form-group was-validated">
+                <label class="form-label" for="password">Password</label>
+                <input class="form-control" type="password"  id="password" required>
+                <div class="invalid-feedback">
+                    Please enter your Password!
+                </div>
+            </div>
+            <div class="form-group form-check">
+                <input class="form-check-input" type="checkbox"  id="check">
+                <label class="form-check-label" for="check">Remember Me</label>
+            </div>
+            <input class="w-100 btn btn-lg btn-primary" type="submit" value="SIGN IN">
+            <div class="sign-up-link">
+                Don't have an account? <a href="sign-up.html">Create one.</a>
+            </div>
+
+        </form>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+
+  </body>
+</html>
diff --git a/sign-in-up/sign-up.html b/sign-in-up/sign-up.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <div class="sign-up">
+        <h1>Sign Up</h1>
+        <form class="needs-validation">
+            <div class="form-group was-validated">
+                <label class="form-label" for="email">Name</label>
+                <input class="form-control" type="text" id="name" required>
+                <div class="invalid-feedback">
+                    Please enter your Name
+                </div>
+            </div>
+            <div class="form-group was-validated">
+                <label class="form-label" for="email">Email Address</label>
+                <input class="form-control" type="email" id="email" required>
+                <div class="invalid-feedback">
+                    Please enter your Email Address!
+                </div>
+            </div>
+            <div class="form-group was-validated">
+                <label class="form-label" for="password">Password</label>
+                <input class="form-control" type="password"  id="password" required>
+                <div class="invalid-feedback">
+                    Please enter your Password!
+                </div>
+            </div>
+            <div class="form-group form-check">
+                <input class="form-check-input" type="checkbox"  id="check-1">
+                <label class="form-check-label" for="check">Creating an account means you’re okay with our <a>Terms of Service</a>, <a>Privacy Policy</a>, and our default <a>Notification Settings.</a></label>
+            </div>
+            <input class="w-100 btn btn-lg btn-primary" type="submit" value="SIGN UP">
+
+            <div class="sign-in-link">
+                Already have an account? <a href="index.html">Sign In</a>
+            </div>
+
+        </form>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+
+  </body>
+</html>
diff --git a/sign-in-up/style.css b/sign-in-up/style.css
@@ -0,0 +1,55 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(81, 98, 226);
+}
+.login{
+    width: 360px;
+    height: min-content;
+    padding: 20px;
+    border-radius: 10px;
+    background:#ffff;
+
+}
+.login h1{
+    margin-bottom: 25px;
+    text-align: center;
+    font-size: 36px;
+}
+.login .form-group{
+    margin-top: 10px;
+}
+.login form input[type="submit"]{
+    margin-top: 20px;
+    font-size: 20px;
+}
+.invalid-feedback{
+    color: red;
+}
+.sign-up-link{
+    margin-top: 10px;
+}
+.sign-up{
+    width: 360px;
+    height: min-content;
+    padding: 20px;
+    border-radius: 10px;
+    background:#ffff;
+}
+.sign-up .form-group{
+    margin-top: 10px;
+}
+.sign-up .form input[type="submit"]{
+    margin-top: 50px;
+    font-size: 20px;
+}
+.sign-in-link{
+    margin-top: 10px;
+}