# Coach Tati’s Complete Website – Section by Section Code

—

## GLOBAL STYLES (Use this in your CSS section)

“`css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}

.section {
padding: 80px 0;
}

.section h2 {
text-align: center;
font-size: 2.8em;
margin-bottom: 60px;
color: #333;
position: relative;
display: inline-block;
width: 100%;
}

.section h2::after {
content: ”;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #6B46C1, #D53F8C);
border-radius: 2px;
}

.btn {
background: linear-gradient(135deg, #6B46C1 0%, #D53F8C 100%);
color: white;
padding: 16px 35px;
border: none;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(107, 70, 193, 0.4);
display: inline-block;
text-decoration: none;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(107, 70, 193, 0.5);
}

.highlight {
color: #D53F8C;
font-weight: 600;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes wave {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-20px); }
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-12px); }
60% { transform: translateY(-6px); }
}

@media (max-width: 768px) {
.section h2 {
font-size: 2em;
}
}
“`

—

## SECTION 1: NAVIGATION BAR

“`html

“`

**CSS for Navigation:**
“`css
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(10px);
padding: 15px 0;
z-index: 1000;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.nav-logo {
display: flex;
align-items: center;
gap: 15px;
}

.nav-logo img {
width: 50px;
height: 50px;
}

.nav-logo span {
font-size: 1.4em;
font-weight: bold;
background: linear-gradient(45deg, #6B46C1, #D53F8C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.nav-links {
display: flex;
list-style: none;
gap: 30px;
}

.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: #D53F8C;
}

@media (max-width: 768px) {
.nav-links {
display: none;
}
}
“`

—

## SECTION 2: HERO SECTION (HOME)

“`html

Tip Ni Tati

Authentic Selling • Sell Like a Specialist

“Imagine closing more policies—not with pressure, but with purpose. Not with confusion, but with clarity.
Hi, I’m Coach Tati. Let me show you how to sell life insurance the right way: authentically, ethically, and effectively.”

🎁 FREE DOWNLOAD

“The 5 Mistakes Every Insurance Advisor Makes (And How to Fix Them)”

Get Your FREE Guide Now!

“`

**CSS for Hero:**
“`css
.hero {
background: linear-gradient(135deg, #6B46C1 0%, #D53F8C 100%);
color: white;
padding: 100px 0 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(‘data:image/svg+xml,‘);
background-size: cover;
animation: wave 10s ease-in-out infinite;
}

.logo-section {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}

.logo-img {
width: 120px;
height: 120px;
animation: fadeInDown 1s ease-out;
}

.hero h1 {
font-size: 3.5em;
margin-bottom: 15px;
animation: fadeInUp 1s ease-out;
background: linear-gradient(45deg, #FFD700, #FF69B4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero .tagline {
font-size: 1.8em;
margin-bottom: 30px;
opacity: 0.95;
animation: fadeInUp 1s ease-out 0.3s both;
font-weight: 600;
}

.hero .quote {
font-size: 1.2em;
font-style: italic;
margin-bottom: 40px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
animation: fadeInUp 1s ease-out 0.6s both;
line-height: 1.8;
}

.lead-form {
background: white;
padding: 35px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
max-width: 550px;
margin: 0 auto;
animation: fadeInUp 1s ease-out 0.9s both;
}

.lead-form h3 {
color: #6B46C1;
margin-bottom: 15px;
font-size: 1.5em;
}

.lead-form p {
color: #333;
margin-bottom: 25px;
font-size: 1.1em;
}

.form-group {
margin-bottom: 20px;
}

.form-group input {
width: 100%;
padding: 14px;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}

.form-group input:focus {
outline: none;
border-color: #D53F8C;
box-shadow: 0 0 0 3px rgba(213, 63, 140, 0.1);
}

@media (max-width: 768px) {
.hero h1 {
font-size: 2.2em;
}

.hero .tagline {
font-size: 1.3em;
}

.hero .quote {
font-size: 1.1em;
}
}
“`

—

## SECTION 3: ABOUT SECTION

“`html

Meet Coach Tati

Tatiana Cyrile Alvarez Castro

Fellow Chartered Financial Practitioner (Graduate)

Certified Advisor for Life (Graduate)

Authentic Selling Mentor & Coach

From struggling rookie to industry mentor, Coach Tati transformed her career by rejecting pushy sales tactics and embracing authentic connections.

Her wake-up call came when a client said, “Insurance lang pala ‘to?” – sparking a mission to revolutionize how insurance is sold in the Philippines.

Today, she empowers advisors through Courageous Living, teaching them to sell with clarity, confidence, and heart.

🎯 What Makes Coach Tati Different:

• 1,000+ advisors transformed nationwide
• 50+ companies trained
• Industry-recognized for “real talk” and authentic approaches
• Genuine connection over scripted pitches
• Ethical selling that protects families

“`

**CSS for About:**
“`css
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 60px;
}

.about-image {
text-align: center;
}

.about-image img {
max-width: 100%;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
transition: transform 0.3s;
}

.about-image img:hover {
transform: scale(1.05);
}

.about-text h3 {
font-size: 2em;
color: #6B46C1;
margin-bottom: 20px;
}

.about-text p {
font-size: 1.15em;
line-height: 1.8;
color: #555;
margin-bottom: 15px;
}

.credentials {
background: linear-gradient(135deg, #f8f4ff 0%, #ffe6f0 100%);
padding: 30px;
border-radius: 15px;
margin-top: 30px;
}

.credentials h4 {
color: #6B46C1;
margin-bottom: 15px;
font-size: 1.3em;
}

.credentials ul {
list-style: none;
padding-left: 0;
}

.credentials li {
padding: 8px 0;
padding-left: 30px;
position: relative;
font-size: 1.05em;
}

.credentials li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: #D53F8C;
font-weight: bold;
font-size: 1.3em;
}

@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 30px;
}
}
“`

—

## SECTION 4: TIMELINE (JOURNEY)

“`html

“`

**CSS for Timeline:**
“`css
.timeline-section {
background: linear-gradient(135deg, #f8f4ff 0%, #fff5f9 100%);
}

.about-timeline {
display: flex;
flex-direction: column;
max-width: 900px;
margin: 0 auto;
position: relative;
}

.about-timeline::before {
content: ”;
position: absolute;
left: 40px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #6B46C1, #D53F8C);
}

.timeline-item {
display: flex;
align-items: center;
margin-bottom: 50px;
opacity: 0;
transform: translateX(-50px);
transition: all 0.6s ease-out;
}

.timeline-item.visible {
opacity: 1;
transform: translateX(0);
}

.timeline-year {
background: linear-gradient(135deg, #6B46C1, #D53F8C);
color: white;
padding: 12px 22px;
border-radius: 50px;
font-weight: bold;
min-width: 90px;
text-align: center;
margin-right: 35px;
box-shadow: 0 4px 15px rgba(107, 70, 193, 0.3);
font-size: 1.1em;
z-index: 1;
}

.timeline-content {
flex: 1;
background: white;
padding: 30px;
border-radius: 15px;
border-left: 5px solid #D53F8C;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s;
}

.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.timeline-content h3 {
color: #6B46C1;
font-size: 1.5em;
margin-bottom: 12px;
}

.timeline-content p {
color: #555;
line-height: 1.7;
font-size: 1.05em;
}

.audio-player {
background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
padding: 35px;
border-radius: 20px;
margin-top: 60px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.audio-player h3 {
font-size: 1.6em;
margin-bottom: 15px;
color: #333;
}

.audio-player p {
font-size: 1.2em;
margin-bottom: 25px;
color: #555;
}

.audio-player button {
background: #333;
color: white;
border: none;
padding: 14px 30px;
border-radius: 25px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
transition: all 0.3s;
}

.audio-player button:hover {
background: #555;
transform: translateY(-2px);
}

@media (max-width: 768px) {
.about-timeline::before {
left: 30px;
}

.timeline-year {
min-width: 70px;
padding: 10px 15px;
font-size: 0.9em;
margin-right: 20px;
}

.timeline-content {
padding: 20px;
}
}
“`

—

## SECTION 5: MISSION & VISION

“`html

“`

**CSS for Mission & Vision:**
“`css
.mission-vision-section {
background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
}

.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-bottom: 70px;
}

.mission-card, .vision-card {
background: rgba(255,255,255,0.95);
padding: 45px;
border-radius: 25px;
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
transition: all 0.4s;
text-align: center;
}

.mission-card:hover, .vision-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.card-icon {
font-size: 5em;
margin-bottom: 25px;
}

.mission-card h2, .vision-card h2 {
color: #6B46C1;
font-size: 2.5em;
margin-bottom: 25px;
}

.mission-card h2::after, .vision-card h2::after {
display: none;
}

.mission-text, .vision-text {
font-size: 1.25em;
line-height: 1.9;
color: #555;
margin-bottom: 30px;
}

.mission-quote, .vision-quote {
background: linear-gradient(135deg, #6B46C1 0%, #D53F8C 100%);
padding: 25px;
border-radius: 15px;
color: white;
}

.mission-quote p, .vision-quote p {
margin: 0;
font-style: italic;
font-size: 1.15em;
line-height: 1.6;
}

.core-values {
background: rgba(255,255,255,0.95);
padding: 50px;
border-radius: 25px;
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
text-align: center;
}

.core-values h3 {
color: #6B46C1;
font-size: 2.3em;
margin-bottom: 40px;
}

.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 35px;
}

.value-item {
text-align: center;
padding: 25px;
border-radius: 15px;
transition: all 0.3s;
}

.value-item:hover {
background: rgba(107, 70, 193, 0.05);
transform: translateY(-5px);
}

.value-icon {
font-size: 3.5em;
margin-bottom: 18px;
}

.value-item h4 {
color: #D53F8C;
margin-bottom: 12px;
font-size: 1.4em;
}

.value-item p {
color: #666;
font-size: 1.05em;
}

@media (max-width: 768px) {
.mission-vision-grid {
grid-template-columns: 1fr;
gap: 30px;
}

.mission-card, .vision-card {
padding: 30px;
}

.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
“`

—

## SECTION 6: COURSES/PROGRAMS

“`html

“`

**CSS for Courses:**
“`css
.courses-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 0;
}

.courses-section h2::after {
background: white;
}

.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}

.course-card {
background: white;
color: #333;
padding: 40px;
border-radius: 25px;
box-shadow: 0 15px 50px rgba(0,0,0,0.25);
transition: all 0.4s;
position: relative;
overflow: hidden;
}

.course-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #6B46C1, #D53F8C);
}

.course-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.course-premium {
border: 3px solid #FFD700;
}

.course-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #FF6B6B, #FF8E53);
color: white;
padding: 8px 18px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
letter-spacing: 0.5px;
}

.badge-sun {
background: linear-gradient(135deg, #FFD700, #FFA500);
}

.badge-premium {
background: linear-gradient(135deg, #FFD700, #FFA500);
font-size: 0.85em;
padding: 10px 20px;
}

.course-card h3 {
font-size: 2em;
color: #6B46C1;
margin-bottom: 15px;
margin-top: 10px;
}

.course-subtitle {
font-size: 1.1em;
color: #666;
margin-bottom: 25px;
font-style: italic;
}

.course-topics {
background: #f8f4ff;
padding: 25px;
border-radius: 15px;
margin: 25px 0;
}

.course-topics h4 {
color: #6B46C1;
margin-bottom: 15px;
font-size: 1.3em;
}

.course-topics ul {
list-style: none;
padding-left: 0;
}

.course-topics li {
padding: 8px 0;
padding-left: 28px;
position: relative;
line-height: 1.6;
}

.course-topics li::before {
content: ‘✓’;
position: absolute;
left: 5px;
color: #D53F8C;
font-weight: bold;
font-size: 1.3em;
}

.course-details {
margin: 25px 0;
padding: 20px;
background: #fff5f9;
border-radius: 12px;
}

.course-details p {
margin: 10px 0;
font-size: 1.05em;
line-height: 1.7;
}

.course-price {
color: #D53F8C;
font-size: 1.3em !important;
margin-top: 15px !important;
}

.btn-course {
width: 100%;
margin-top: 20px;
font-size: 1.1em;
padding: 18px;
}

.quiz-section {
text-align: center;
margin-top: 70px;
background: rgba(255,255,255,0.15);
padding: 50px;
border-radius: 25px;
backdrop-filter: blur(10px);
}

.quiz-section h3 {
color: white;
font-size: 2em;
margin-bottom: 15px;
}

.quiz-section p {
color: white;
font-size: 1.2em;
margin-bottom: 30px;
opacity: 0.95;
}

@media (max-width: 768px) {
.courses-grid {
grid-template-columns: 1fr;
}
}
“`

—

## SECTION 7: TESTIMONIALS

“`html

“`

**CSS for Testimonials:**
“`css
.testimonials {
background: #f9fafb;
padding: 80px 0;
}

.testimonial-carousel {
display: flex;
overflow-x: auto;
gap: 35px;
padding: 30px 0;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}

.testimonial-carousel::-webkit-scrollbar {
height: 8px;
}

.testimonial-carousel::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.testimonial-carousel::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #6B46C1, #D53F8C);
border-radius: 10px;
}

.testimonial-card {
min-width: 420px;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
position: relative;
scroll-snap-align: start;
transition: all 0.3s;
}

.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

.testimonial-card::before {
content: ‘”‘;
font-size: 6em;
color: #D53F8C;
position: absolute;
top: 15px;
left: 30px;
opacity: 0.2;
font-family: Georgia, serif;
}

.testimonial-rating {
font-size: 1.3em;
margin-bottom: 20px;
text-align: center;
}

.testimonial-text {
font-size: 1.15em;
margin-bottom: 25px;
padding-left: 45px;
line-height: 1.8;
color: #555;
}

.testimonial-author {
font-weight: bold;
color: #6B46C1;
padding-left: 45px;
font-size: 1.2em;
margin-bottom: 5px;
}

.testimonial-title {
color: #D53F8C;
padding-left: 45px;
font-size: 1em;
margin-bottom: 20px;
}

.btn-testimonial {
width: auto;
padding: 12px 25px;
font-size: 1em;
margin-left: 45px;
}

.testimonial-cta {
text-align: center;
margin-top: 60px;
background: linear-gradient(135deg, #f8f4ff 0%, #ffe6f0 100%);
padding: 50px;
border-radius: 25px;
}

.testimonial-cta h3 {
font-size: 2em;
color: #333;
margin-bottom: 30px;
}

@media (max-width: 768px) {
.testimonial-card {
min-width: 320px;
}
}
“`

—

## SECTION 8: FAQ

“`html

“`

**CSS for FAQ:**
“`css
.faq-section {
background: white;
}

.faq-container {
max-width: 900px;
margin: 0 auto;
}

.faq-item {
background: white;
border: 2px solid #f0f0f0;
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s;
}

.faq-item:hover {
border-color: #D53F8C;
box-shadow: 0 5px 20px rgba(213, 63, 140, 0.1);
}

.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.15em;
font-weight: 600;
color: #333;
transition: all 0.3s;
}

.faq-question:hover {
background: #f8f4ff;
color: #6B46C1;
}

.faq-icon {
font-size: 1.8em;
color: #D53F8C;
font-weight: bold;
transition: transform 0.3s;
}

.faq-question.active .faq-icon {
transform: rotate(45deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s;
padding: 0 30px;
}

.faq-answer.active {
max-height: 500px;
padding: 0 30px 25px 30px;
}

.faq-answer p {
font-size: 1.05em;
line-height: 1.8;
color: #555;
}
“`

—

## SECTION 9: RESOURCES/FREE DOWNLOADS

“`html