<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SocialHub Login</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}
body{
background:#fafafa;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.container{
display:flex;
gap:60px;
align-items:center;
max-width:1100px;
width:100%;
padding:20px;
}
.left{
flex:1;
text-align:center;
}
.left img{
width:100%;
max-width:450px;
border-radius:20px;
}
.right{
flex:1;
display:flex;
justify-content:center;
}
.card{
background:#fff;
padding:40px;
width:380px;
border-radius:20px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
}
.logo{
font-size:42px;
font-weight:700;
margin-bottom:35px;
text-align:center;
color:#4f46e5;
}
input{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:10px;
outline:none;
font-size:15px;
}
input:focus{
border-color:#4f46e5;
}
button{
width:100%;
padding:14px;
background:#4f46e5;
color:white;
border:none;
border-radius:10px;
font-size:16px;
cursor:pointer;
transition:.3s;
}
button:hover{
background:#4338ca;
}
.or{
text-align:center;
margin:25px 0;
color:#888;
}
.bottom{
text-align:center;
margin-top:25px;
}
.bottom a{
text-decoration:none;
color:#4f46e5;
font-weight:600;
}
@media(max-width:900px){
.container{
flex-direction:column;
}
.left{
display:none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800" alt="Preview">
</div>
<div class="right">
<div class="card">
<div class="logo">SocialHub</div>
<input type="text" placeholder="Email or Username">
<input type="password" placeholder="Password">
<button>Log In</button>
<div class="or">OR</div>
<div style="text-align:center;">
<a href="#">Forgot Password?</a>
</div>
<div class="bottom">
Don't have an account?
<a href="#">Sign Up</a>
</div>
</div>
</div>
</div>
</body>
</html>