mukeshs/4basecare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mukeshs
2026-05-22 23:00:15 +05:30
parent a146754741
commit dccfaf3c61
1 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
index.html Normal file
View File

@ -0,0 +1,608 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4baseCare - Festival of Genomics</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display:ital@₀;1&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'DM Sans', sans-serif;
-webkit-font-smoothing: antialiased;
background: #dde3ec;
padding: 24px 0 40px;
}
.email-shell {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.bg-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #c8dcee;
}
.bg-cover-layer {
position: absolute;
top: 0; left: 0; right: 0;
height: 25%;
background: url('BG-Cover.svg') top center / cover no-repeat;
z-index: 0;
}
/* ── HEADER ── */
.header {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 26px 140px; /* increased to 80px bottom */
}
.logo-wrap img { height: 30px; width: auto; display: block; }
.header-date {
font-size: 12px; font-weight: 500;
color: #fff; letter-spacing: 0.04em; opacity: 0.9;
}
/* ── STATS STRIP ── */
.stats-strip {
position: relative; z-index: 10;
display: flex; justify-content: center;
padding: 0 22px;
gap: 10px;
margin-top: -60px; /* pull up into the 80px header space */
margin-bottom: -30px; /* push down into white card */
}
.stat-card {
flex: 1;
background: #fff;
border-radius: 8px;
margin: 0;
padding: 14px 8px 0px;
text-align: center;
box-shadow: 0 4px 18px rgba(20,60,120,0.10);
border: 1px solid rgba(200,220,240,0.6);
overflow: hidden;
}
.stat-number {
font-family: 'DM Serif Display', serif;
font-size: 28px; line-height: 1; margin-bottom: 5px;
font-weight: 400;
}
.stat-card:nth-child(1) .stat-number { color: #1a3a8f; }
.stat-card:nth-child(2) .stat-number { color: #0faabd; }
.stat-card:nth-child(3) .stat-number { color: #9b5de5; }
.stat-label {
font-size: 9px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: #8aa4c0;
display: block;
padding: 5px 0 0;
margin-bottom: 0;
}
.stat-underline {
height: 3px;
width: 100%;
margin-top: 10px;
border-radius: 0;
}
.stat-card:nth-child(1) .stat-underline { background: #1a3a8f; }
.stat-card:nth-child(2) .stat-underline { background: #0faabd; }
.stat-card:nth-child(3) .stat-underline { background: #9b5de5; }
/* ── MAIN WHITE CARD ── */
.main-card {
position: relative; z-index: 5;
background: #fff;
border-radius: 6px;
margin: 10px 13px 20px;
overflow: hidden;
box-shadow: 0 10px 44px rgba(15,50,100,0.13);
}
/* ── 1. Card Cover ── */
.card-cover {
background: url('Section1-BG.svg') center center / cover no-repeat;
padding: 44px 28px 20px;
margin-top: 24px;
}
.card-cover-eyebrow {
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: #2a8fc4; margin-bottom: 7px;
}
.card-cover h1 {
font-family: 'Archivo', sans-serif;
font-size: 24px;
color: #0b2642;
line-height: 1.25;
margin-bottom: 12px;
font-weight: 400;
max-width: 80%;
}
.card-cover h1 .blue { color: #1a8ab5; }
.backed-row {
display: flex; align-items: center; gap: 8px;
}
.backed-row .lbl {
font-size: 8.5px; font-weight: 700;
letter-spacing: 0.13em; text-transform: uppercase; color: #9ab0c8;
}
.backed-row img { height: 16px; width: auto; }
/* ── 2. Blue event banner ── */
.event-banner {
background: linear-gradient(90deg, #1050b0 0%, #1a9cbf 100%);
padding: 10px 28px;
font-size: 11.5px; font-weight: 600; color: #fff;
letter-spacing: 0.02em; text-align: center;
}
/* ── 3. Meet Me section ── */
.meet-section {
padding: 26px 28px 22px;
display: flex; gap: 20px; align-items: flex-start;
}
.meet-photo {
flex-shrink: 0; width: 128px;
border-radius: 14px; overflow: hidden;
background: #cce0ef;
box-shadow: 0 4px 16px rgba(20,80,140,0.14);
position: relative; /* add this */
}
.meet-photo img { width: 100%; display: block; }
.meet-photo-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 100%);
padding: 24px 10px 10px;
text-align: left;
}
.meet-photo-name {
font-size: 11.5px; font-weight: 700;
color: #fff; margin-bottom: 2px;
}
.meet-photo-role {
font-size: 9px; color: rgba(255,255,255,0.85);
line-height: 1.4;
}
.meet-content { flex: 1; min-width: 0; }
.fog-row {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
.meet-content h2 {
font-family: 'DM Serif Display', serif;
font-size: 19px; color: #0b2642; line-height: 1.22;
}
.meet-content h2 em { font-style: italic; color: #1a8ab5; }
.fog-logo { height: 42px; width: auto; flex-shrink: 0; margin-top: 2px; }
.meet-content p {
font-size: 12px; line-height: 1.74; color: #3d5570; margin-bottom: 12px;
}
.meet-content p strong { color: #0b2642; font-weight: 600; }
.cta-pill {
display: flex; align-items: flex-start; gap: 10px;
background: #eef6ff; border-radius: 10px; padding: 10px 13px;
}
.cta-pill p { font-size: 11.5px; line-height: 1.55; color: #2e4a66; margin: 0; }
.cta-pill p strong { color: #1050b0; }
/* ── 4. Solutions section ── */
.solutions-section {
background: url('Molecule-1.svg') right -20px center / 180px auto no-repeat;
padding-bottom: 28px;
}
.section-band {
background: linear-gradient(90deg,#1050b0,#1a9cbf);
padding: 10px 28px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: #fff; text-align: center; margin-bottom: 20px;
}
.solutions-grid { padding: 0 28px; display: flex; flex-direction: column; gap: 15px; }
.sol-item { display: flex; gap: 0; align-items: flex-start; }
.sol-line {
width: 3px;
align-self: stretch;
border-radius: 2px;
flex-shrink: 0;
margin-right: 12px;
}
.sol-line--blue { background: #1565c0; }
.sol-line--teal { background: #0faabd; }
.sol-line--purple { background: #9b5de5; }
.sol-line--green { background: #22b573; }
.sol-line--indigo { background: #3a5bd9; }
.sol-icon {
flex-shrink: 0; width: 40px; height: 40px;
border-radius: 10px; background: #deeef8;
display: flex; align-items: center; justify-content: center;
margin-right: 14px;
}
.sol-icon img { width: 22px; height: auto; }
.sol-body { flex: 1; border-left: none; padding-left: 0; }
.sol-title { font-size: 12.5px; font-weight: 700; color: #1565c0; margin-bottom: 2px; }
.sol-desc { font-size: 11px; color: #4a6880; line-height: 1.56; margin-bottom: 5px; }
.sol-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.sol-bullets span {
font-size: 10px; color: #3d5570;
display: flex; align-items: baseline; gap: 4px;
}
.sol-bullets span::before {
content: '•'; color: #1a9cbf; font-size: 13px; flex-shrink: 0;
}
/* ── 5. Goal quote ── */
.goal-section {
position: relative; padding: 30px 32px; overflow: hidden;
background: url('Molecule-2.svg') left -20px bottom / 160px auto no-repeat;
}
.goal-section::before {
content: '';
position: absolute; inset: 0;
background:
url('Molecule-2.svg') right -10px center / 200px auto no-repeat,
url('Molecule-1.svg') left -20px bottom / 160px auto no-repeat;
opacity: 0.15;
}
.goal-quote {
position: relative; z-index: 2;
font-family: 'DM Serif Display', serif;
font-size: 15.5px; font-style: italic;
line-height: 1.72; color: #1a3a5c;
text-align: center; max-width: 430px; margin: 0 auto;
}
/* ── 6. Logos row ── */
.logos-row {
background: #f5f8fd;
border-top: 1px solid #dce8f2;
border-bottom: 1px solid #dce8f2;
padding: 18px 28px;
display: flex; align-items: center;
justify-content: center; gap: 24px;
}
.logos-row img { height: 36px; width: auto; }
.logos-row .divider { width: 1px; height: 32px; background: #c4d4e4; }
.loc-label {
font-size: 8.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: #9ab0c8; text-align: center; margin-top: 4px;
}
/* ── 7. Advisory board ── */
/* ── 7. Advisory board ── */
.advisory-section {
background: url('Footer-BG.svg') center / cover no-repeat;
padding: 22px 28px 26px;
}
.advisory-eyebrow {
text-align: center;
font-size: 9px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(255,255,255,0.6); margin-bottom: 5px;
}
.advisory-badge {
text-align: center; margin-bottom: 18px;
}
.advisory-badge span {
display: inline-block;
background: rgba(255,255,255,0.14);
border-radius: 20px; padding: 4px 14px;
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.advisors-row {
display: flex; justify-content: center; gap: 14px;
}
.advisor {
text-align: center; flex: 1; max-width: 145px;
}
.advisor-pic {
width: 90px; height: 90px;
border-radius: 18px; /* rounded square */
overflow: hidden;
margin: 0 auto 10px;
background: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.advisor-pic img {
width: 100%; height: 100%;
object-fit: cover; object-position: top;
display: block;
}
.advisor-name {
font-size: 12px; font-weight: 700;
color: #fff; margin-bottom: 3px;
}
.advisor-role {
font-size: 9.5px;
color: rgba(255,255,255,0.65);
line-height: 1.4;
}
/* ── 8. Footer ── */
.footer-section {
position: relative; overflow: hidden;
}
.footer-bg-img {
position: absolute; inset: 0;
background: #ffffff;
z-index: 0;
}
.footer-content {
position: relative; z-index: 2;
padding: 22px 28px 10px;
text-align: center;
}
.footer-motto-img { width: 220px; height: auto; display: block; margin: 0 auto 16px; }
.footer-social {
display: flex; align-items: center;
justify-content: center; gap: 12px;
margin-bottom: 10px;
}
.soc-ico {
width: 28px; height: 28px;
border-radius: 50%; border: 1.5px solid #c0d0e0;
display: flex; align-items: center; justify-content: center;
background: #fff;
}
.soc-ico img { width: 12px; height: auto; }
.footer-url {
display: block; padding-bottom: 20px;
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: #8aa4c0; text-decoration: none;
}
</style>
</head>
<body>
<div class="email-shell">
<div class="bg-wrapper">
<!-- BG-Cover: top 25% -->
<div class="bg-cover-layer"></div>
<!-- HEADER -->
<div class="header">
<div class="logo-wrap">
<img src="4baseCare-Logo-White.svg" alt="4baseCare">
</div>
<div class="header-date">22nd May, 2026</div>
</div>
<!-- STATS STRIP (straddles cover / card boundary) -->
<div class="stats-strip">
<div class="stats-strip">
<div class="stat-card">
<div class="stat-number">15+</div>
<div class="stat-label">Countries</div>
<div class="stat-underline"></div>
</div>
<div class="stat-card">
<div class="stat-number">700+</div>
<div class="stat-label">Oncologists</div>
<div class="stat-underline"></div>
</div>
<div class="stat-card">
<div class="stat-number">28k+</div>
<div class="stat-label">Patients</div>
<div class="stat-underline"></div>
</div>
</div>
</div>
<!-- MAIN WHITE CARD -->
<div class="main-card">
<!-- 1. Card cover -->
<div class="card-cover">
<div class="card-cover-eyebrow">4 B A S E C A R E</div>
<h1>
Scaling the World's Largest <span class="blue">Non-Caucasian Clinico Genomic's Ecosystem</span> for Precision Oncology
</h1>
<div class="backed-row">
<span class="lbl">Backed by</span>
<img src="Infosys-illumina.svg" alt="Infosys & Illumina">
</div>
</div>
<!-- 2. Event banner -->
<div class="event-banner">
June 3–4th, 2026, Boston &nbsp;|&nbsp; Multi-modal Oncology Data for Global Impact
</div>
<!-- 3. Meet Me -->
<div class="meet-section">
<div class="meet-photo">
<img src="Image.svg" alt="Ankit Jain">
<div class="meet-photo-caption">
<div class="meet-photo-name">Ankit Jain</div>
<div class="meet-photo-role">Head of Global Translational<br>Collaborations</div>
</div>
</div>
<div class="meet-content">
<div class="fog-row">
<h2>Meet me At the<br><em>Festival Of Genomics!</em></h2>
<img src="FOG-Logo.svg" alt="Festival of Genomics" class="fog-logo">
</div>
<p>
Connect with me in Boston next week for the Festival of Genomics as I share exciting new insights of our Genomic Database which is uniquely paired with <strong>Longitudinal Clinical Insights, Whole Slide Images,</strong> and <strong>Biospecimen Data.</strong>
</p>
<div class="cta-pill">
<img src="Days-icon.svg" alt="15 mins" style="width:28px;height:28px;flex-shrink:0;margin-top:1px;">
<p><strong>15 mins</strong> is all we need to explore how a collaboration between our two teams could move the needle for the <strong>Global Oncology Community.</strong></p>
</div>
</div>
</div>
<!-- 4. Modular Solutions -->
<div class="solutions-section">
<div class="section-band">Our Modular Solutions</div>
<div class="solutions-grid">
<div class="sol-item">
<div class="sol-line sol-line--blue"></div>
<div class="sol-icon"><img src="Pharma-Icon.svg" alt="Pharma"></div>
<div class="sol-body">
<div class="sol-title">Pharma Solutioning</div>
<div class="sol-desc">Turning real-world oncology data into commercial and clinical intelligence.</div>
<div class="sol-bullets">
<span>Competitor &amp; Rx Market Intelligence</span>
<span>Study Support</span>
<span>Account Strategy &amp; Sales Targeting</span>
<span>PEP / PHR Enablement</span>
</div>
</div>
</div>
<div class="sol-item">
<div class="sol-line sol-line--teal"></div>
<div class="sol-icon"><img src="Biospecimen-Icon.svg" alt="Biospecimen"></div>
<div class="sol-body">
<div class="sol-title">Biospecimen Capabilities</div>
<div class="sol-desc">High-quality bio-assets linked to deep molecular and clinical intelligence.</div>
<div class="sol-bullets">
<span>Tri-Layer Advantage: Genomic / Transcriptomic Profiles</span>
<span>Precision Feasibility: Query exact tissue subsets instantly</span>
</div>
</div>
</div>
<div class="sol-item">
<div class="sol-line sol-line--purple"></div>
<div class="sol-icon"><img src="CRO-Icon.svg" alt="CRO"></div>
<div class="sol-body">
<div class="sol-title">CRO &amp; Research Organisation Solutions</div>
<div class="sol-desc">Making clinical research faster, sharper, and completely patient-aligned.</div>
<div class="sol-bullets">
<span>Precision Site Feasibility</span>
<span>Rapid Patient Onboarding</span>
<span>Streamlined Operations</span>
</div>
</div>
</div>
<div class="sol-item">
<div class="sol-line sol-line--green"></div>
<div class="sol-icon"><img src="Drug-Icon.svg" alt="Drug Discovery"></div>
<div class="sol-body">
<div class="sol-title">Drug Discovery Company Solutions</div>
<div class="sol-desc">Diverse, multi-modal data to power next-generation oncology discovery.</div>
<div class="sol-bullets">
<span>The Non-Caucasian Advantage</span>
<span>Precision Trial Acceleration</span>
<span>Multi-Modal Ground Truth</span>
</div>
</div>
</div>
<div class="sol-item">
<div class="sol-line sol-line--indigo"></div>
<div class="sol-icon"><img src="AI-Icon.svg" alt="AI Modeling"></div>
<div class="sol-body">
<div class="sol-title">AI Modeling in Oncology</div>
<div class="sol-desc">High-fidelity, diversity-rich datasets for representative oncology AI.</div>
<div class="sol-bullets">
<span>De-Biasing the Global Gap</span>
<span>Validation at Scale</span>
<span>High-Fidelity Multi-Modality</span>
</div>
</div>
</div>
</div>
</div>
<!-- 5. Goal quote -->
<div class="goal-section">
<p class="goal-quote">
Our goal is to provide the multi-modal depth — clinical, pathological, and molecular — necessary to revolutionize global oncology. We're pushing the boundaries of how genomic insights can personalize cancer treatment.
</p>
</div>
<!-- 6. Logos row -->
<div class="logos-row">
<div>
<img src="4baseCare-Logo.svg" alt="4baseCare">
</div>
<div class="divider"></div>
<div>
<img src="CAP-NABL.svg" alt="CAP NABL" style="height:36px;">
</div>
</div>
<!-- 7. Advisory Board -->
<div class="advisory-section">
<div class="advisory-eyebrow">Our Advisory Board</div>
<div class="advisory-badge">
<span>MSKCC i-Hub Advisory Board</span>
</div>
<div class="advisors-row">
<div class="advisor">
<div class="advisor-pic"><img src="Mr.Lip.svg" alt="Lip Bu Tan"></div>
<div class="advisor-name">Mr. Lip Bu Tan</div>
<div class="advisor-role">CEO Intel</div>
</div>
<div class="advisor">
<div class="advisor-pic"><img src="Mr.Francis.svg" alt="Francis de Souza"></div>
<div class="advisor-name">Mr. Francis de Souza</div>
<div class="advisor-role">COO - Google Cloud</div>
</div>
<div class="advisor">
<div class="advisor-pic"><img src="Prof.George.svg" alt="Prof. George Church"></div>
<div class="advisor-name">Prof. George Church</div>
<div class="advisor-role">Professor at Harvard &amp; MIT</div>
</div>
</div>
</div>
<!-- 8. Footer with Footer-BG + Footer-Motto SVGs -->
<div class="footer-section">
<div class="footer-bg-img"></div>
<div class="footer-content">
<!-- Footer-Motto.svg renders the "Together We Beat Cancer" artwork -->
<img src="Footer-Motto.svg" alt="Together, We Beat Cancer" class="footer-motto-img">
<div class="footer-social">
<a href="https://www.linkedin.com/company/4basecare" class="soc-ico">
<img src="Linkedin.svg" alt="LinkedIn">
</a>
<a href="https://www.facebook.com/4basecare/" class="soc-ico">
<img src="Facebook.svg" alt="Facebook">
</a>
<a href="https://x.com/4baseCare" class="soc-ico">
<img src="Twitter.svg" alt="Twitter">
</a>
</div>
<a href="https://www.4basecare.com/" class="footer-url">www.4basecare.com</a>
</div>
</div>
</div><!-- /main-card -->
</div><!-- /bg-wrapper -->
</div><!-- /email-shell -->
</body>
</html>