From 82b09a9510086125f806e143e651132d90bd4ce0 Mon Sep 17 00:00:00 2001
From: CodingNinjaa <81390643+CodingNinjaa@users.noreply.github.com>
Date: Sun, 3 Oct 2021 00:09:53 +0530
Subject: [PATCH] Login Forms

---
 Login Forms/LoginForm-1.html |  82 +++++++++++++++++++++++++
 Login Forms/LoginForm-2.html | 115 +++++++++++++++++++++++++++++++++++
 2 files changed, 197 insertions(+)
 create mode 100644 Login Forms/LoginForm-1.html
 create mode 100644 Login Forms/LoginForm-2.html
diff --git a/Login Forms/LoginForm-1.html b/Login Forms/LoginForm-1.html
new file mode 100644
index 0000000..cf095d0
--- /dev/null
+++ b/Login Forms/LoginForm-1.html	
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Login Form</title>
+    <link rel="stylesheet" href="Login Form.css">
+    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">
+
+<style>
+body{
+  margin: 0;
+  padding: 0;
+  font-family:'Coiny',cursive;
+  background: #34495e;
+}
+.container{
+  width:300px;
+  padding: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  background: #191919;
+  text-align: center;
+  border-radius: 5px;
+  box-shadow: 0 50px 50px;
+}
+.container h1{
+  color: white;
+  font-weight: 500;
+
+}
+.container input[type="text"],.container input[type="password"]{
+  border: 0;
+  background: none;
+  display: block;
+  margin: 20px auto;
+  text-align: center;
+  border: 2px solid #3498db;
+  padding: 14px 10px;
+  width: 200px;
+  outline: none;
+  color: white;
+  font-size: 16px;
+  border-radius: 24px;
+  transition: 0.25s;
+}
+.container input[type="text"]:focus,.container input[type="password"]:focus{
+  width: 280px;
+  border-color: #2ecc71;
+}
+.container input[type="submit"]{
+  border: 0;
+  background: none;
+  display: block;
+  margin: 20px auto;
+  text-align: center;
+  border: 2px solid #2ecc71;
+  padding: 14px 25px;
+  outline: none;
+  color: white;
+  border-radius: 24px;
+  transition: 0.25s;
+  font-size: 17px;
+  font-family: 'Libre Baskerville', serif;
+}
+.container input[type="submit"]:hover{
+  background: #2ecc71;
+}
+</style>
+  </head>
+  <body>
+    <form class="container" action="" method="GET">
+      <h1>LOGIN</h1>
+      <input type="text" name="" placeholder="Username">
+      <input type="password" name="" placeholder="Password">
+      <input type="submit" value="Login">
+<input type="submit" value="New User">
+    </form>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Login Forms/LoginForm-2.html b/Login Forms/LoginForm-2.html
new file mode 100644
index 0000000..b02cb3f
--- /dev/null
+++ b/Login Forms/LoginForm-2.html	
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Login Form Design One | Fazt</title>
+    <link rel="stylesheet" href="/css/master.css">
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background: url('https://images.wallpaperscraft.com/image/bmw_e90_deep_concave_black_helicopter_94623_2560x1440.jpg') no-repeat center top;
+  background-size: cover;
+  font-family: sans-serif;
+  height: 100vh;
+}
+
+.login-box {
+  width: 320px;
+  height: 420px;
+  background: #000;
+  color: #fff;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  padding: 70px 30px;
+}
+
+.login-box .avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top: -50px;
+  left: calc(50% - 50px);
+}
+
+.login-box h1 {
+  margin: 0;
+  padding: 0 0 20px;
+  text-align: center;
+  font-size: 22px;
+}
+
+.login-box label {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  display: block;
+}
+
+.login-box input {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.login-box input[type="text"], .login-box input[type="password"] {
+  border: none;
+  border-bottom: 1px solid #fff;
+  background: transparent;
+  outline: none;
+  height: 40px;
+  color: #fff;
+  font-size: 16px;
+}
+
+.login-box input[type="submit"] {
+  border: none;
+  outline: none;
+  height: 40px;
+  background: #b80f22;
+  color: #fff;
+  font-size: 18px;
+  border-radius: 20px;
+}
+
+.login-box input[type="submit"]:hover {
+  cursor: pointer;
+  background: #ffc107;
+  color: #000;
+}
+
+.login-box a {
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 20px;
+  color: darkgrey;
+}
+
+.login-box a:hover {
+  color: #fff;
+}
+</style>
+  </head>
+  <body>
+
+    <div class="login-box">
+      <img src="https://www.carlogos.org/car-logos/tesla-logo-2200x2800-show.png" class="avatar" alt="Avatar Image">
+      <h1>Login Here</h1>
+      <form>
+        <!-- USERNAME INPUT -->
+        <label for="username">Username</label>
+        <input type="text" placeholder="Enter Username">
+        <!-- PASSWORD INPUT -->
+        <label for="password">Password</label>
+        <input type="password" placeholder="Enter Password">
+        <input type="submit" value="Log In">
+        <a href="#">Lost your Password?</a><br>
+        <a href="#">Don't have An account?</a>
+      </form>
+    </div>
+  </body>
+</html>
\ No newline at end of file
