65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
<div class="login-container">
|
|
<div class="login-card-wrapper">
|
|
<div class="login-card">
|
|
<!-- Header -->
|
|
<div class="login-header">
|
|
<div class="login-icon">🔐</div>
|
|
<h2 class="login-title">Welcome Back</h2>
|
|
<p class="login-subtitle">Sign in to your account</p>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form class="login-form">
|
|
<!-- Username -->
|
|
<div class="form-group-custom">
|
|
<label for="username" class="form-label">📧 Username / Email</label>
|
|
<div class="input-wrapper">
|
|
<input type="text" id="username" class="form-input" placeholder="Enter your username or email" required>
|
|
<span class="input-icon">👤</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="form-group-custom">
|
|
<label for="password" class="form-label">🔑 Password</label>
|
|
<div class="input-wrapper">
|
|
<input type="password" id="password" class="form-input" placeholder="Enter your password" required>
|
|
<span class="input-icon">🔒</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember Me -->
|
|
<div class="form-checkbox">
|
|
<input type="checkbox" id="remember" class="checkbox-input">
|
|
<label for="remember" class="checkbox-label">Remember me</label>
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
<button routerLink="/courses" type="button" class="btn-login-submit">
|
|
🚀 Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Forgot Password Link -->
|
|
<div class="forgot-section">
|
|
<a routerLink="/forgot" class="forgot-link">Forgot your password?</a>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="divider-section">
|
|
<span>New here?</span>
|
|
</div>
|
|
|
|
<!-- Signup Link -->
|
|
<div class="signup-section-login">
|
|
<button routerLink="/signup" type="button" class="btn-signup-link">
|
|
✨ Create Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative Background Elements -->
|
|
<div class="decorative-circle circle-1"></div>
|
|
<div class="decorative-circle circle-2"></div>
|
|
</div>
|
|
</div> |