Takealote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Takealot</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f7f9fc, #e2e6ea);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
max-width: 500px;
width: 100%;
padding: 30px;
text-align: center;
position: relative;
}
h1 {
color: #333;
margin-bottom: 30px;
text-align: left;
}
input[type="email"], input[type="password"] {
width: calc(100% - 22px);
padding: 12px;
margin-bottom: 20px;
border: none;
border-bottom: 2px solid #ccc;
border-radius: 0;
font-size: 16px;
background: transparent;
box-sizing: border-box; /* Ensure padding is included in width */
}
.password-container {
position: relative;
margin-bottom: 20px;
}
.password-container input[type="password"] {
padding-right: 40px; /* Extra space for icon */
}
.password-container .toggle-password {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
}
.password-container .forgot-password {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 12px;
color: #6dc3e6;
text-decoration: none;
}
input[type="submit"] {
background-color: #6dc3e6;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: calc(100% - 22px);
margin-top: 30px;
}
input[type="submit"]:hover {
background-color: #5bb0d4;
}
.or-separator {
display: flex;
align-items: center;
margin: 30px 0;
}
.or-separator::before, .or-separator::after {
content: "";
flex: 1;
border-bottom: 1px solid #ddd;
}
.or-separator:not(:empty)::before {
margin-right: .25em;
}
.or-separator:not(:empty)::after {
margin-left: .25em;
}
.social-login {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.social-login a {
border: 1px solid;
border-radius: 6px;
padding: 10px;
color: #333;
text-decoration: none;
width: 48%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
}
.social-login .google {
border-color: #b4b2b2;
color: #413333;
}
.social-login .facebook {
border-color: #b0b0b1;
color: #000000;
}
.social-login i {
margin-right: 12px;
}
.create-account {
margin-top: 30px;
font-size: 14px;
}
.create-account a {
color: #07a9fa;
text-decoration: none;
}
.create-account a:hover {
text-decoration: underline;
}
.info {
margin-top: 30px;
font-size: 12px;
color: #999;
}
.info p {
margin: 5px 0;
}
.info .discount-info {
font-weight: bold;
color: #43bff5;
}
.info .verified-icon {
width: 100px;
}
@media (max-width: 600px) {
form {
width: 90%;
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<form action="/login" method="post">
<h1>Login</h1>
<input type="email" id="email" name="email" required placeholder="Email Address">
<div class="password-container">
<a href="#" class="forgot-password">Forgot Password?</a>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<input type="submit" value="Login">
<div class="or-separator">Or</div>
<div class="social-login">
<a href="#" class="google"><i class="fab fa-google"></i> Log in with Google</a>
<a href="#" class="facebook"><i class="fab fa-facebook-f"></i> Log in with Facebook</a>
</div>
<div class="create-account">
<p>New to Takealot? <a href="#">Register</a></p>
</div>
<div class="info">
<p class="discount-info">50% off delivery</p>
<p>Safe shopping at Takealot. Rest assured your transaction is safe. This technology safeguards your personal information and guarantees privacy.</p>
<!-- Replace the URL below with the correct GoDaddy icon link -->
<img src="https://www.godaddy.com/godaddy-icon.png" alt="GoDaddy Verified" class="verified-icon">
</div>
</form>
</div>
</body>
</html>