Toggle search
Toggle menu
11
1
158
Global Bio Index
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:PersonPage: Difference between revisions

Template page
More actions
Newer edit →
VisualWikitext
Created page with "<!-- HERO BANNER --> [[File:{{{banner|globalbanner.jpg}}}|class=gbi-profile-banner]] <div class="gbi-profile-header"> [[File:{{{image|globalimage.jpg}}}|class=gbi-profile-photo|center]] <h1 class="gbi-name"> {{{name}}} <span class="gbi-pronoun">({{{pronoun|He/Him}}})</span> </h1> <p class="gbi-headline">{{{headline|}}}</p> </div> <!-- TABS --> <div class="gbi-tabs"> <span class="gbi-tab gbi-tab-active">Bio</span> <span class="gbi-tab">Ph..."
 
No edit summary
Line 1: Line 1:
<noinclude>
<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>
</noinclude>
<!-- TEMPLATE CODE -->
<div class="gbi-container">
<!-- HERO BANNER -->
<!-- HERO BANNER -->
[[File:{{{banner|globalbanner.jpg}}}|class=gbi-profile-banner]]
[[File:{{{banner|globalbanner.jpg}}}|class=gbi-profile-banner|link=]]


<!-- PROFILE HEADER -->
<div class="gbi-profile-header">
<div class="gbi-profile-header">
    [[File:{{{image|globalimage.jpg}}}|class=gbi-profile-photo|center]]
  [[File:{{{image|globalimage.jpg}}}|class=gbi-profile-photo|link=]]
    <h1 class="gbi-name">
  <h1 class="gbi-name">
        {{{name}}} <span class="gbi-pronoun">({{{pronoun|He/Him}}})</span>
    {{{name|Person Name}}} <span class="gbi-pronoun">({{{pronoun|He/Him}}})</span>
    </h1>
  </h1>
    <p class="gbi-headline">{{{headline|}}}</p>
  <p class="gbi-headline">{{{headline|Professional Title / Tagline}}}</p>
</div>
</div>


<!-- TABS -->
<!-- TABS -->
<div class="gbi-tabs">
<div class="gbi-tabs">
    <span class="gbi-tab gbi-tab-active">Bio</span>
  <span class="gbi-tab gbi-tab-active">Biography</span>
    <span class="gbi-tab">Photos</span>
  <span class="gbi-tab">Gallery</span>
    <span class="gbi-tab">Contact</span>
  <span class="gbi-tab">Contact</span>
    <span class="gbi-tab">Social</span>
  <span class="gbi-tab">Social</span>
    <span class="gbi-tab">Achievements</span>
  <span class="gbi-tab">Achievements</span>
</div>
</div>


Line 22: Line 434:
<div class="gbi-layout">
<div class="gbi-layout">


<!-- LEFT -->
<!-- LEFT COLUMN -->
<div class="gbi-left">
<div class="gbi-left">


== Bio ==
<!-- SHORT INTRO -->
{{{bio|Biography not added yet...}}}
<div class="gbi-section">
  <div class="gbi-intro">
    {{{intro|A brief introduction about this person goes here. This should be a concise summary highlighting key aspects of their professional background and achievements.}}}
  </div>
</div>
 
<!-- BIOGRAPHY -->
<div class="gbi-section">
  <h2>Biography</h2>
  <div>
    {{{bio|Full biography not added yet. This section will contain the complete professional and personal history of the individual.}}}
  </div>
</div>
 
<!-- PHOTO GALLERY -->
<div class="gbi-section">
  <h2>Photo Gallery</h2>
  <div class="gbi-gallery">
    {{{photo_gallery|<p style="color: #9ca3af; text-align: center; padding: 40px 0;">No photos uploaded yet</p>}}}
  </div>
</div>


== Photos ==
<!-- CONTACT INFO -->
<div class="gbi-gallery">
<div class="gbi-section">
{{{photo_gallery|}}}
  <h2>Contact Information</h2>
  <div class="gbi-contact-grid">
    {{{contact|<div class="gbi-contact-item"><span class="gbi-contact-label">Email:</span><span class="gbi-contact-value">Not provided</span></div>}}}
  </div>
</div>
</div>


== Contact ==
<!-- SOCIAL MEDIA -->
{{{contact|Not Provided}}}
<div class="gbi-section">
  <h2>Social Media</h2>
  <div class="gbi-social-links">
    {{{social_links|<p style="color: #9ca3af;">No social media links added</p>}}}
  </div>
</div>


== Social ==
<!-- MEDIA LINKS -->
{{{social_links|}}}
<div class="gbi-section">
  <h2>Media & Press</h2>
  <div class="gbi-media-links">
    {{{media_links|<p style="color: #9ca3af;">No media links available</p>}}}
  </div>
</div>


== Achievements ==
<!-- ACHIEVEMENTS -->
{{{achievements|}}}
<div class="gbi-section">
  <h2>Achievements & Awards</h2>
  <div class="gbi-achievement-list">
    {{{achievements|<p style="color: #9ca3af;">No achievements listed yet</p>}}}
  </div>
</div>


</div>
</div>


<!-- RIGHT -->
<!-- RIGHT COLUMN - INFOBOX -->
<div class="gbi-right">
<div class="gbi-right">
{{Infobox_person
  <div class="gbi-infobox">
| birth_date = {{{birth_date|}}}
    <div class="gbi-infobox-header">Quick Info</div>
| nationality = {{{nationality|}}}
    <div class="gbi-infobox-body">
| occupation = {{{occupation|}}}
      <div class="gbi-infobox-row">
| industry = {{{industry|}}}
        <div class="gbi-infobox-label">Birth Date</div>
| known_for = {{{known_for|}}}
        <div class="gbi-infobox-value">{{{birth_date|Not specified}}}</div>
| website = {{{website|}}}
      </div>
}}
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Nationality</div>
        <div class="gbi-infobox-value">{{{nationality|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Occupation</div>
        <div class="gbi-infobox-value">{{{occupation|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Industry</div>
        <div class="gbi-infobox-value">{{{industry|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Known For</div>
        <div class="gbi-infobox-value">{{{known_for|Not specified}}}</div>
      </div>
      <div class="gbi-infobox-row">
        <div class="gbi-infobox-label">Website</div>
        <div class="gbi-infobox-value">{{{website|Not provided}}}</div>
      </div>
    </div>
  </div>
</div>
 
</div>
</div>


</div>
</div>

Revision as of 14:13, 25 November 2025

<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>


File:Globalbanner.jpg 

 File:Globalimage.jpg

Person Name (He/Him)

Professional Title / Tagline

 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.

No photos uploaded yet

Contact Information

Email:Not provided

Social Media

No social media links added

Media & Press

No media links available

Achievements & Awards

No achievements listed yet

Quick Info
Birth Date
Not specified
Nationality
Not specified
Occupation
Not specified
Industry
Not specified
Known For
Not specified
Website
Not provided
Retrieved from "https://globalbioindex.org/index.php?title=Template:PersonPage&oldid=15"