Template:PersonPage
More actions
<style> /* Reset & Base */ .gbi-container * {
box-sizing: border-box; margin: 0; padding: 0;
}
/* Banner Section */ .gbi-profile-banner {
width: 100%; height: 320px; object-fit: cover; display: block; border-radius: 0;
}
/* Profile Header */ .gbi-profile-header {
position: relative; margin-top: -80px; padding: 0 40px 30px; background: linear-gradient(to bottom, transparent 0%, #ffffff 40%);
}
.gbi-profile-photo {
width: 160px; height: 160px; border-radius: 50%; border: 5px solid #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); object-fit: cover; display: block; margin: 0 auto;
}
.gbi-name {
font-size: 32px; font-weight: 700; color: #1a1a1a; text-align: center; margin-top: 16px; margin-bottom: 8px;
}
.gbi-pronoun {
font-size: 18px; font-weight: 400; color: #666; margin-left: 8px;
}
.gbi-headline {
font-size: 18px; color: #555; text-align: center; margin-top: 8px; font-weight: 400;
}
/* Tabs Navigation */ .gbi-tabs {
display: flex; justify-content: center; gap: 8px; padding: 0 40px; margin-bottom: 32px; border-bottom: 2px solid #e5e5e5; flex-wrap: wrap;
}
.gbi-tab {
padding: 12px 24px; cursor: pointer; font-size: 15px; font-weight: 500; color: #666; border-bottom: 3px solid transparent; transition: all 0.3s ease; margin-bottom: -2px;
}
.gbi-tab:hover {
color: #2563eb; background-color: #f8fafc;
}
.gbi-tab-active {
color: #2563eb; border-bottom-color: #2563eb;
}
/* Main Layout */ .gbi-layout {
display: grid; grid-template-columns: 1fr 360px; gap: 32px; padding: 0 40px 40px; max-width: 1400px; margin: 0 auto;
}
/* Left Column */ .gbi-left {
min-width: 0;
}
.gbi-section {
background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 28px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gbi-section h2 {
font-size: 22px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f1f1f1;
}
.gbi-section p, .gbi-section ul, .gbi-section div {
font-size: 15px; line-height: 1.7; color: #374151;
}
/* Intro Section */ .gbi-intro {
font-size: 16px; line-height: 1.8; color: #1f2937; margin-bottom: 24px;
}
/* Contact & Social */ .gbi-contact-grid {
display: grid; gap: 12px;
}
.gbi-contact-item {
display: flex; align-items: center; gap: 12px; padding: 12px; background: #f9fafb; border-radius: 6px; font-size: 14px;
}
.gbi-contact-label {
font-weight: 600; color: #4b5563; min-width: 80px;
}
.gbi-contact-value {
color: #1f2937;
}
.gbi-social-links {
display: flex; flex-wrap: wrap; gap: 12px;
}
.gbi-social-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #2563eb; color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; transition: background 0.3s ease;
}
.gbi-social-btn:hover {
background: #1d4ed8;
}
/* Photo Gallery */ .gbi-gallery {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;
}
.gbi-gallery img {
width: 100%; height: 200px; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease; cursor: pointer;
}
.gbi-gallery img:hover {
transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Right Column - Infobox */ .gbi-right {
position: sticky; top: 20px; height: fit-content;
}
.gbi-infobox {
background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gbi-infobox-header {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; padding: 20px; font-size: 18px; font-weight: 600; text-align: center;
}
.gbi-infobox-body {
padding: 0;
}
.gbi-infobox-row {
display: grid; grid-template-columns: 120px 1fr; padding: 16px 20px; border-bottom: 1px solid #f1f1f1; gap: 12px;
}
.gbi-infobox-row:last-child {
border-bottom: none;
}
.gbi-infobox-label {
font-weight: 600; color: #4b5563; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.gbi-infobox-value {
color: #1f2937; font-size: 14px; word-break: break-word;
}
/* Media Links */ .gbi-media-links {
display: flex; flex-direction: column; gap: 10px;
}
.gbi-media-link {
display: flex; align-items: center; gap: 10px; padding: 12px; background: #f9fafb; border-radius: 6px; text-decoration: none; color: #1f2937; transition: background 0.3s ease; font-size: 14px;
}
.gbi-media-link:hover {
background: #f3f4f6;
}
/* Achievements */ .gbi-achievement-list {
display: flex; flex-direction: column; gap: 12px;
}
.gbi-achievement-item {
padding: 16px; background: #f0f9ff; border-left: 4px solid #2563eb; border-radius: 4px;
}
.gbi-achievement-title {
font-weight: 600; color: #1e40af; margin-bottom: 4px;
}
.gbi-achievement-desc {
font-size: 14px; color: #374151;
}
/* Responsive Design */ @media (max-width: 1024px) {
.gbi-layout {
grid-template-columns: 1fr;
padding: 0 20px 40px;
}
.gbi-right {
position: static;
order: -1;
}
.gbi-profile-header {
padding: 0 20px 30px;
}
.gbi-tabs {
padding: 0 20px;
}
}
@media (max-width: 640px) {
.gbi-profile-banner {
height: 200px;
}
.gbi-profile-photo {
width: 120px;
height: 120px;
}
.gbi-name {
font-size: 24px;
}
.gbi-headline {
font-size: 16px;
}
.gbi-tabs {
gap: 4px;
}
.gbi-tab {
padding: 10px 16px;
font-size: 14px;
}
.gbi-gallery {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.gbi-infobox-row {
grid-template-columns: 1fr;
}
}
/* Tab Content Control */ .gbi-tab-content {
display: none;
}
.gbi-tab-content.active {
display: block;
} </style>
<script> // Tab functionality document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.gbi-tab');
const sections = document.querySelectorAll('.gbi-section');
tabs.forEach((tab, index) => {
tab.addEventListener('click', function() {
// Remove active class from all tabs
tabs.forEach(t => t.classList.remove('gbi-tab-active'));
// Add active class to clicked tab
this.classList.add('gbi-tab-active');
// Scroll to corresponding section
if (sections[index]) {
sections[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
}); </script>
Biography Gallery Contact Social Achievements
A brief introduction about this person goes here. This should be a concise summary highlighting key aspects of their professional background and achievements.
Biography
Full biography not added yet. This section will contain the complete professional and personal history of the individual.
Photo Gallery
No photos uploaded yet
Contact Information
Social Media
Media & Press
No media links available
Achievements & Awards
No achievements listed yet