File: /home/owzicwjp/public_html/indventureholidays.com-/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eDoc | Login Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}
/* BACKGROUND */
body{
min-height:100vh;
background:
linear-gradient(rgba(15,15,30,0.85),rgba(15,15,30,0.85)),
url('https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=1600&q=80');
background-size:cover;
background-position:center;
overflow:hidden;
color:#fff;
}
/* FLOATING SHAPES */
.shape{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.35;
animation:float 8s ease-in-out infinite;
}
.shape.one{
width:400px;height:400px;
background:#7c3aed;
top:-120px;left:-120px;
}
.shape.two{
width:450px;height:450px;
background:#2563eb;
bottom:-150px;right:-150px;
}
@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-30px);}
}
/* LAYOUT */
.wrapper{
position:relative;
z-index:2;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}
.container{
max-width:1200px;
width:100%;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
}
/* LEFT */
.left .brand{
font-size:26px;
font-weight:700;
margin-bottom:40px;
color:#a78bfa;
}
.left h1{
font-size:48px;
margin-bottom:18px;
}
.left p{
font-size:16px;
line-height:1.7;
opacity:.85;
}
/* RIGHT LOGIN CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:28px;
}
.card{
background:rgba(20,20,40,0.75);
border-radius:20px;
padding:35px 30px;
text-align:center;
backdrop-filter:blur(16px);
box-shadow:0 20px 40px rgba(0,0,0,0.4);
transition:.4s;
animation:fadeUp .8s ease forwards;
}
.card:nth-child(2){animation-delay:.15s;}
.card:nth-child(3){animation-delay:.3s;}
@keyframes fadeUp{
from{opacity:0;transform:translateY(40px);}
to{opacity:1;transform:translateY(0);}
}
.card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 30px 60px rgba(124,58,237,0.4);
}
.card h3{
font-size:20px;
margin-bottom:8px;
}
.card p{
font-size:14px;
opacity:.8;
}
/* BUTTON */
.card a{
display:inline-block;
margin-top:20px;
padding:12px 28px;
border-radius:12px;
text-decoration:none;
font-weight:600;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#2563eb);
box-shadow:0 10px 25px rgba(124,58,237,0.5);
transition:.3s;
}
.card a:hover{
box-shadow:0 15px 35px rgba(124,58,237,0.8);
transform:translateY(-2px);
}
/* FOOTER */
.footer{
position:absolute;
bottom:18px;
width:100%;
text-align:center;
font-size:13px;
opacity:.7;
}
/* MOBILE */
@media(max-width:900px){
.container{
grid-template-columns:1fr;
text-align:center;
}
.left h1{
font-size:36px;
}
}
</style>
</head>
<body>
<div class="shape one"></div>
<div class="shape two"></div>
<div class="wrapper">
<div class="container">
<!-- LEFT -->
<div class="left">
<div class="brand"></div>
<h1> Login Portal</h1>
<p>
Secure access for Admins, Employees & Users.<br>
One platform. One experience. Professional healthcare workflow.
</p>
</div>
<!-- RIGHT -->
<div class="cards">
<div class="card">
<h3>Admin Login</h3>
<a href="login.php">Login</a>
</div>
<div class="card">
<h3>Employee Login</h3>
<a href="employee/employee_login.php">Login</a>
</div>
<div class="card">
<h3>User Login</h3>
<a href="user/user_login.php">Login</a>
</div>
</div>
</div>
</div>
</body>
</html>