<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- =========================================================
STEP 1 — Paste this <style> block ONCE at the top of your
faculty page (inside the page content area is fine).
Scoped under .lscr-faculty-card so it won't affect the
rest of your website.
========================================================= -->
<style type="text/css">.lscr-faculty-card {
display: flex;
align-items: stretch;
gap: 24px;
max-width: 720px;
margin: 20px auto;
padding: 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-left: 5px solid #1e3a8a; /* Change this to match LSCR brand color */
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
color: #1f2937;
box-sizing: border-box;
}
.lscr-faculty-card * { box-sizing: border-box; }
.lscr-faculty-card .lscr-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.lscr-faculty-card .lscr-info h3 {
margin: 0 0 4px 0;
font-size: 20px;
color: #1e3a8a; /* Same brand color as border */
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.lscr-faculty-card .lscr-info .lscr-designation {
font-size: 14px;
color: #64748b;
font-style: italic;
margin-bottom: 12px;
}
.lscr-faculty-card .lscr-info p {
margin: 4px 0;
font-size: 14px;
line-height: 1.5;
color: #1f2937;
}
.lscr-faculty-card .lscr-info p strong {
display: inline-block;
min-width: 110px;
color: #374151;
font-weight: 600;
}
.lscr-faculty-card .lscr-info a {
color: #1e3a8a;
text-decoration: none;
}
.lscr-faculty-card .lscr-info a:hover { text-decoration: underline; }
/* Fixed photo frame — any image will be cropped to fit uniformly */
.lscr-faculty-card .lscr-photo {
flex: 0 0 170px;
width: 170px;
height: 210px;
border: 3px solid #1e3a8a;
border-radius: 6px;
overflow: hidden;
background: #f3f4f6;
}
.lscr-faculty-card .lscr-photo img {
width: 100%;
height: 100%;
object-fit: cover; /* Fills the frame, crops overflow */
object-position: center top; /* Keeps face visible in portrait shots */
display: block;
}
/* Mobile — stack image on top, text below */
@media (max-width: 600px) {
.lscr-faculty-card {
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
.lscr-faculty-card .lscr-info p strong {
min-width: auto;
margin-right: 6px;
}
}
</style>
<!-- =========================================================
STEP 2 — Copy this whole <div class="lscr-faculty-card">
block for each faculty member and edit the 6 fields +
the image src.
========================================================= -->
<div class="lscr-faculty-card">
<div class="lscr-info">
<h3>MD MESER UDDIN</h3>
<div class="lscr-designation">Designation, Department of ICT</div>
<p><strong>Department:</strong> ICT</p>
<p><strong>Mobile:</strong> 01712503049</p>
<p><strong>Email:</strong> meseruddin81@gmail.com</p>
<p><strong>Joining Date:</strong> 01-01-2000</p>
</div>
</div>
<!-- Second card — shows how a copy looks with different data -->
<div class="lscr-faculty-card">
<div class="lscr-info">
<h3>A K M Ahasan Farid</h3>
<div class="lscr-designation">Lecturer, Department of ICT</div>
<p><strong>Department:</strong> ICT</p>
<p><strong>Mobile:</strong> <a href="tel:+8801401301014">01401301014</a></p>
<p><strong>Email:</strong> <a href="mailto:rumon.s2134@gmail.com">rumon.s2134@gmail.com</a></p>
<p><strong>Joining Date:</strong> 22-07-2022</p>
</div>
<div class="lscr-photo"><img alt="Faculty Name" src="https://placehold.co/170x210/e5e7eb/64748b?text=Photo" /><img alt="A K M Ahasan Farid" src="https://lscr.edu.bd/uploads/gallery_1784783166.png" /></div>
</div>
<!-- Third card — shows how a copy looks with different data -->
<div class="lscr-faculty-card">
<div class="lscr-info">
<h3>MD KAMRUL HASAN</h3>
<div class="lscr-designation">Demonestrator, Department of ICT</div>
<p><strong>Department:</strong> ICT</p>
<p><strong>Mobile:</strong> 01744790550</p>
<p><strong>Email:</strong> <a href="mailto:rumon.s2134@gmail.com">rumon.s2134@gmail.com</a></p>
<p><strong>Joining Date:</strong> 01-01-2026</p>
</div>
<div class="lscr-photo"><img alt="Faculty Name" src="https://placehold.co/170x210/e5e7eb/64748b?text=Photo" /><img alt="A K M Ahasan Farid" src="https://lscr.edu.bd/uploads/gallery_1784783166.png" /></div>
</div>
<!-- fourth card — shows how a copy looks with different data -->
<div class="lscr-faculty-card">
<div class="lscr-info">
<h3>RANAJIR SARKER</h3>
<div class="lscr-designation">Demonestrator, Department of ICT</div>
<p><strong>Department:</strong> ICT</p>
<p><strong>Mobile:</strong> 01723818282</p>
<p><strong>Email:</strong> <a href="mailto:rumon.s2134@gmail.com">r</a><span aria-haspopup="dialog" class="qu yKyxu" data-hovercard-hover-trigger-disabled="true" data-hovercard-id="tomc2266@gmail.com" role="gridcell" tabindex="-1" translate="no"><span class="go ">tomc2266@gmail.com</span></span></p>
<p><strong>Joining Date:</strong> 01-01-2000</p>
</div>
<div class="lscr-photo"><img alt="Faculty Name" src="https://placehold.co/170x210/e5e7eb/64748b?text=Photo" /><img alt="A K M Ahasan Farid" src="https://lscr.edu.bd/uploads/gallery_1784783166.png" /></div>
</div>