Medical Information
| S.No. | Name Of Hospital | Specialist | Address | Contact Person | |
|---|---|---|---|---|---|
| Name | Phone Number | ||||
| 1 | Blood Bank Information | Dehradun | Some Address | Atul | 1234567890 |
| 2 | XYZ | Dehradun | Another Address | Jay | 0987654321 |
| S.No. | Name Of Blood Bank | Address |
|---|---|---|
| 1 | Blood Bank Information | Dehradun |
| 2 | XYZ | Dehradun |
/* MEDICAL TAB STYLES */
/* Layout */
.medical-tabs-container {
display: flex;
min-height: 500px;
font-family: Arial, sans-serif;
}
/* Sidebar */
.medical-tabs-sidebar {
width: 250px;
background: #f5f9ff;
border-right: 1px solid #ccc;
}
.medical-tabs-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.medical-tabs-sidebar label {
display: block;
padding: 12px;
cursor: pointer;
}
.medical-tabs-sidebar label:hover {
background: #e8f0ff;
}
/* Hide radios */
input[name="tabs-medical"] {
display: none;
}
/* Active state */
#tab-imp-forms:checked ~ .medical-tabs-sidebar label[for="tab-imp-forms"],
#tab-psign:checked ~ .medical-tabs-sidebar label[for="tab-psign"],
#tab-imp-orders:checked ~ .medical-tabs-sidebar label[for="tab-imp-orders"] {
background: #005f7d;
color: #fff;
font-weight: bold;
border-radius: 4px 0 0 4px;
}
/* Content */
.medical-tabs-content {
flex: 1;
padding: 20px;
text-align: center;
}
.tab-pane {
display: none;
}
#tab-imp-forms:checked ~ .medical-tabs-content #imp_form,
#tab-psign:checked ~ .medical-tabs-content #psign,
#tab-imp-orders:checked ~ .medical-tabs-content #imp_orders {
display: block;
}
.tab-pane h2 {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 30px;
}
Important Forms
Content for Important Forms goes here...
Authorised Person to Sign Authorised form
Content for Authorised Person to Sign Authorised form goes here...
Important Orders
Content for Important Orders goes here...
/* Layout */
.tabs-container {
display: flex;
min-height: 500px;
font-family: Arial, sans-serif;
}
/* Sidebar */
.tabs-sidebar {
width: 250px;
background: #f5f9ff;
border-right: 1px solid #ccc;
}
.tabs-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-sidebar label {
display: block; /* makes whole row clickable */
padding: 12px;
cursor: pointer;
}
.tabs-sidebar label:hover {
background: #e8f0ff;
}
/* Hide radios */
input[type="radio"] {
display: none;
}
/* Active state */
#tab-photos:checked ~ .tabs-sidebar label[for="tab-photos"],
#tab-videos:checked ~ .tabs-sidebar label[for="tab-videos"],
#tab-events:checked ~ .tabs-sidebar label[for="tab-events"],
#tab-labs:checked ~ .tabs-sidebar label[for="tab-labs"] {
background: #005f7d;
color: #fff;
font-weight: bold;
border-radius: 4px 0 0 4px;
}
/* Content */
.tabs-content {
flex: 1;
padding: 20px;
text-align: center;
}
.tab-pane {
display: none;
}
#tab-photos:checked ~ .tabs-content #photos,
#tab-videos:checked ~ .tabs-content #videos,
#tab-events:checked ~ .tabs-content #events,
#tab-labs:checked ~ .tabs-content #labs {
display: block;
}
.tab-pane h2 {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 30px;
}
/* Grid cards */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.card img {
width: 100%;
display: block;
}
.card div {
background: #444;
color: #fff;
padding: 10px;
}
Photo Gallery
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Tutorial Videos
Video 1
Video 2
Video 3
Upcoming Events
Event 1
Event 2
Event 3
Labs & Medical Stores
Lab 1
Medical Store 1