|
Server : LiteSpeed System : Linux terra.hostitbro.com 5.14.0-611.54.3.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Thu May 7 16:31:24 EDT 2026 x86_64 User : outerorb ( 1091) PHP Version : 8.1.34 Disable Function : mail Directory : /home6/outerorb/dev.outerorbittech.com/new/ | |
|
Path: //home6/outerorb/dev.outerorbittech.com/new/management.php
Size: 11.52 KB
Permissions: 0644
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Index Page | Leading BPO Company in India</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
<?php include 'headerlink.php'; ?>
<?php include 'header.php'; ?>
<?php include 'menu.php'; ?>
<link rel="icon" href="designer/images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fancybox.min.css" rel="stylesheet">
<link href="css/themes.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-min.js"></script>
<script>
setTimeout(function(){
$.getScript("https://www.google.com/recaptcha/api.js")
}, 100);
</script>
<!-about us section link--->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">-->
<style>
:root{
--primary: #14176c;
--accent: #0aa5d1;
--muted: #f6f8fb;
--card-radius: 12px;
--shadow: 0 6px 20px rgba(20,23,108,0.12);
}
body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial; background: #fff; color: #222; }
/* Card base */
.team-card {
background: linear-gradient(180deg, #ffffff 0%, var(--muted) 100%);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform .28s ease, box-shadow .28s ease;
display: flex;
flex-direction: column;
min-height: 100%;
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,23,108,0.14); }
/* top image area */
.card-media {
height: 150px;
position: relative;
background: linear-gradient(90deg, rgba(20,23,108,0.06), rgba(10,165,209,0.04));
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* avatar overlapping */
.avatar {
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
border: 3px solid #fff;
box-shadow: 0 6px 18px rgba(10,165,209,0.08);
position: absolute;
left: 18px;
bottom: -36px;
background: #fff;
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* body */
.card-body-custom {
padding: 48px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
}
.person-name { font-weight:700; font-size:1.05rem; color:var(--primary); margin:0; }
.person-role { font-size:.9rem; color: rgba(20,23,108,0.75); margin:0; }
.person-desc { font-size:.95rem; color:#333; line-height:1.35; margin-top:6px; flex: 1 1 auto;
display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.card-footer-custom {
display:flex; align-items:center; gap:.6rem; padding-top:.6rem; border-top:1px solid rgba(20,23,108,0.04);
}
.btn-view {
margin-left:auto; padding:.45rem .9rem; border-radius:10px; border:0;
background: linear-gradient(90deg, var(--primary), var(--accent)); color: #fff; font-weight:600;
}
/* make sure bootstrap column height matches card height */
.card-col { display: flex; align-items: stretch; }
/* responsive tweaks */
@media (max-width: 576px) {
.card-media { height: 130px; }
.avatar { width: 60px; height: 60px; bottom: -30px; left: 14px; }
.card-body-custom { padding-top: 42px; }
}
</style>
</head>
<body>
<!-- banner / hero (your image) -->
<img src="img/management_team.2.jpg" alt="About Us Image" width="100%">
<div class="container py-4">
<h3 class="text-center mb-3" style="color:var(--primary);">Management Team</h3>
<p class="text-center text-muted mb-4">Our leadership team — click view more to read details.</p>
<div class="row gy-4">
<!-- Card 1 -->
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/3rpmc3x/user-grey.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Amit Sharma</h4>
<p class="person-role mb-0">Senior Developer</p>
</div>
<p class="person-desc">Experienced full-stack developer focused on building scalable web applications. Loves clean UI and well-tested code.</p>
<div class="card-footer-custom">
<small class="text-muted">Based in Ranchi</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/HxvPxkG/user-blue-dark.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Riya Patel</h4>
<p class="person-role mb-0">UI/UX Designer</p>
</div>
<p class="person-desc">Designs clean, user-first interfaces. Passionate about accessibility and responsive patterns that perform well on mobile and desktop.</p>
<div class="card-footer-custom">
<small class="text-muted">UI Team</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/cXYY4Zp/avatar-circle-grey.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Manoj Kumar</h4>
<p class="person-role mb-0">Project Manager</p>
</div>
<p class="person-desc">Leads cross-functional teams and keeps delivery on schedule. Strong background in Agile and client communication.</p>
<div class="card-footer-custom">
<small class="text-muted">Operations</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/3rpmc3x/user-grey.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Amit Sharma</h4>
<p class="person-role mb-0">Senior Developer</p>
</div>
<p class="person-desc">Experienced full-stack developer focused on building scalable web applications. Loves clean UI and well-tested code.</p>
<div class="card-footer-custom">
<small class="text-muted">Based in Ranchi</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/3rpmc3x/user-grey.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Anil Sharma</h4>
<p class="person-role mb-0">Senior Developer</p>
</div>
<p class="person-desc">Experienced full-stack developer focused on building scalable web applications. Loves clean UI and well-tested code.</p>
<div class="card-footer-custom">
<small class="text-muted">Based in Ranchi</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 card-col">
<div class="team-card w-100 h-100">
<div class="card-media">
<img src="https://via.placeholder.com/800x400.png?text=Profile+Image" alt="cover">
<div class="avatar">
<img src="https://i.ibb.co/3rpmc3x/user-grey.png" alt="avatar">
</div>
</div>
<div class="card-body-custom">
<div>
<h4 class="person-name">Rohit Kumar</h4>
<p class="person-role mb-0">Senior Developer</p>
</div>
<p class="person-desc">Experienced full-stack developer focused on building scalable web applications. Loves clean UI and well-tested code.</p>
<div class="card-footer-custom">
<small class="text-muted">Based in Ranchi</small>
<button class="btn btn-view" onclick="location.href='#'">View more</button>
</div>
</div>
</div>
</div>
<!-- add more col-md-4 blocks as needed -->
</div>
</div>
<?php include 'footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<!-- Local JS -->
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/jquery-fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js"></script>
<script src="js/themes.js"></script>
<!-- JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>