feat: login 05

DrxcoDev · Feb 11, 2024 · f0d5734 · f0d5734
1 parent ce1e959
commit f0d5734
Show file tree

Hide file tree

Showing 9 changed files with 472 additions and 0 deletions.
diff --git a/login-05/assets/apple.png b/login-05/assets/apple.png
diff --git a/login-05/assets/avatar.png b/login-05/assets/avatar.png
diff --git a/login-05/assets/background.jpg b/login-05/assets/background.jpg
diff --git a/login-05/assets/google.png b/login-05/assets/google.png
diff --git a/login-05/assets/laplace.svg b/login-05/assets/laplace.svg
diff --git a/login-05/assets/returns.png b/login-05/assets/returns.png
diff --git a/login-05/index.html b/login-05/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Login Example</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <div class="form-wrapper">
+ <main class="form-side">
+ <a href="#" title="Logo">
+ <img src="assets/laplace.svg" alt="Laplace Logo" class="logo">
+ </a>
+ <form class="my-form">
+ <div class="form-welcome-row">
+ <h1>Welcome back! &#128079;</h1>
+ <h2>Login with your account!</h2>
+ </div>
+ <div class="socials-row">
+ <a href="#" title="Use Apple">
+ <img src="assets/apple.png" alt="Apple">
+ Continue with Apple
+ </a>
+ </div>
+ <div class="socials-row">
+ <a href="#" title="Use Github">
+ <img src="assets/google.png" alt="Google">
+ Continue with Google
+ </a>
+ </div>
+ <div class="divider">
+ <div class="divider-line"></div>
+ or
+ <div class="divider-line"></div>
+ </div>
+ <div class="text-field">
+ <label for="email">Email</label>
+ <input type="email" id="email" name="email" autocomplete="off" placeholder="[email protected]"
+ required>
+ <div class="error-message">Email in incorrect format</div>
+ </div>
+ <div class="text-field">
+ <label for="password">Password</label>
+ <input id="password" type="password" name="password" placeholder="Your password" title="Minimum 6 characters at 
+ least 1 Alphabet and 1 Number"
+ pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required>
+ <div class="error-message">Minimum 6 characters at
+ least 1 Alphabet and 1 Number</div>
+ </div>
+ <button class="my-form__button" type="submit">
+ Sign In
+ </button>
+ <div class="my-form__actions">
+ <div class="my-form__row">
+ <span>Don't have an account?</span>
+ <a href="#" title="Reset Password">
+ Sign Up Now
+ </a>
+ </div>
+ </div>
+ </form>
+ </main>
+ <aside class="info-side">
+ <div class="blockquote-wrapper">
+ <img src="assets/returns.png" alt="Returns" class="returns">
+ <blockquote>
+ With Laplace, I have significantly outperformed S&P 500 in the last three
+ years.
+ </blockquote>
+ <div class="author">
+ <img src="assets/avatar.png" alt="Avatar" class="avatar">
+ <span class="author-name">@ai_trader</span>
+ </div>
+ </div>
+ </aside>
+ </div>
+</body>
+
+</html>
diff --git a/login-05/index_socials.html b/login-05/index_socials.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Login Example</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <!-- login socials -->
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <div class="form-wrapper">
+ <main class="form-side">
+ <a href="#" title="Logo">
+ <img src="assets/laplace.svg" alt="Laplace Logo" class="logo">
+ </a>
+ <form class="my-form">
+ <div class="form-welcome-row">
+ <h1>Welcome back! &#128079;</h1>
+ <h2>Login with your account!</h2>
+ </div>
+ <div class="socials-row">
+ <a href="#" title="Use Apple">
+ <img src="assets/apple.png" alt="Apple">
+ Continue with Apple
+ </a>
+ </div>
+ <div class="socials-row">
+ <a href="#" title="Use Github">
+ <img src="assets/google.png" alt="Google">
+ Continue with Google
+ </a>
+ </div>
+ <div class="divider">
+ <div class="divider-line"></div>
+ or
+ <div class="divider-line"></div>
+ </div>
+ <div class="text-field">
+ <label for="email">Email</label>
+ <input type="email" id="email" name="email" autocomplete="off" placeholder="[email protected]"
+ required>
+ <div class="error-message">Email in incorrect format</div>
+ </div>
+ <div class="text-field">
+ <label for="password">Password</label>
+ <input id="password" type="password" name="password" placeholder="Your password" title="Minimum 6 characters at 
+ least 1 Alphabet and 1 Number"
+ pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required>
+ <div class="error-message">Minimum 6 characters at
+ least 1 Alphabet and 1 Number</div>
+ </div>
+ <button class="my-form__button" type="submit">
+ Sign In
+ </button>
+ <div class="my-form__actions">
+ <div class="my-form__row">
+ <span>Don't have an account?</span>
+ <a href="#" title="Reset Password">
+ Sign Up Now
+ </a>
+ </div>
+ </div>
+ </form>
+ </main>
+ <aside class="info-side">
+ <div class="blockquote-wrapper">
+ <img src="assets/returns.png" alt="Returns" class="returns">
+ <blockquote>
+ With Laplace, I have significantly outperformed S&P 500 in the last three
+ years.
+ </blockquote>
+ <div class="author">
+ <img src="assets/avatar.png" alt="Avatar" class="avatar">
+ <span class="author-name">@ai_trader</span>
+ </div>
+ </div>
+ </aside>
+ </div>
+</body>
+
+</html>