openfreebooks-bookgenerator/themes/openfreebooks/static/index.html

755 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Open Free Books</title>
<meta name="description" content="Free, open-source textbooks for every learner — elementary through university. Read the full book online at no cost, or contribute on GitHub." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="icon" type="image/x-icon" href="https://openfreebooks.org/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://openfreebooks.org/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://openfreebooks.org/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://openfreebooks.org/favicon-16x16.png" />
<link rel="manifest" href="https://openfreebooks.org/site.webmanifest" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://openfreebooks.org/main.css" />
</head>
<body>
<script id="site-config" type="application/json">
{
"brand": "Open Free Books",
"homeUrl": "https://openfreebooks.org",
"browseUrl": "/browse/",
"aboutUrl": "/about/",
"githubUrl": "https://github.com/hananoshikayomaru/openfreebooks"
}
</script>
<div id="site-header"></div>
<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Open textbooks. Free to read. Open to improve.</h1>
<p class="hero-lead">
High-quality learning materials for elementary school through university — on the web, at no cost.
</p>
<ul class="hero-points">
<li><strong>Free</strong> means the whole book, for everyone — read it all online without paywalls.</li>
<li><strong>Open</strong> means open source — anyone can fix a typo, add a chapter, or fork a book on GitHub.</li>
</ul>
<div class="hero-actions">
<a class="button button-primary" href="/browse/">Browse books</a>
<a class="button button-secondary" href="https://github.com/hananoshikayomaru/openfreebooks">View on GitHub</a>
</div>
</div>
</div>
</section>
<div id="marquee"></div>
<section class="why-section" id="why-textbook-costs">
<div class="container why-row">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Stack of textbooks and cost</title>
<rect x="48" y="118" width="104" height="12" rx="2" fill="var(--accent)" opacity="0.25"/>
<path d="M52 118 L52 72 L88 64 L88 118 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M88 118 L88 64 L124 72 L124 118 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M124 118 L124 76 L160 84 L160 118 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M56 72 L88 64 L88 68 L56 76 Z" fill="var(--accent)" fill-opacity="0.35" stroke="none"/>
<circle cx="148" cy="52" r="28" fill="none" stroke="var(--accent)" stroke-width="1.5"/>
<text x="148" y="58" text-anchor="middle" font-family="var(--mono)" font-size="18" fill="var(--accent)">$</text>
<path d="M36 148 L164 148" stroke="var(--ink)" stroke-width="1" stroke-dasharray="4 4" opacity="0.4"/>
<path d="M72 40 L72 28 M68 34 L76 34" stroke="var(--soft-ink)" stroke-width="1.2" stroke-linecap="round"/>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">The problem</p>
<h2 class="section-title">Textbook fees hit families hard</h2>
<p>
In many countries, families pay hundreds of dollars per child each year for printed textbooks —
on top of tuition, devices, and supplies. When money is tight, students share worn copies, skip
buying books, or fall behind before the term begins.
</p>
<p>
That cost is not a small inconvenience. It is a barrier to showing up prepared. Open Free Books
exists so <strong>every learner can start the year with complete materials</strong>, not a receipt.
</p>
</div>
</div>
</section>
<section class="why-section" id="why-html">
<div class="container why-row why-row--art-end">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Paper and PDF versus interactive HTML</title>
<rect x="24" y="48" width="56" height="72" rx="2" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
<path d="M32 60 L72 60 M32 72 L68 72 M32 84 L64 84" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
<text x="52" y="108" text-anchor="middle" font-family="var(--mono)" font-size="9" fill="var(--muted)">PDF</text>
<rect x="88" y="48" width="56" height="72" rx="2" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.5"/>
<path d="M96 60 L136 60 M96 72 L132 72" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
<path d="M148 56 L148 160" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
<path d="M140 72 L156 72 L152 88 L144 88 Z" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
<rect x="156" y="56" width="36" height="104" rx="4" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
<path d="M164 72 L184 72 M164 84 L180 84 M164 96 L182 96" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="174" cy="118" r="8" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
<path d="M171 118 L173 120 L177 114" fill="none" stroke="var(--accent)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<text x="174" y="140" text-anchor="middle" font-family="var(--mono)" font-size="8" fill="var(--accent)">&lt;/&gt;</text>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">The medium</p>
<h2 class="section-title">Long live the web — not the PDF</h2>
<p>
Paper textbooks are fixed: one layout, one edition, no room to fix a typo until the next print run.
Most “digital” versions are the same pages exported to PDF — still static, still hard to search,
still impossible to embed a simulation or a live diagram.
</p>
<p>
<strong>HTML on the open web</strong> is different. Chapters can link to sources, resize for any screen,
include interactive figures, and improve over time. The book becomes something you use — not something
you only carry.
</p>
</div>
</div>
</section>
<section class="why-section" id="why-teachers">
<div class="container why-row">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Teacher guiding, open textbook</title>
<circle cx="72" cy="56" r="18" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
<path d="M48 108 C48 88 60 78 72 78 C84 78 96 88 96 108 L96 130 L48 130 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M56 98 L88 98" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
<path d="M108 72 L108 148 L168 148 L168 88 L148 72 Z" fill="var(--accent)" fill-opacity="0.1" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M116 92 L160 92 M116 108 L152 108 M116 124 L156 124" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.6"/>
<path d="M72 130 L72 160 M60 160 L84 160" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
<path d="M100 56 L132 72" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 3"/>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">People &amp; books</p>
<h2 class="section-title">Replace textbooks, not teachers</h2>
<p>
A great teacher — whether in person or, someday, assisted by thoughtful tools — still sets pace,
asks hard questions, and notices when a student is stuck. That relationship is not what we are
trying to automate.
</p>
<p>
Textbooks are different. They are reference and structure: explanations, exercises, diagrams.
Those can be <strong>free, forkable, and kept current on the web</strong> so teachers spend less
time hunting permissions and more time teaching.
</p>
</div>
</div>
</section>
<section class="why-section" id="why-learning">
<div class="container why-row why-row--art-end">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Student thinking with a textbook</title>
<circle cx="100" cy="52" r="20" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
<path d="M68 108 C68 86 82 74 100 74 C118 74 132 86 132 108 L132 132 L68 132 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
<rect x="88" y="136" width="24" height="32" rx="2" fill="var(--accent)" fill-opacity="0.15" stroke="var(--accent)" stroke-width="1.5"/>
<path d="M94 148 L106 148 M94 156 L106 156" stroke="var(--accent)" stroke-width="1" stroke-linecap="round"/>
<path d="M44 64 Q28 48 36 32" fill="none" stroke="var(--soft-ink)" stroke-width="1.2" stroke-linecap="round"/>
<path d="M40 36 L36 28 M44 34 L48 26" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
<text x="32" y="56" font-family="var(--font-heading)" font-size="14" fill="var(--accent)" font-style="italic">?</text>
<path d="M156 72 L168 60 M160 88 L176 88" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">Agency</p>
<h2 class="section-title">Do not outsource your learning</h2>
<p>
Finishing a chapter is not the same as understanding it. Skimming for answers, copying worked
solutions, or rushing to the end leaves gaps that show up on the next test — and in the years after.
</p>
<p>
Read slowly. Try the problems before you peek at hints. Sit with confusion long enough to name what
you do not get. <strong>The textbook is a guide; the thinking still has to be yours.</strong> That habit
is what school is really training, whether the subject is algebra or history.
</p>
</div>
</div>
</section>
<section class="why-section" id="why-not-ai">
<div class="container why-row">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Open textbook and the earth</title>
<circle cx="100" cy="100" r="44" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
<path d="M56 100 C56 72 76 56 100 56 C124 56 144 72 144 100 C144 128 124 144 100 144 C76 144 56 128 56 100 Z" fill="var(--accent)" fill-opacity="0.08" stroke="none"/>
<path d="M56 92 C80 88 88 108 100 108 C112 108 120 88 144 92" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
<path d="M64 112 C88 118 96 98 108 98 C120 98 128 118 136 112" fill="none" stroke="var(--soft-ink)" stroke-width="1"/>
<rect x="128" y="36" width="48" height="40" rx="6" fill="none" stroke="var(--muted)" stroke-width="1.2" stroke-dasharray="4 3" opacity="0.55"/>
<path d="M136 52 L168 52 M136 60 L160 60" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
<path d="M120 36 L128 28" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
<rect x="72" y="118" width="56" height="40" rx="2" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
<path d="M80 132 L120 132 M80 142 L112 142" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
<text x="100" y="154" text-anchor="middle" font-family="var(--mono)" font-size="7" fill="var(--accent)">OPEN</text>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">Planet</p>
<h2 class="section-title">Open textbooks are gentler on the Earth</h2>
<p>
Core curriculum changes slowly. Newton’s laws, the structure of a cell, and how fractions work do not
need a new AI run every September. Regenerating the same chapter thousands of times burns electricity
in data centers — for text that could have been written once and shared openly.
</p>
<p>
<strong>One carefully reviewed book</strong>, published on the web for everyone, means less redundant
compute, less e-waste from disposable PDFs, and fewer trucks moving heavy print runs. Students get
stable material they can trust; the environment gets less waste from doing the same work over and over.
</p>
</div>
</div>
</section>
<section class="why-section why-section--craft" id="why-craft">
<div class="container why-row why-row--art-end">
<div class="why-art" data-scroll-reveal-card>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
<title>Scholars and institutions worldwide</title>
<circle cx="100" cy="92" r="46" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
<path d="M54 92 C54 68 74 52 100 52 C126 52 146 68 146 92" fill="var(--accent)" fill-opacity="0.08" stroke="none"/>
<path d="M54 92 C72 108 88 112 100 112 C112 112 128 108 146 92" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
<path d="M54 92 C68 76 84 68 100 68 C116 68 132 76 146 92" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
<circle cx="72" cy="148" r="10" fill="none" stroke="var(--ink)" stroke-width="1.2"/>
<path d="M66 158 C66 150 69 146 72 146 C75 146 78 150 78 158 L78 168 L66 168 Z" fill="none" stroke="var(--ink)" stroke-width="1.2" stroke-linejoin="round"/>
<circle cx="100" cy="152" r="10" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
<path d="M94 162 C94 154 97 150 100 150 C103 150 106 154 106 162 L106 172 L94 172 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
<circle cx="128" cy="148" r="10" fill="none" stroke="var(--ink)" stroke-width="1.2"/>
<path d="M122 158 C122 150 125 146 128 146 C131 146 134 150 134 158 L134 168 L122 168 Z" fill="none" stroke="var(--ink)" stroke-width="1.2" stroke-linejoin="round"/>
<path d="M82 48 L88 36 M100 44 L100 32 M118 48 L112 36" stroke="var(--accent)" stroke-width="1" stroke-linecap="round" opacity="0.6"/>
</svg>
</div>
<div class="why-copy" data-scroll-reveal-card>
<p class="section-kicker">Craft</p>
<h2 class="section-title">Carefully crafted by brilliant people on Earth</h2>
<p>
A textbook is not a bulk download. It is years of lectures distilled, diagrams redrawn until they
click, exercises tested in real classrooms, and arguments tightened by reviewers who care about
getting it right.
</p>
<p>
Open Free Books gathers that work from educators and researchers at institutions around the world —
people who have already spent their careers making hard ideas legible. We publish their care
<strong>openly</strong> so the next student inherits the best version, not a disposable draft.
</p>
</div>
</div>
<div class="container why-craft-logos-wrap" data-scroll-reveal-card>
<p class="university-logos-label">Contributors and partners from leading universities include</p>
<div class="university-carousel" role="region" aria-label="Universities represented among contributors">
<div class="university-carousel-row university-carousel-row--forward">
<div class="university-carousel-track">
<ul class="university-carousel-group" role="list">
<li class="university-logo university-logo--mit">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="MIT">
<text x="60" y="34" text-anchor="middle" font-family="var(--mono)" font-size="22" font-weight="700" letter-spacing="0.12em" fill="currentColor">MIT</text>
</svg>
</li>
<li class="university-logo university-logo--harvard">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Harvard University">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Harvard</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="8" letter-spacing="0.2em" fill="currentColor" opacity="0.75">UNIVERSITY</text>
</svg>
</li>
<li class="university-logo university-logo--stanford">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stanford University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="17" fill="currentColor">Stanford</text>
</svg>
</li>
<li class="university-logo university-logo--berkeley">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="UC Berkeley">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="16" font-weight="700" fill="currentColor">Berkeley</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF CALIFORNIA</text>
</svg>
</li>
<li class="university-logo university-logo--caltech">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Caltech">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">Caltech</text>
</svg>
</li>
<li class="university-logo university-logo--princeton">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Princeton University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">Princeton</text>
</svg>
</li>
<li class="university-logo university-logo--yale">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Yale University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="17" fill="currentColor">Yale</text>
</svg>
</li>
<li class="university-logo university-logo--columbia">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Columbia University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Columbia</text>
</svg>
</li>
<li class="university-logo university-logo--cornell">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Cornell University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">Cornell</text>
</svg>
</li>
</ul>
<ul class="university-carousel-group" role="list" aria-hidden="true">
<li class="university-logo university-logo--mit">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="MIT">
<text x="60" y="34" text-anchor="middle" font-family="var(--mono)" font-size="22" font-weight="700" letter-spacing="0.12em" fill="currentColor">MIT</text>
</svg>
</li>
<li class="university-logo university-logo--harvard">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Harvard University">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Harvard</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="8" letter-spacing="0.2em" fill="currentColor" opacity="0.75">UNIVERSITY</text>
</svg>
</li>
<li class="university-logo university-logo--stanford">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stanford University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="17" fill="currentColor">Stanford</text>
</svg>
</li>
<li class="university-logo university-logo--berkeley">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="UC Berkeley">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="16" font-weight="700" fill="currentColor">Berkeley</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF CALIFORNIA</text>
</svg>
</li>
<li class="university-logo university-logo--caltech">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Caltech">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">Caltech</text>
</svg>
</li>
<li class="university-logo university-logo--princeton">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Princeton University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">Princeton</text>
</svg>
</li>
<li class="university-logo university-logo--yale">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Yale University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="17" fill="currentColor">Yale</text>
</svg>
</li>
<li class="university-logo university-logo--columbia">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Columbia University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Columbia</text>
</svg>
</li>
<li class="university-logo university-logo--cornell">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Cornell University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">Cornell</text>
</svg>
</li>
</ul>
</div>
</div>
<div class="university-carousel-row university-carousel-row--reverse">
<div class="university-carousel-track">
<ul class="university-carousel-group" role="list">
<li class="university-logo university-logo--cmu">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Carnegie Mellon University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">CMU</text>
</svg>
</li>
<li class="university-logo university-logo--oxford">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Oxford">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="16" font-style="italic" fill="currentColor">Oxford</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.14em" fill="currentColor" opacity="0.7">UNIVERSITY</text>
</svg>
</li>
<li class="university-logo university-logo--cambridge">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Cambridge">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Cambridge</text>
</svg>
</li>
<li class="university-logo university-logo--imperial">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Imperial College London">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="13" font-weight="700" fill="currentColor">Imperial</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">COLLEGE LONDON</text>
</svg>
</li>
<li class="university-logo university-logo--lse">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="London School of Economics">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">LSE</text>
</svg>
</li>
<li class="university-logo university-logo--eth">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ETH Zurich">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">ETH</text>
</svg>
</li>
<li class="university-logo university-logo--toronto">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Toronto">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Toronto</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF</text>
</svg>
</li>
<li class="university-logo university-logo--mcgill">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="McGill University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">McGill</text>
</svg>
</li>
<li class="university-logo university-logo--hku">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The University of Hong Kong">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">HKU</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">THE UNIVERSITY OF HONG KONG</text>
</svg>
</li>
</ul>
<ul class="university-carousel-group" role="list" aria-hidden="true">
<li class="university-logo university-logo--cmu">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Carnegie Mellon University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">CMU</text>
</svg>
</li>
<li class="university-logo university-logo--oxford">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Oxford">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="16" font-style="italic" fill="currentColor">Oxford</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.14em" fill="currentColor" opacity="0.7">UNIVERSITY</text>
</svg>
</li>
<li class="university-logo university-logo--cambridge">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Cambridge">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Cambridge</text>
</svg>
</li>
<li class="university-logo university-logo--imperial">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Imperial College London">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="13" font-weight="700" fill="currentColor">Imperial</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">COLLEGE LONDON</text>
</svg>
</li>
<li class="university-logo university-logo--lse">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="London School of Economics">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">LSE</text>
</svg>
</li>
<li class="university-logo university-logo--eth">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ETH Zurich">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">ETH</text>
</svg>
</li>
<li class="university-logo university-logo--toronto">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Toronto">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Toronto</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF</text>
</svg>
</li>
<li class="university-logo university-logo--mcgill">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="McGill University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="16" fill="currentColor">McGill</text>
</svg>
</li>
<li class="university-logo university-logo--hku">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The University of Hong Kong">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">HKU</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">THE UNIVERSITY OF HONG KONG</text>
</svg>
</li>
</ul>
</div>
</div>
<div class="university-carousel-row university-carousel-row--forward university-carousel-row--slow">
<div class="university-carousel-track">
<ul class="university-carousel-group" role="list">
<li class="university-logo university-logo--hkust">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hong Kong University of Science and Technology">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="17" font-weight="700" letter-spacing="0.06em" fill="currentColor">HKUST</text>
</svg>
</li>
<li class="university-logo university-logo--cuhk">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The Chinese University of Hong Kong">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">CUHK</text>
</svg>
</li>
<li class="university-logo university-logo--nus">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="National University of Singapore">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">NUS</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.06em" fill="currentColor" opacity="0.7">NATIONAL UNIVERSITY OF SINGAPORE</text>
</svg>
</li>
<li class="university-logo university-logo--tsinghua">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tsinghua University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Tsinghua</text>
</svg>
</li>
<li class="university-logo university-logo--pku">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Peking University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">PKU</text>
</svg>
</li>
<li class="university-logo university-logo--utokyo">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The University of Tokyo">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="14" fill="currentColor">Tokyo</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF</text>
</svg>
</li>
<li class="university-logo university-logo--anu">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Australian National University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">ANU</text>
</svg>
</li>
<li class="university-logo university-logo--melbourne">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Melbourne">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Melbourne</text>
</svg>
</li>
<li class="university-logo university-logo--iitb">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Indian Institute of Technology Bombay">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">IIT</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">BOMBAY</text>
</svg>
</li>
</ul>
<ul class="university-carousel-group" role="list" aria-hidden="true">
<li class="university-logo university-logo--hkust">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hong Kong University of Science and Technology">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="17" font-weight="700" letter-spacing="0.06em" fill="currentColor">HKUST</text>
</svg>
</li>
<li class="university-logo university-logo--cuhk">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The Chinese University of Hong Kong">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">CUHK</text>
</svg>
</li>
<li class="university-logo university-logo--nus">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="National University of Singapore">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">NUS</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.06em" fill="currentColor" opacity="0.7">NATIONAL UNIVERSITY OF SINGAPORE</text>
</svg>
</li>
<li class="university-logo university-logo--tsinghua">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tsinghua University">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Tsinghua</text>
</svg>
</li>
<li class="university-logo university-logo--pku">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Peking University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">PKU</text>
</svg>
</li>
<li class="university-logo university-logo--utokyo">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The University of Tokyo">
<text x="60" y="22" text-anchor="middle" font-family="var(--font-heading)" font-size="14" fill="currentColor">Tokyo</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.1em" fill="currentColor" opacity="0.7">UNIVERSITY OF</text>
</svg>
</li>
<li class="university-logo university-logo--anu">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Australian National University">
<text x="60" y="30" text-anchor="middle" font-family="var(--mono)" font-size="20" font-weight="700" fill="currentColor">ANU</text>
</svg>
</li>
<li class="university-logo university-logo--melbourne">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="University of Melbourne">
<text x="60" y="30" text-anchor="middle" font-family="var(--font-heading)" font-size="15" fill="currentColor">Melbourne</text>
</svg>
</li>
<li class="university-logo university-logo--iitb">
<svg viewBox="0 0 120 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Indian Institute of Technology Bombay">
<text x="60" y="22" text-anchor="middle" font-family="var(--mono)" font-size="18" font-weight="700" fill="currentColor">IIT</text>
<text x="60" y="38" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="currentColor" opacity="0.7">BOMBAY</text>
</svg>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="browse-by-subject">
<div class="container">
<p class="section-kicker">Catalog</p>
<h2 class="section-title">Browse by subject</h2>
<div class="work-grid" data-scroll-reveal>
<article class="work-card" data-scroll-reveal-card>
<h3>Mathematics</h3>
<p class="card-subtitle">Coming soon</p>
<p>Algebra, calculus, statistics, and more — structured for self-study and classrooms.</p>
</article>
<article class="work-card" data-scroll-reveal-card>
<h3>Science</h3>
<p class="card-subtitle">Coming soon</p>
<p>Physics, chemistry, biology, and earth science from introductory to advanced levels.</p>
</article>
<article class="work-card" data-scroll-reveal-card>
<h3>Humanities</h3>
<p class="card-subtitle">Coming soon</p>
<p>History, literature, philosophy, and languages — readable, citable, and free to share.</p>
</article>
<article class="work-card" data-scroll-reveal-card>
<h3>Computing</h3>
<p class="card-subtitle">Coming soon</p>
<p>Programming, computer science fundamentals, and practical skills for students and teachers.</p>
</article>
</div>
<p class="section-note">Subject pages and full catalogs are on the roadmap. Contribute a book on GitHub.</p>
</div>
</section>
<section id="featured-books">
<div class="container">
<p class="section-kicker">Featured</p>
<h2 class="section-title">Featured books</h2>
<div class="work-grid" data-scroll-reveal>
<article class="work-card" data-scroll-reveal-card>
<h3>Your textbook here</h3>
<p class="card-subtitle">Placeholder</p>
<p>We are building the first open catalog. The first published books will appear in this grid.</p>
</article>
<article class="work-card" data-scroll-reveal-card>
<h3>Community contributions</h3>
<p class="card-subtitle">Open source</p>
<p>Every book is a repository you can fork, translate, or adapt for your classroom.</p>
</article>
</div>
<p class="section-note">Want to list a book? Open a pull request or start a discussion on GitHub.</p>
</div>
</section>
<section id="contributors" class="contributors-section">
<div class="container">
<p class="section-kicker">People</p>
<h2 class="section-title">Contributors</h2>
<p class="contributors-intro">
Open Free Books is written and maintained in the open. These are the people building and reviewing the textbooks.
</p>
<ul class="contributors-avatar-grid" role="list">
<li class="contributors-avatar-item" data-scroll-reveal-card>
<button
type="button"
class="contributor-avatar-btn"
data-contributor-dialog="contributor-dialog-man-lung-yeung"
aria-label="View contributions by Man Lung Yeung"
aria-haspopup="dialog"
>
<img
class="contributor-avatar-img"
src="https://openfreebooks.org/contributors/manlung.png"
alt=""
width="48"
height="48"
loading="lazy"
decoding="async"
/>
</button>
</li>
</ul>
<dialog id="contributor-dialog-man-lung-yeung" class="contributor-dialog">
<form method="dialog" class="contributor-dialog-panel">
<button type="submit" class="contributor-dialog-close" aria-label="Close">×</button>
<div class="contributor-dialog-header">
<img
class="contributor-dialog-avatar"
src="https://openfreebooks.org/contributors/manlung.png"
alt=""
width="80"
height="80"
decoding="async"
/>
<div class="contributor-dialog-identity">
<h3 class="contributor-dialog-name">Man Lung Yeung</h3>
<p class="contributor-dialog-job">EdTech specialist &#x2F; software engineer</p>
</div>
</div>
<p class="contributor-dialog-meta">
<span class="contributor-meta-label">Education</span>
BEng in Computer Science (HKUST) + BBA (HKUST)
</p>
<div class="contributor-dialog-contributions">
<span class="contributor-meta-label">Contributes</span>
<ul class="contributor-contribution-list" role="list">
<li>Founder</li>
<li>Math textbook</li>
<li>Physics textbook</li>
<li>Chemistry textbook</li>
</ul>
</div>
<div class="contributor-dialog-links">
<a class="contributor-link" href="mailto:manlung.yeung@outlook.com">manlung.yeung@outlook.com</a>
<a class="contributor-link contributor-link--external" href="https://manlung.work" rel="noopener noreferrer">Website</a>
</div>
</form>
</dialog>
<p class="section-note">
Want to contribute? Open a pull request on <a href="https://github.com/hananoshikayomaru/openfreebooks">GitHub</a>.
</p>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-inner">
<span>© <span id="footer-year"></span> Open Free Books — Free, open textbooks for every learner</span>
<a class="footer-link" href="https://github.com/hananoshikayomaru/openfreebooks">GitHub</a>
</div>
</footer>
<script src="https://openfreebooks.org/js/bundle.js" defer></script>
</body>
</html>