Under Construction

<!DOCTYPE html>

<head>

<title>Still Fathers — You Are Still a Father.</title>

<style>

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

–blue: #4A90C4;

–pink: #E8748A;

–dark: #1a1a2e;

–dark-navy: #1c2a3a;

–light-gray: #f8f7f5;

–text: #2c2c2c;

–text-light: #666;

–white: #ffffff;

}

body {

font-family: ‘Source Sans 3’, sans-serif;

color: var(–text);

line-height: 1.6;

}

a { text-decoration: none; color: inherit; }

/* ── HEADER ── */

header {

background: var(–white);

padding: 14px 40px;

display: flex;

align-items: center;

justify-content: space-between;

border-bottom: 1px solid #eee;

position: sticky;

top: 0;

z-index: 100;

box-shadow: 0 1px 8px rgba(0,0,0,0.07);

}

.logo {

display: flex;

align-items: center;

gap: 14px;

}

.logo-icon {

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

.logo-text h1 {

font-family: ‘Playfair Display’, serif;

font-size: 22px;

font-weight: 900;

letter-spacing: 2px;

text-transform: uppercase;

line-height: 1.1;

color: var(–dark);

}

.logo-text p {

font-size: 10px;

letter-spacing: 1.5px;

text-transform: uppercase;

color: var(–text-light);

font-weight: 600;

}

nav {

display: flex;

gap: 22px;

align-items: center;

}

nav a {

font-size: 12px;

font-weight: 700;

letter-spacing: 0.5px;

text-transform: uppercase;

color: var(–text);

transition: color 0.2s;

padding-bottom: 2px;

}

nav a:hover { color: var(–blue); }

nav a.active { color: var(–blue); border-bottom: 2px solid var(–blue); }

nav a.donate-link {

color: var(–pink);

border: 1.5px solid var(–pink);

padding: 6px 14px;

border-radius: 3px;

transition: all 0.2s;

}

nav a.donate-link:hover { background: var(–pink); color: white; }

/* ── HERO ── */

.hero {

position: relative;

min-height: 480px;

background: linear-gradient(to right, rgba(15,15,25,0.92) 42%, rgba(15,15,25,0.3) 100%),

url(‘https://images.unsplash.com/photo-1586015555751-63bb77f4322a?w=1400&q=80’) center/cover no-repeat;

display: flex;

align-items: center;

padding: 60px 60px;

color: white;

}

.hero-content { max-width: 500px; }

.hero h2 {

font-family: ‘Playfair Display’, serif;

font-size: 58px;

font-weight: 900;

line-height: 1.05;

margin-bottom: 18px;

}

.hero h2 em {

font-style: normal;

color: var(–blue);

}

.hero p {

font-size: 17px;

color: rgba(255,255,255,0.85);

margin-bottom: 32px;

font-weight: 300;

line-height: 1.5;

}

.hero-buttons {

display: flex;

gap: 14px;

flex-wrap: wrap;

}

.btn {

display: inline-block;

padding: 13px 22px;

font-size: 12px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

border-radius: 3px;

cursor: pointer;

transition: all 0.2s;

}

.btn-blue { background: var(–blue); color: white; }

.btn-blue:hover { background: #3a7ab0; transform: translateY(-1px); }

.btn-pink { background: var(–pink); color: white; }

.btn-pink:hover { background: #d4607a; transform: translateY(-1px); }

.btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.7); }

.btn-outline:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }

/* ── WHY WE EXIST ── */

.why-section {

padding: 64px 60px;

background: var(–white);

display: grid;

grid-template-columns: 220px 1fr 1fr 80px;

gap: 40px;

align-items: center;

}

.why-label h3 {

font-family: ‘Playfair Display’, serif;

font-size: 32px;

font-weight: 900;

line-height: 1.1;

color: var(–blue);

text-transform: uppercase;

}

.why-label h3 span { color: var(–dark); }

.why-divider {

display: flex;

align-items: center;

gap: 6px;

margin-top: 10px;

}

.why-divider .line { height: 2px; width: 30px; background: var(–blue); }

.why-divider .dot { width: 8px; height: 8px; background: var(–pink); border-radius: 50%; }

.why-text p { font-size: 15px; color: var(–text-light); line-height: 1.8; }

.why-text p strong { color: var(–blue); }

.why-text p b { color: var(–dark); }

.why-right p { font-size: 15px; color: var(–text-light); line-height: 1.8; }

.feet-graphic {

display: flex;

flex-direction: column;

align-items: center;

gap: 4px;

font-size: 32px;

opacity: 0.5;

}

/* ── SERVICES ── */

.services-section {

padding: 60px 60px;

background: var(–light-gray);

text-align: center;

}

.section-label {

font-size: 12px;

font-weight: 700;

letter-spacing: 3px;

text-transform: uppercase;

color: var(–text-light);

margin-bottom: 40px;

}

.services-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 24px;

}

.service-card {

padding: 28px 16px;

text-align: center;

background: white;

border-radius: 6px;

border: 1px solid #eee;

transition: all 0.2s;

cursor: pointer;

}

.service-card:hover {

transform: translateY(-4px);

box-shadow: 0 8px 24px rgba(0,0,0,0.1);

border-color: var(–blue);

}

.service-icon {

width: 52px;

height: 52px;

margin: 0 auto 16px;

color: var(–blue);

}

.service-card h4 {

font-size: 13px;

font-weight: 700;

letter-spacing: 0.5px;

text-transform: uppercase;

margin-bottom: 8px;

color: var(–dark);

}

.service-card p { font-size: 13px; color: var(–text-light); line-height: 1.5; }

/* ── STORIES ── */

.stories-section {

padding: 60px;

background: var(–dark-navy);

display: grid;

grid-template-columns: 280px 1fr;

gap: 40px;

align-items: start;

}

.stories-left { color: white; }

.stories-left .tag {

font-size: 11px;

font-weight: 700;

letter-spacing: 2px;

text-transform: uppercase;

color: var(–pink);

margin-bottom: 10px;

}

.stories-left h3 {

font-family: ‘Playfair Display’, serif;

font-size: 40px;

font-weight: 900;

line-height: 1.1;

margin-bottom: 14px;

}

.stories-left p {

font-size: 14px;

color: rgba(255,255,255,0.65);

margin-bottom: 24px;

line-height: 1.7;

}

.videos-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 12px;

}

.video-thumb {

position: relative;

border-radius: 6px;

overflow: hidden;

aspect-ratio: 4/3;

cursor: pointer;

background: #2a3a4a;

transition: transform 0.2s;

}

.video-thumb:hover { transform: scale(1.03); }

.video-thumb img {

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0.7;

}

.play-btn {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 44px;

height: 44px;

background: rgba(255,255,255,0.9);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 16px;

color: var(–dark);

transition: all 0.2s;

}

.video-thumb:hover .play-btn { background: white; transform: translate(-50%, -50%) scale(1.1); }

.view-all {

text-align: center;

margin-top: 20px;

grid-column: 1 / -1;

}

.view-all a {

font-size: 13px;

font-weight: 700;

letter-spacing: 1px;

color: rgba(255,255,255,0.6);

text-transform: uppercase;

transition: color 0.2s;

}

.view-all a:hover { color: white; }

/* ── RESOURCES ── */

.resources-section {

padding: 60px;

background: var(–white);

display: grid;

grid-template-columns: 260px 1fr;

gap: 40px;

align-items: start;

}

.resources-left h3 {

font-family: ‘Playfair Display’, serif;

font-size: 28px;

font-weight: 900;

line-height: 1.2;

margin-bottom: 12px;

}

.resources-left h3 span { color: var(–pink); }

.resources-left p { font-size: 14px; color: var(–text-light); margin-bottom: 20px; line-height: 1.6; }

.btn-pink-outline {

display: inline-block;

padding: 10px 20px;

font-size: 12px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

border: 2px solid var(–pink);

color: var(–pink);

border-radius: 3px;

transition: all 0.2s;

}

.btn-pink-outline:hover { background: var(–pink); color: white; }

.resources-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 20px;

}

.resource-card {

text-align: center;

padding: 20px 12px;

cursor: pointer;

border-radius: 6px;

transition: all 0.2s;

border: 1px solid transparent;

}

.resource-card:hover {

background: var(–light-gray);

border-color: #eee;

transform: translateY(-2px);

}

.resource-icon {

width: 44px;

height: 44px;

margin: 0 auto 12px;

color: var(–blue);

}

.resource-card h4 {

font-size: 13px;

font-weight: 700;

margin-bottom: 6px;

color: var(–dark);

line-height: 1.3;

}

.resource-card p { font-size: 12px; color: var(–text-light); line-height: 1.5; }

/* ── MEMORIAL ── */

.memorial-section {

position: relative;

padding: 60px;

background: linear-gradient(to right, rgba(240,240,240,0.97) 50%, rgba(240,240,240,0.7) 100%),

url(‘https://images.unsplash.com/photo-1584267385494-9fdd9a71ad75?w=800&q=80’) right center/cover no-repeat;

display: flex;

align-items: center;

gap: 40px;

}

.memorial-content { max-width: 400px; }

.memorial-content h3 {

font-family: ‘Playfair Display’, serif;

font-size: 42px;

font-weight: 900;

color: var(–dark);

margin-bottom: 12px;

}

.memorial-content p { font-size: 15px; color: var(–text-light); margin-bottom: 24px; line-height: 1.7; }

.btn-blue-outline {

display: inline-block;

padding: 12px 22px;

font-size: 12px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

border: 2px solid var(–blue);

color: var(–blue);

border-radius: 3px;

transition: all 0.2s;

}

.btn-blue-outline:hover { background: var(–blue); color: white; }

/* ── FOOTER ── */

footer {

background: var(–dark-navy);

color: white;

padding: 32px 60px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

align-items: center;

gap: 30px;

}

.footer-logo {

display: flex;

align-items: center;

gap: 12px;

}

.footer-logo .logo-icon {

width: 50px;

height: 50px;

}

.footer-logo h4 {

font-family: ‘Playfair Display’, serif;

font-size: 18px;

font-weight: 900;

letter-spacing: 2px;

text-transform: uppercase;

}

.footer-logo p {

font-size: 9px;

letter-spacing: 1.5px;

text-transform: uppercase;

color: rgba(255,255,255,0.5);

}

.footer-middle { text-align: center; }

.footer-middle h4 {

font-family: ‘Playfair Display’, serif;

font-size: 22px;

font-weight: 700;

margin-bottom: 8px;

}

.footer-middle p {

font-size: 12px;

color: rgba(255,255,255,0.5);

margin-bottom: 4px;

}

.footer-divider {

width: 30px;

height: 2px;

background: var(–pink);

margin: 10px auto;

}

.footer-right { text-align: right; }

.btn-join-footer {

display: inline-block;

padding: 14px 22px;

font-size: 12px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

background: var(–blue);

color: white;

border-radius: 3px;

margin-bottom: 8px;

transition: all 0.2s;

}

.btn-join-footer:hover { background: #3a7ab0; }

.footer-right p {

font-size: 11px;

color: rgba(255,255,255,0.4);

line-height: 1.6;

}

.footer-bottom {

background: #111827;

padding: 12px 60px;

text-align: center;

}

.footer-bottom p {

font-size: 11px;

letter-spacing: 2px;

text-transform: uppercase;

color: rgba(255,255,255,0.35);

}

.footer-bottom span { margin: 0 16px; }

/* SVG Icons */

svg { display: block; }

</style>

</head>

<body>

<!– HEADER –>

<h1>Still<br>Fathers</h1>

<p>You are still a father.</p>

</div>

</a>

<nav>

<a href=”#about“>About</a>

<a href=”#support-groups“>Support Groups</a>

<a href=”#stories“>Stories</a>

<a href=”#resources“>Resources</a>

<a href=”#memorial“>Memorial Wall</a>

<a href=”#couples“>For Couples</a>

<a href=”#donate” class=”donate-link”>Donate</a>

<a href=”#contact“>Contact</a>

</nav>

</header>

<!– HERO –>

<h2>You Are<br><em>Still</em> a Father.</h2>

<p>A support community for men navigating stillbirth, infant loss, and maternal loss.</p>

<a href=”#support-groups” class=”btn btn-blue”>Join a Support Group</a>

<a href=”#stories” class=”btn btn-pink”>Watch Real Stories</a>

<a href=”#resources” class=”btn btn-outline”>Find Support Now</a>

</div>

</section>

<!– WHY WE EXIST –>

<h3><span>Why</span><br>We Exist</h3>

</div>

<p>

Men are often expected to stay strong after loss.<br>

To hold everything together. To protect everyone else.<br>

To return to work. To move forward quietly.<br><br>

<strong>But fathers grieve too.</strong><br>

<b>And too many men carry that grief alone.</b>

</p>

</div>

<p>Still Fathers exists to create a place where men can speak honestly about stillbirth, infant loss, neonatal loss, infertility, and maternal loss — without judgment, shame, or isolation.</p>

</div>

</div>

</section>

<!– WE’RE HERE FOR YOU –>

</svg>

</div>

<h4>Weekly Men’s Groups</h4>

<p>Virtual peer support groups led by trained facilitators.</p>

</a>

</svg>

</div>

<h4>1-on-1 Peer Support</h4>

<p>Connect with another father who truly understands.</p>

</a>

</svg>

</div>

<h4>Couples Support</h4>

<p>Tools and support to help you grieve together, not apart.</p>

</a>

</svg>

</div>

<h4>Crisis Resources</h4>

<p>Immediate help for depression, trauma, or suicidal thoughts.</p>

</a>

</svg>

</div>

<h4>Faith-Based Option</h4>

<p>Spiritual support for fathers who want it.</p>

</a>

</div>

</section>

<!– REAL STORIES –>

<h3>Real Stories.</h3>

<p>Watch and listen to other fathers share their journeys through loss, grief, and healing.</p>

<a href=”#all-stories” class=”btn btn-blue” style=”font-size:12px; padding:11px 20px;”>Watch Stories</a>

</div>

<div>

</a>

</a>

</a>

</a>

</div>

<a href=”#all-stories“>View All Stories →</a>

</div>

</section>

<!– RESOURCES –>

<h3><span>Resources for</span><br>Your Journey</h3>

<p>Articles, videos, and tools to help you navigate grief and healing.</p>

<a href=”#browse” class=”btn-pink-outline”>Browse Resources</a>

</div>

</svg>

</div>

<h4>Returning to Work After Loss</h4>

<p>How to navigate work when your world has changed.</p>

</a>

</svg>

</div>

<h4>Supporting Your Partner</h4>

<p>How to show up without losing yourself.</p>

</a>

</svg>

</div>

<h4>PTSD & Trauma</h4>

<p>Understanding trauma after a traumatic birth or loss.</p>

</a>

</svg>

</div>

<h4>Marriage After Loss</h4>

<p>Strengthening your marriage through the hard days.</p>

</a>

</svg>

</div>

<h4>Faith, Anger & Healing</h4>

<p>Exploring your faith and finding peace again.</p>

</a>

</div>

</section>

<!– MEMORIAL WALL –>

<h3>Say Their Name.</h3>

<p>Honor your baby. Share their name. You will always be their father.</p>

<a href=”#memorial-wall” class=”btn-blue-outline”>Visit Memorial Wall</a>

</div>

</section>

<!– FOOTER –>

<h4 style=”color:white; font-family:’Playfair Display’,serif; font-size:16px; letter-spacing:2px;”>Still<br>Fathers</h4>

<p style=”font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4);”>You are still a father.</p>

</div>

<h4>You don’t have to<br>carry this alone.</h4>

<p>Confidential. Judgment-free. Brother-to-brother.</p>

</div>

<a href=”#support-groups” class=”btn-join-footer”>Join a Support Group Today</a>

<p>Confidential. Judgment-free.<br>Brother-to-brother.</p>

</div>

</footer>

<p>

<span>You are heard.</span>

<span>You are not alone.</span>

</p>

</div>

</body>

</html>

Comments

Leave a Reply Cancel reply