<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carl Marquis Tutoring | Online Math Tutor</title>
<meta name="description" content="Personalized online math tutoring for high school and college students. AP Calculus AB/BC, Precalculus, Algebra 2, and College Calculus with flexible weekday availability." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #0f172a;
--bg-alt: #020617;
--card: #020617;
--accent: #38bdf8;
--accent-soft: rgba(56, 189, 248, 0.1);
--text-main: #f9fafb;
--text-muted: #9ca3af;
--border-subtle: #1e293b;
--danger: #f97373;
--shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.9);
--radius-lg: 18px;
--radius-full: 999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: radial-gradient(circle at top, #1e293b 0, #020617 45%, #000 100%);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 1.25rem 1.5rem 4rem;
}
header {
position: sticky;
top: 0;
z-index: 20;
backdrop-filter: blur(18px);
background: linear-gradient(to bottom, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.3));
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.nav-inner {
max-width: 1080px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
letter-spacing: 0.03em;
}
.logo-icon {
width: 30px;
height: 30px;
border-radius: 10px;
background: radial-gradient(circle at 20% 20%, #e5f9ff, #38bdf8);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: #0f172a;
box-shadow: 0 12px 30px rgba(56, 189, 248, 0.65);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
}
.nav-pill {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.4);
padding: 0.3rem 0.75rem;
color: var(--text-muted);
}
.nav-cta {
border-radius: 999px;
padding: 0.45rem 0.9rem;
background: var(--accent);
color: #0f172a;
font-weight: 600;
border: none;
box-shadow: 0 16px 40px rgba(56, 189, 248, 0.45);
cursor: pointer;
}
main {
flex: 1;
}
/* HERO */
.hero {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
gap: 2.75rem;
align-items: center;
margin-top: 2.5rem;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(148, 163, 184, 0.4);
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 1.1rem;
}
.hero-eyebrow span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.hero-badge-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.25);
}
.hero-title {
font-size: clamp(2.3rem, 4vw, 2.9rem);
line-height: 1.05;
margin-bottom: 1rem;
letter-spacing: -0.04em;
}
.hero-title span {
color: var(--accent);
}
.hero-subtitle {
font-size: 1rem;
color: var(--text-muted);
max-width: 34rem;
margin-bottom: 1.8rem;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.95rem;
margin-bottom: 1.7rem;
}
.btn-primary,
.btn-secondary {
border-radius: var(--radius-full);
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.btn-primary {
background: linear-gradient(120deg, #38bdf8, #22c55e);
color: #0f172a;
box-shadow: 0 18px 40px rgba(56, 189, 248, 0.5);
}
.btn-secondary {
background: rgba(15, 23, 42, 0.85);
color: var(--text-main);
border-color: rgba(148, 163, 184, 0.6);
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 1.8rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.hero-meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.hero-meta strong {
color: var(--text-main);
font-weight: 600;
}
.hero-card {
background: radial-gradient(circle at top, #1f2937, #020617);
border-radius: 24px;
padding: 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.hero-card-inner {
position: relative;
z-index: 1;
}
.hero-tagline {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.3rem;
}
.pill {
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.45);
font-size: 0.8rem;
color: var(--text-muted);
background: rgba(15, 23, 42, 0.8);
}
.card-highlight {
border-radius: 18px;
padding: 1rem;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(56, 189, 248, 0.6);
margin-bottom: 1.3rem;
}
.card-highlight-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.mini-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
margin-top: 0.6rem;
font-size: 0.8rem;
}
.mini-metric {
padding: 0.6rem;
border-radius: 12px;
background: rgba(15, 23, 42, 0.9);
border: 1px dashed rgba(148, 163, 184, 0.5);
}
.mini-metric strong {
font-size: 1rem;
display: block;
}
.availability {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.availability strong {
color: var(--accent);
}
/* Sections */
section {
margin-top: 3.25rem;
}
.section-header {
margin-bottom: 1.6rem;
}
.section-kicker {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 0.2rem;
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.3rem;
}
.section-subtitle {
font-size: 0.95rem;
color: var(--text-muted);
max-width: 34rem;
}
.grid-2 {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 2rem;
}
.card {
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
padding: 1.4rem 1.5rem;
}
.card + .card {
margin-top: 1.1rem;
}
.card h3 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}
.pill-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.85rem;
}
.pill-soft {
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: var(--accent-soft);
color: #e0f2fe;
border: 1px solid rgba(56, 189, 248, 0.4);
}
ul {
list-style: none;
}
.bullet-list li {
position: relative;
padding-left: 1rem;
font-size: 0.93rem;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.bullet-list li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
}
/* Steps */
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 0.75rem;
}
.step {
background: radial-gradient(circle at top, #111827, #020617);
border-radius: 16px;
border: 1px solid var(--border-subtle);
padding: 1rem 1rem 1rem;
font-size: 0.9rem;
}
.step-number {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 0.4rem;
}
.step h3 {
font-size: 0.96rem;
margin-bottom: 0.25rem;
}
/* Packages */
.packages {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 0.75rem;
}
.package {
background: radial-gradient(circle at top, #020617, #020617);
border-radius: 18px;
border: 1px solid var(--border-subtle);
padding: 1.1rem 1.1rem 1.2rem;
font-size: 0.9rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.package.featured {
border-color: rgba(56, 189, 248, 0.7);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
}
.package-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 0.2rem;
}
.package-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.package-price {
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.package-note {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.65rem;
}
.package ul {
margin-bottom: 0.75rem;
}
.package ul li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.25rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.package ul li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-size: 0.8rem;
color: #4ade80;
}
.package-cta {
margin-top: auto;
}
.package-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 0.4rem;
padding: 0.6rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
font-size: 0.9rem;
}
.package-cta a.primary {
border-color: transparent;
background: linear-gradient(120deg, #38bdf8, #22c55e);
color: #0f172a;
font-weight: 600;
}
/* Testimonials */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.testimonial {
background: radial-gradient(circle at top, #020617, #020617);
border-radius: 16px;
border: 1px solid var(--border-subtle);
padding: 1rem;
font-size: 0.9rem;
position: relative;
}
.testimonial::before {
content: "“";
position: absolute;
font-size: 2.5rem;
top: 0.35rem;
left: 0.6rem;
color: rgba(148, 163, 184, 0.35);
}
.testimonial p {
margin-top: 1.4rem;
color: var(--text-muted);
}
.testimonial-footer {
margin-top: 0.6rem;
font-size: 0.8rem;
color: var(--text-main);
}
/* FAQ */
.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 0.75rem;
}
.faq-item {
background: #020617;
border-radius: 14px;
border: 1px solid var(--border-subtle);
padding: 0.85rem 0.9rem;
font-size: 0.9rem;
}
.faq-item h3 {
font-size: 0.95rem;
margin-bottom: 0.2rem;
}
.faq-item p {
color: var(--text-muted);
}
/* Booking / CTA */
.booking-card {
background: radial-gradient(circle at top, #111827, #020617);
border-radius: 22px;
padding: 1.6rem 1.5rem;
border: 1px solid rgba(56, 189, 248, 0.6);
box-shadow: var(--shadow-soft);
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
gap: 1.6rem;
align-items: center;
margin-top: 1rem;
}
.booking-pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.booking-pill {
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.45);
}
.booking-form-note {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.7rem;
}
.booking-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.booking-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0.7rem 1rem;
border: 1px solid rgba(148, 163, 184, 0.7);
font-size: 0.9rem;
}
.booking-buttons a.primary {
border-color: transparent;
background: linear-gradient(120deg, #38bdf8, #22c55e);
color: #0f172a;
font-weight: 600;
}
footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(148, 163, 184, 0.25);
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
}
footer a {
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
/* Responsive */
@media (max-width: 900px) {
.hero,
.grid-2,
.booking-card {
grid-template-columns: minmax(0, 1fr);
}
.hero {
margin-top: 2rem;
}
.hero-card {
order: -1;
}
.packages {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.testimonials-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.hero-title {
font-size: 2.1rem;
}
.packages,
.steps,
.testimonials-grid,
.faq-grid {
grid-template-columns: minmax(0, 1fr);
}
.booking-card {
padding: 1.3rem 1.1rem;
}
}
</style>
</head>
<body>
<div class="page">
<header>
<div class="nav-inner">
<div class="logo">
<div class="logo-icon">CM</div>
<span>Carl Marquis Tutoring</span>
</div>
<div class="nav-actions">
<div class="nav-pill">Online math tutoring • Grades 9–College</div>
<a href="#booking" class="nav-cta">Book intro call</a>
</div>
</div>
</header>
<main>
<div class="container">
<!-- HERO -->
<section class="hero">
<div>
<div class="hero-eyebrow">
<span><span class="hero-badge-dot"></span> Now accepting new students</span>
<span>AP Calculus • Precalculus • Algebra 2</span>
</div>
<h1 class="hero-title">
Personalized <span>online math tutoring</span> for high school & college.
</h1>
<p class="hero-subtitle">
I help motivated students turn confusion into clarity in AP Calculus AB/BC, Precalculus, Algebra 2, and college Calculus—through calm, one-on-one online sessions and a clear plan each week.
</p>
<div class="hero-ctas">
<a href="#booking" class="btn-primary">
Book a free 20-minute intro
</a>
<a href="mailto:tutoring@carlmarquis.com" class="btn-secondary">
Email me at tutoring@carlmarquis.com
</a>
</div>
<div class="hero-meta">
<span><strong>Online only</strong> via Zoom</span>
<span><strong>Weekdays</strong> only</span>
<span>Based in Albuquerque; tutoring students nationwide</span>
</div>
</div>
<aside class="hero-card">
<div class="hero-card-inner">
<p class="hero-tagline">Focused on the courses that matter most for STEM and competitive colleges:</p>
<div class="pill-row">
<div class="pill">AP Calculus AB/BC</div>
<div class="pill">Precalculus</div>
<div class="pill">Algebra 2</div>
<div class="pill">College Calculus</div>
</div>
<div class="card-highlight">
<div class="card-highlight-title">What parents usually say:</div>
<p style="font-size: 0.85rem; color: var(--text-muted);">
“My student understands the teacher now, homework takes less time, and their test scores are finally matching the effort they’re putting in.”
</p>
<div class="mini-metrics">
<div class="mini-metric">
<strong>1:1</strong>
Individualized instruction
</div>
<div class="mini-metric">
<strong>Plan</strong>
Weekly goals & follow-up
</div>
<div class="mini-metric">
<strong>Calm</strong>
Patient, supportive pace
</div>
</div>
</div>
<div class="availability">
<strong>Current availability:</strong> weekday afternoons & evenings. Limited spots for new students.
</div>
</div>
</aside>
</section>
<!-- WHO I HELP -->
<section id="who">
<div class="grid-2">
<div>
<div class="section-header">
<div class="section-kicker">Who I help</div>
<h2 class="section-title">Students who want clarity, not just more homework.</h2>
<p class="section-subtitle">
Most of my students are bright and hard-working—but somewhere between the lecture, the notes, and the homework, the ideas get tangled. That’s where focused one-on-one tutoring shines.
</p>
</div>
<div class="card">
<h3>Typical students I work with</h3>
<ul class="bullet-list">
<li>High school students in Algebra 2, Precalculus, or AP Calculus AB/BC.</li>
<li>College students in Calculus or business Calculus who want to actually understand the “why.”</li>
<li>Strong students aiming for 4–5 on the AP exam and competitive college programs.</li>
<li>Students who have fallen behind and need a calm, structured way to rebuild confidence.</li>
</ul>
</div>
<div class="card">
<h3>What I focus on in sessions</h3>
<ul class="bullet-list">
<li>Clearing up core concepts so problems stop feeling random.</li>
<li>Working through real homework and test-style problems.</li>
<li>Building a simple, repeatable study routine for math.</li>
<li>Reducing test anxiety by practicing under “test-like” conditions.</li>
</ul>
</div>
</div>
<div>
<div class="section-header">
<div class="section-kicker">Subjects</div>
<h2 class="section-title">What I tutor</h2>
<p class="section-subtitle">
If it’s in the Calculus and pre-Calculus family, I can help.
</p>
</div>
<div class="card">
<h3>High School</h3>
<div class="pill-list">
<span class="pill-soft">Algebra 2</span>
<span class="pill-soft">Precalculus</span>
<span class="pill-soft">AP Calculus AB</span>
<span class="pill-soft">AP Calculus BC</span>
</div>
</div>
<div class="card">
<h3>College</h3>
<div class="pill-list">
<span class="pill-soft">Calculus I</span>
<span class="pill-soft">Calculus II</span>
<span class="pill-soft">Business Calculus</span>
</div>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="how">
<div class="section-header">
<div class="section-kicker">How it works</div>
<h2 class="section-title">A simple, calm process.</h2>
<p class="section-subtitle">
No contracts or complicated systems. Just clear tutoring and consistent progress.
</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Free intro call</h3>
<p>We talk about the course, challenges, goals, and schedule.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>First session</h3>
<p>We work through a real assignment or test and build a plan.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Weekly sessions</h3>
<p>We meet consistently, prepare for tests, and track progress.</p>
</div>
</div>
</section>
<!-- PACKAGES -->
<section id="packages">
<div class="section-header">
<div class="section-kicker">Packages</div>
<h2 class="section-title">Weekly tutoring options</h2>
<p class="section-subtitle">
Designed for consistent progress. Pricing is for online sessions; weekdays only.
</p>
</div>
<div class="packages">
<div class="package">
<div>
<div class="package-label">Starter</div>
<div class="package-title">Once per week</div>
<div class="package-price">$340 / month</div>
<div class="package-note">4 × 60-minute sessions</div>
<ul>
<li>For students keeping up but needing weekly clarity.</li>
<li>Homework help + concept review.</li>
</ul>
</div>
<div class="package-cta">
<a href="#booking" class="primary">Discuss this option</a>
</div>
</div>
<div class="package featured">
<div>
<div class="package-label">Most popular</div>
<div class="package-title">Twice per week</div>
<div class="package-price">$640 / month</div>
<div class="package-note">8 × 60-minute sessions</div>
<ul>
<li>Best for AP Calc, Precalculus, or rebuilding confidence.</li>
<li>Homework, tests, concept mastery.</li>
</ul>
</div>
<div class="package-cta">
<a href="#booking" class="primary">Book intro call</a>
</div>
</div>
<div class="package">
<div>
<div class="package-label">Intensive</div>
<div class="package-title">Short-term boost</div>
<div class="package-price">Custom</div>
<div class="package-note">For finals, AP exams, or urgent catch-up.</div>
<ul>
<li>Higher-frequency sessions temporarily.</li>
<li>Focus on upcoming exams or deadlines.</li>
</ul>
</div>
<div class="package-cta">
<a href="mailto:tutoring@carlmarquis.com">Email about availability</a>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials">
<div class="section-header">
<div class="section-kicker">Testimonials</div>
<h2 class="section-title">Feedback from families</h2>
<p class="section-subtitle">
Real comments from parents and students I’ve worked with.
</p>
</div>
<div class="testimonials-grid">
<div class="testimonial">
<p>“My daughter went from lost in AP Calc to confident. She raised her grade from a C to an A.”</p>
<div class="testimonial-footer">Parent of AP Calc student</div>
</div>
<div class="testimonial">
<p>“He explains why the math works, not just how to do the steps. Calculus finally makes sense.”</p>
<div class="testimonial-footer">College Calculus student</div>
</div>
<div class="testimonial">
<p>“Homework is no longer a battle every night. Weekly sessions made a huge difference.”</p>
<div class="testimonial-footer">Parent of Precalculus student</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="section-header">
<div class="section-kicker">FAQ</div>
<h2 class="section-title">Common questions</h2>
</div>
<div class="faq-grid">
<div class="faq-item">
<h3>Do you tutor on weekends?</h3>
<p>No — sessions are weekdays only.</p>
</div>
<div class="faq-item">
<h3>Online or in person?</h3>
<p>Online only (Zoom or similar).</p>
</div>
<div class="faq-item">
<h3>How do payments work?</h3>
<p>Monthly packages paid before sessions. Details are discussed during the intro call.</p>
</div>
<div class="faq-item">
<h3>Cancellation policy?</h3>
<p>Reasonable notice is appreciated. Late cancellations may still be charged.</p>
</div>
</div>
</section>
<!-- BOOKING -->
<section id="booking">
<div class="section-header">
<div class="section-kicker">Ready to begin?</div>
<h2 class="section-title">Schedule a free 20-minute intro call</h2>
<p class="section-subtitle">
We’ll discuss the course, goals, challenges, and availability — then decide together whether tutoring is a good fit.
</p>
</div>
<div class="booking-card">
<div>
<h3 style="font-size:1.05rem;margin-bottom:0.4rem;">Step 1: Schedule</h3>
<p style="font-size:0.9rem;color:var(--text-muted);">
Choose a weekday time that works for you. You'll receive a confirmation and calendar invite automatically.
</p>
<div class="booking-pill-row">
<div class="booking-pill">Online only</div>
<div class="booking-pill">Weekdays</div>
<div class="booking-pill">AP Calc, Precalc, Algebra 2</div>
</div>
</div>
<div>
<div class="booking-form-note">
Use the button below to book a free 20-minute intro call. You can also text or email if you prefer.
</div>
<div class="booking-buttons">
<!-- Primary: TidyCal booking -->
<a
href="https://tidycal.com/carlmarquis/free-20-minute-intro-call-math-tutoring"
target="_blank"
rel="noopener noreferrer"
class="primary"
>
Open scheduling page
</a>
<!-- Secondary: Text me -->
<a href="sms:+17036771696">
Text me at (703) 677-1696
</a>
<!-- Tertiary: Email -->
<a href="mailto:tutoring@carlmarquis.com">
Or email tutoring@carlmarquis.com
</a>
</div>
</div>
</div>
</section>
<footer>
<div>© <span id="year"></span> Carl Marquis Tutoring</div>
<div>
Contact: <a href="mailto:tutoring@carlmarquis.com">tutoring@carlmarquis.com</a>
</div>
</footer>
</div>
</main>
</div>
<!-- Success banner (shown when ?booked=1 is in the URL) -->
<div id="booking-success-banner" style="
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
max-width: 280px;
padding: 0.85rem 1rem;
background: rgba(22, 163, 74, 0.95);
color: #ecfdf5;
font-size: 0.85rem;
border-radius: 12px;
box-shadow: 0 18px 40px rgba(22, 163, 74, 0.6);
display: none;
z-index: 9999;
">
<strong style="display:block;font-size:0.9rem;margin-bottom:0.15rem;">Intro call booked 🎉</strong>
<span>Your free 20-minute intro call is scheduled. Check your email for the calendar invite.</span>
</div>
<script>
// Set current year in footer
document.getElementById("year").textContent = new Date().getFullYear();
// Show success banner if URL contains ?booked=1
try {
const params = new URLSearchParams(window.location.search);
const booked = params.get("booked");
if (booked === "1") {
const banner = document.getElementById("booking-success-banner");
if (banner) {
banner.style.display = "block";
setTimeout(() => {
banner.style.opacity = "1";
}, 50);
// Auto-hide after 8 seconds
setTimeout(() => {
banner.style.transition = "opacity 0.4s ease";
banner.style.opacity = "0";
setTimeout(() => {
banner.style.display = "none";
}, 400);
}, 8000);
}
}
} catch (e) {
// fail silently if URLSearchParams isn't available
}
</script>
</body>
</html>