ജീവനക്കാർ

<style>

.bgp-title{
   background:linear-gradient(135deg,#0066cc,#003c8f);
   color:white;
   text-align:center;
   padding:18px;
   border-radius:15px;
   font-size:30px;
   font-weight:bold;
   margin:20px 0;
   box-shadow:0 5px 15px #999;
}

.bgp-container{
   display:flex;
   flex-wrap:wrap;
   gap:20px;
   justify-content:center;
}

.bgp-card{
   width:23%;
   min-width:260px;
   background:#fff;
   border-radius:18px;
   overflow:hidden;
   box-shadow:0 4px 15px rgba(0,0,0,.2);
   transition:.3s;
}

.bgp-card:hover{
   transform:translateY(-6px);
}

.bgp-head{
   color:#fff;
   padding:14px;
   text-align:center;
   font-size:22px;
   font-weight:bold;
}

.secretary{
   background:#0d47a1;
}

.assistant{
   background:#198754;
}

.clerk{
   background:#d35400;
}

.account{
   background:#7b1fa2;
}


.bgp-photo{
   width:120px;
   height:120px;
   border-radius:50%;
   object-fit:cover;
   display:block;
   margin:20px auto;
   border:5px solid white;
   box-shadow:0 3px 10px #777;
}


.bgp-name{
   text-align:center;
   font-size:22px;
   font-weight:bold;
   color:#333;
   margin-bottom:15px;
}


.bgp-info{
   background:#f5f7fa;
   margin:10px;
   padding:12px;
   border-radius:10px;
   border-left:5px solid #0066cc;
}


.bgp-label{
   color:#0066cc;
   font-weight:bold;
}


.bgp-phone{
   color:#008000;
   font-weight:bold;
}


@media(max-width:900px){

.bgp-card{
width:45%;
}

}

@media(max-width:600px){

.bgp-card{
width:95%;
}

}

</style>


<div class="bgp-title">
ബുധനൂർ ഗ്രാമപഞ്ചായത്ത് ജീവനക്കാർ
</div>


<div class="bgp-container">


<!-- സെക്രട്ടറി -->

<div class="bgp-card">

<div class="bgp-head secretary">
സെക്രട്ടറി
</div>

<img src="secretary.jpg" class="bgp-photo">

<div class="bgp-name">
ജീവനക്കാരന്റെ പേര്
</div>


<div class="bgp-info">
<div class="bgp-label">പദവി</div>
SECRETARY
</div>


<div class="bgp-info">
<div class="bgp-label">ചുമതല</div>
ഓഫീസ് മേധാവി
</div>


<div class="bgp-info">
<div class="bgp-label">ഫോൺ നമ്പർ</div>
<div class="bgp-phone">
0000000000
</div>
</div>


</div>

 

<!-- അസിസ്റ്റന്റ് സെക്രട്ടറി -->

<div class="bgp-card">

<div class="bgp-head assistant">
അസിസ്റ്റന്റ് സെക്രട്ടറി
</div>

<img src="assistant.jpg" class="bgp-photo">

<div class="bgp-name">
ജീവനക്കാരന്റെ പേര്
</div>


<div class="bgp-info">
<div class="bgp-label">പദവി</div>
ASSISTANT SECRETARY
</div>


<div class="bgp-info">
<div class="bgp-label">ചുമതല</div>
ഭരണ വിഭാഗം
</div>


<div class="bgp-info">
<div class="bgp-label">ഫോൺ നമ്പർ</div>

<div class="bgp-phone">
0000000000
</div>

</div>

</div>

 


<!-- ഹെഡ് ക്ലാർക്ക് -->

<div class="bgp-card">

<div class="bgp-head clerk">
ഹെഡ് ക്ലാർക്ക്
</div>


<img src="clerk.jpg" class="bgp-photo">


<div class="bgp-name">
ജീവനക്കാരന്റെ പേര്
</div>


<div class="bgp-info">
<div class="bgp-label">പദവി</div>
HEAD CLERK
</div>


<div class="bgp-info">
<div class="bgp-label">ചുമതല</div>
റവന്യൂ വിഭാഗം
</div>


<div class="bgp-info">
<div class="bgp-label">ഫോൺ നമ്പർ</div>

<div class="bgp-phone">
0000000000
</div>

</div>

</div>

 

 

<!-- അക്കൗണ്ടന്റ് -->

<div class="bgp-card">


<div class="bgp-head account">
അക്കൗണ്ടന്റ്
</div>


<img src="accountant.jpg" class="bgp-photo">


<div class="bgp-name">
ജീവനക്കാരന്റെ പേര്
</div>


<div class="bgp-info">
<div class="bgp-label">പദവി</div>
ACCOUNTANT
</div>


<div class="bgp-info">
<div class="bgp-label">ചുമതല</div>
അക്കൗണ്ട്സ് വിഭാഗം
</div>


<div class="bgp-info">

<div class="bgp-label">ഫോൺ നമ്പർ</div>

<div class="bgp-phone">
0000000000
</div>

</div>


</div>


</div>