155 lines
7.8 KiB
HTML
155 lines
7.8 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login Page</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
|
<section class="login-section">
|
|
<div class="login-container">
|
|
<div class="login-promo-panel">
|
|
<h2>Login</h2>
|
|
<p>Get access to your Orders, Wishlist and Recommendations</p>
|
|
<div class="promo-graphic-placeholder">
|
|
<!-- Placeholder for a marketing image or graphic -->
|
|
</div>
|
|
</div>
|
|
<div class="login-form-panel">
|
|
<form class="login-form">
|
|
<div class="input-group">
|
|
<input type="text" id="emailOrPhone" placeholder="Enter Email/Mobile number" required="" aria-label="Enter Email or Mobile number">
|
|
<hr class="input-underline">
|
|
</div>
|
|
<div class="input-group password-group">
|
|
<input type="password" id="password" placeholder="Enter Password" required="" aria-label="Enter Password">
|
|
<a href="#" class="forgot-password-link">Forgot?</a>
|
|
<hr class="input-underline">
|
|
</div>
|
|
<p class="terms-policy-text">By continuing, you agree to Flipkart's <a href="#" class="link">Terms of Use</a> and <a href="#" class="link">Privacy Policy</a>.</p>
|
|
<button type="submit" class="login-button">Login</button>
|
|
<div class="or-separator">OR</div>
|
|
<button type="button" class="otp-button">Request OTP</button>
|
|
</form>
|
|
<div class="create-account-wrapper">
|
|
<a href="#" class="create-account-link">New to Flipkart? Create an account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="social-login-options">
|
|
<h2 class="social-login-heading">Or log in with</h2>
|
|
<div class="social-login-buttons">
|
|
<a href="#" class="social-button social-button-google" aria-label="Login with Google">
|
|
<span class="social-icon">Google Icon Placeholder</span>
|
|
<span class="social-text">Google</span>
|
|
</a>
|
|
<a href="#" class="social-button social-button-facebook" aria-label="Login with Facebook">
|
|
<span class="social-icon">Facebook Icon Placeholder</span>
|
|
<span class="social-text">Facebook</span>
|
|
</a>
|
|
<a href="#" class="social-button social-button-apple" aria-label="Login with Apple">
|
|
<span class="social-icon">Apple Icon Placeholder</span>
|
|
<span class="social-text">Apple</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Forgot Password</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="forgot-password-container">
|
|
<h2>Forgot Password?</h2>
|
|
<p>Enter the email address associated with your account, and we'll send you a link to reset your password.</p>
|
|
|
|
<form action="#" method="POST">
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="">
|
|
</div>
|
|
<button type="submit" class="submit-button">Send Reset Link</button>
|
|
</form>
|
|
|
|
<div class="back-to-login">
|
|
<a href="#">Back to Login</a>
|
|
</div>
|
|
</section>
|
|
<section class="login-benefits-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Benefits of Logging In</h2>
|
|
<div class="benefits-grid">
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">🛒</span>
|
|
</div>
|
|
<h3 class="benefit-title">Faster Checkout</h3>
|
|
<p class="benefit-description">Save your details and speed through purchases with pre-filled forms.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">🌟</span>
|
|
</div>
|
|
<h3 class="benefit-title">Personalized Experience</h3>
|
|
<p class="benefit-description">Get tailored recommendations based on your preferences and browsing history.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">📦</span>
|
|
</div>
|
|
<h3 class="benefit-title">Easy Order Tracking</h3>
|
|
<p class="benefit-description">View your order history, track shipments, and manage returns effortlessly.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">🏷️</span>
|
|
</div>
|
|
<h3 class="benefit-title">Exclusive Offers</h3>
|
|
<p class="benefit-description">Access members-only discounts, special promotions, and early sale access.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">❤️</span>
|
|
</div>
|
|
<h3 class="benefit-title">Wishlist & Favorites</h3>
|
|
<p class="benefit-description">Save items for later, create wishlists, and easily revisit products you love.</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<div class="benefit-icon">
|
|
<span class="icon-placeholder">🔔</span>
|
|
</div>
|
|
<h3 class="benefit-title">Notifications & Alerts</h3>
|
|
<p class="benefit-description">Receive updates on price drops, stock availability, and new arrivals.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="signup-prompt">
|
|
<div class="signup-prompt-container">
|
|
<div class="signup-prompt-text-content">
|
|
<h2 class="signup-prompt-heading">Unlock a World of Opportunities</h2>
|
|
<p class="signup-prompt-description">Sign up today to access exclusive deals, personalize your experience, and enjoy a seamless journey.</p>
|
|
<ul class="signup-prompt-features">
|
|
<li>Exclusive Member Discounts</li>
|
|
<li>Personalized Product Recommendations</li>
|
|
<li>Faster & Secure Checkout</li>
|
|
</ul>
|
|
<a href="#signup" class="signup-prompt-cta-button">Create Your Free Account</a>
|
|
</div>
|
|
<div class="signup-prompt-image-area">
|
|
<img src="path/to/placeholder-illustration.png" alt="Illustration of a person happily shopping online with various products.">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |