Added a login page (v25)

README.md

@@ -53,6 +53,16 @@ A Project which includes curated list of different login page web pages.
 | login-form-v12 | <img src="login-form-v12/login-form-v12/screenshot.png " width="480" > |<img src="login-form-v12\login-form-v12\screenshotmobile.png" height="200" width="100" >| [@abhir9](https://github.com/abhir9)               |
 | login-form-v13 | <img src="login-form-v13\screenshot.png " width="480" > |<img src="login-form-v13\screenshotmobile.png" height="200" width="100" >| [@abhir9](https://github.com/abhir9)               |
 | login-form-v14 | <img src="login-form-v14\screenshot.PNG" width="480" > |<img src="login-form-v14\screenshotmobile.png" height="200" width="100" >| [@herkura](https://github.com/herkura)  [@nshanbhag20001412](https://github.com/nshanbhag20001412)             |
+
+| login-form-v15 | <img src="login-form-v15/Screenshot.png" width="480" > || [@shrish-sharma-git](https://github.com/shrish-sharma-git) |
+| login-form-v16 | <img src="login-form-v16/login-form-v16/screenshot.png" width="480" > || [@imtiyazMohammed](https://github.com/imtiyazMohammed) |
+| login-form-v17  |  <img src="login-form-v17/desktop_screenshot.PNG" width="480" >  | <img src="login-form-v17/mobile_screenshot.PNG" height="200" width="100" > |   [@satyam73](https://github.com/satyam73)               |
+
+| login-form-v25 | <img src="https://raw.githubusercontent.com/LoginRadius/awesome-login-pages/main/login-form-v25/login-form-v25/Screenshot.png" width="480" >   |<img src="login-form-v25\login-form-v25\Screenshot_mobile.png" height="200" width="100" > || [@Shrijan21] (https://github.com/Shrijan21) ||
+
+| login-form-18  | <img src="login-form-18/Screenshot_1.png" width="480" >   | <img src="login-form-18\Screenshot_2.png" height="200" width="100" > || [@highflyer910](https://github.com/highflyer910) 
+
+
 | login-form-v15 | <img src="login-form-v15/Screenshot.png" width="480" > |<img src="login-form-v15/MobileScreenshot.png" height="200" width="100" >| [@shrish-sharma-git](https://github.com/shrish-sharma-git) |
 | login-form-v16 | <img src="login-form-v16/login-form-v16/screenshot.png" width="480" > |<img src="login-form-v16/login-form-v16/MobileScreenshot.png" height="200" width="100" >| [@imtiyazMohammed](https://github.com/imtiyazMohammed) |
 | login-form-v17 | <img src="login-form-v17/desktop_screenshot.PNG" width="480" >  | <img src="login-form-v17/mobile_screenshot.PNG" height="200" width="100" > |   [@satyam73](https://github.com/satyam73)               |
@@ -61,11 +71,16 @@ A Project which includes curated list of different login page web pages.
 | login-form-v20 | <img src="login-form-v20/login-form-v20-web.png" width="480" > | <img src="login-form-v20\login-form-v20-mobile.png" height="200" width="100" >| [@soumyajit4419](https://github.com/soumyajit4419) |
 | login-form-v21 | <img src="login-form-v21/desktop_screenshot.png" width="480" >    | <img src="login-form-v21/mobile_screenshot.png" height="200" width="100" >   |  [@subham5230](https://github.com/subham5230) |
 | login-form-v22  |  <img src="login-form-v22\login-form-v22\desktop-view.png" width="480" >  | <img src="login-form-v22\login-form-v22\mobile-view.png" height="200" width="100" > |   [@noviicee](https://github.com/noviicee)               |
+v25
+
+
+
 | login-form-v23  |  <img src="login-form-v23\screenshot.png" width="480" >  | <img src="login-form-v23\mobile-view.png" height="200" width="100" > |   [@shutterberg](https://github.com/shutterberg)               |
 | login-form-v27  |  <img src="login-form-v27/screenshot desktop.JPG" width="480" >  | <img src="login-form-v27/screenshot mobile.JPG" height="200" width="100" >| [@abhinav-193](https://github.com/abhinav-193) |
 | login-form-v31 | <img src="login-form-v31\screenshots\Screenshot-desktop.png" width="480" > | <img src="login-form-v31\screenshots\Screenshot-mobile.png" height="200" width="100" > | [@Sanket-Mathur](https://github.com/Sanket-Mathur)
 | login-form-v32 | <img src="login-form-v32\Screenshots\screenshot-desktop.png" width="480" >   | <img src="login-form-v32\Screenshots\screenshot-mobile.png" height="200" width="100" > | [@Bipul-Harsh](https://github.com/Bipul-Harsh) 
 | login-form-v33 | <img src="login-form-v33\screenshot.PNG" width="480" >   | <img src="login-form-v33\screenshot-mobile.PNG" height="200" width="100" > | [@vershagupta](https://github.com/vershagupta) 
+
 ## CONTRIBUTION
 
 - For contribution please check [contribution guideline](https://github.com/LoginRadius/awesome-login-pages/blob/main/CONTRIBUTING.md)

login-form-v25/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <section class="login">
+        <div class="container">
+          <h3 class="title">Sign in with</h3>
+
+          <div class="social-login">
+
+            <button><i class="fab fa-twitter"></i>Twitter</button>
+            <button><i class="fab fa-google"></i>Google</button>
+
+          </div>
+
+          <p class="separator"><span>&nbsp;</span>Or<span>&nbsp;</span></p>
+
+          <form>
+            <div class="form-group">
+              <label for="username">Username</label>
+              <input type="text" id="username" placeholder="Username">          
+            </div>
+
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input type="password" id="password" placeholder="Password">          
+            </div>
+
+            <button type="submit">Sign in</button>
+          </form>
+
+          <p class="additional-act">Don't have an account? <span>Register</span></p>
+
+
+        </div>
+      </section>
+
+</html>
+
+<!-- By Shrijan Singh (@Shrijan21) -->

login-form-v25/index.js

@@ -0,0 +1,13 @@
+const pass_field = document.querySelector('.pass-key');
+const showBtn = document.querySelector('.show');
+showBtn.addEventListener('click', function(){
+ if(pass_field.type === "password"){
+   pass_field.type = "text";
+   showBtn.textContent = "HIDE";
+   showBtn.style.color = "#3498db";
+ }else{
+   pass_field.type = "password";
+   showBtn.textContent = "SHOW";
+   showBtn.style.color = "#222";
+ }
+});

login-form-v25/style.css

@@ -0,0 +1,146 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap");
+::placeholder {
+  color: #ddd;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: #ddd;
+  font-family: "Montserrat", sans-serif;
+}
+
+input,
+button {
+  display: inline-block;
+  width: 100%;
+  height: 3.23rem;
+  border: none;
+  outline: none;
+  border-radius: 100px;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.login {
+  min-height: 100vh;
+  width: 100%;
+  background: url("https://raw.githubusercontent.com/mariofornaroli/y-responsive-login-page/main/images/bk.png"), #023262;
+  background-size: cover;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.login .container {
+  position: relative;
+  width: 90%;
+  max-width: 420px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.login .title {
+  font-size: 1.8rem;
+  letter-spacing: 1px;
+  margin-bottom: 1.5rem;
+}
+.login .social-login {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.login .social-login button {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 10rem;
+  margin: 0.75rem;
+  padding: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  cursor: pointer;
+  transition: background 0.3s ease-in;
+}
+.login .social-login button:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.login .social-login button i {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  background-color: #fff;
+  border-radius: 50%;
+  font-size: 1.4rem;
+  padding-left: 2px;
+  text-align: center;
+  margin-right: 0.25rem;
+}
+.login .social-login button i.fa-twitter {
+  color: #00acee;
+}
+.login .social-login button i.fa-google {
+  color: #ff3e30;
+}
+.login .separator {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login .separator span {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  margin: 1.5rem;
+}
+
+form {
+  width: 100%;
+}
+form .form-group {
+  margin-bottom: 1.5rem;
+}
+form .form-group label {
+  display: block;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.5rem;
+  padding-left: 1.5rem;
+  color: dark-blue;
+}
+form .form-group input {
+  letter-spacing: 0.5px;
+  font-size: 1.1rem;
+  padding: 0 1.5rem;
+}
+
+button[type=submit] {
+  background: #ecbb08;
+  color: #023262;
+  font-size: 1.3rem;
+  font-weight: bold;
+  letter-spacing: 1px;
+  cursor: pointer;
+  margin: 1rem 0;
+  transition: all 0.3s linear;
+}
+button[type=submit]:hover {
+  background: #ffc800;
+  opacity: 0.8;
+}
+
+.additional-act {
+  width: 100%;
+  text-align: center;
+  letter-spacing: 0.7px;
+  margin: 0.5rem 0;
+}
+.additional-act span {
+  color: #ecbb08;
+  cursor: pointer;
+}