355 lines
13 KiB
HTML
355 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Pride and Prejudice | Jane Austen</title>
|
|
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="nav-brand">P&P</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#characters">Characters</a></li>
|
|
<li><a href="#themes">Themes</a></li>
|
|
<li><a href="#quotes">Quotes</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-bg">
|
|
<div class="hero-pattern"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<p class="hero-subtitle">A Novel by</p>
|
|
<h1 class="hero-title">
|
|
<span class="title-line">Pride</span>
|
|
<span class="title-ampersand">&</span>
|
|
<span class="title-line">Prejudice</span>
|
|
</h1>
|
|
<p class="hero-author">Jane Austen</p>
|
|
<p class="hero-year">1813</p>
|
|
<div class="hero-divider">
|
|
<span class="divider-line"></span>
|
|
<span class="divider-ornament">❦</span>
|
|
<span class="divider-line"></span>
|
|
</div>
|
|
<p class="hero-tagline">"It is a truth universally acknowledged..."</p>
|
|
<a href="#about" class="hero-cta">
|
|
<span>Discover the Story</span>
|
|
<svg
|
|
class="cta-arrow"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path d="M12 5v14M5 12l7 7 7-7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="hero-scroll-indicator">
|
|
<div class="scroll-line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-number">01</span>
|
|
<h2 class="section-title">The Novel</h2>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p class="about-lead">
|
|
Set in rural England in the early 19th century,
|
|
<em>Pride and Prejudice</em> tells the story of the Bennet family
|
|
and their five unmarried daughters.
|
|
</p>
|
|
<p>
|
|
When the wealthy and eligible Mr. Bingley rents a nearby estate,
|
|
Mrs. Bennet sees an opportunity to marry off her eldest daughter,
|
|
Jane. At a ball, Jane forms an attachment to Mr. Bingley, while
|
|
her sister Elizabeth meets his friend, the proud Mr. Darcy.
|
|
</p>
|
|
<p>
|
|
What follows is a masterful exploration of manners, morality,
|
|
education, and marriage in the society of the landed gentry of
|
|
early 19th-century England.
|
|
</p>
|
|
</div>
|
|
<div class="about-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number">61</span>
|
|
<span class="stat-label">Chapters</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">122K</span>
|
|
<span class="stat-label">Words</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">20M+</span>
|
|
<span class="stat-label">Copies Sold</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Characters Section -->
|
|
<section id="characters" class="characters">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-number">02</span>
|
|
<h2 class="section-title">The Characters</h2>
|
|
</div>
|
|
<div class="characters-grid">
|
|
<div class="character-card featured">
|
|
<div class="character-portrait elizabeth"></div>
|
|
<div class="character-info">
|
|
<h3>Elizabeth Bennet</h3>
|
|
<p class="character-role">The Protagonist</p>
|
|
<p class="character-desc">
|
|
Intelligent, witty, and independent, Elizabeth navigates
|
|
society's expectations while staying true to her principles.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="character-card featured">
|
|
<div class="character-portrait darcy"></div>
|
|
<div class="character-info">
|
|
<h3>Fitzwilliam Darcy</h3>
|
|
<p class="character-role">The Romantic Lead</p>
|
|
<p class="character-desc">
|
|
Wealthy, reserved, and initially perceived as arrogant, Darcy's
|
|
true character is revealed through his actions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="character-card">
|
|
<div class="character-portrait jane"></div>
|
|
<div class="character-info">
|
|
<h3>Jane Bennet</h3>
|
|
<p class="character-role">The Eldest Sister</p>
|
|
<p class="character-desc">
|
|
Beautiful, gentle, and always sees the best in people.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="character-card">
|
|
<div class="character-portrait bingley"></div>
|
|
<div class="character-info">
|
|
<h3>Charles Bingley</h3>
|
|
<p class="character-role">The Amiable Gentleman</p>
|
|
<p class="character-desc">
|
|
Wealthy, good-natured, and easily influenced by his friends.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="character-card">
|
|
<div class="character-portrait lydia"></div>
|
|
<div class="character-info">
|
|
<h3>Lydia Bennet</h3>
|
|
<p class="character-role">The Youngest Sister</p>
|
|
<p class="character-desc">
|
|
Frivolous, flirtatious, and impulsive, causing family scandal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="character-card">
|
|
<div class="character-portrait wickham"></div>
|
|
<div class="character-info">
|
|
<h3>George Wickham</h3>
|
|
<p class="character-role">The Antagonist</p>
|
|
<p class="character-desc">
|
|
Charming on the surface but deceitful and manipulative.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Themes Section -->
|
|
<section id="themes" class="themes">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-number">03</span>
|
|
<h2 class="section-title">Themes</h2>
|
|
</div>
|
|
<div class="themes-content">
|
|
<div class="theme-item">
|
|
<div class="theme-icon">
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"
|
|
/>
|
|
<path d="M24 12v20M16 24h16" />
|
|
</svg>
|
|
</div>
|
|
<h3>Pride</h3>
|
|
<p>
|
|
Darcy's pride in his social position initially prevents him from
|
|
acknowledging his feelings for Elizabeth, while Elizabeth's pride
|
|
in her discernment blinds her to Darcy's true character.
|
|
</p>
|
|
</div>
|
|
<div class="theme-item">
|
|
<div class="theme-icon">
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path d="M24 4l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Prejudice</h3>
|
|
<p>
|
|
Elizabeth's prejudice against Darcy, formed from their first
|
|
meeting and Wickham's lies, nearly costs her happiness. The novel
|
|
shows how first impressions can be misleading.
|
|
</p>
|
|
</div>
|
|
<div class="theme-item">
|
|
<div class="theme-icon">
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"
|
|
/>
|
|
<path
|
|
d="M14 24c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3>Marriage</h3>
|
|
<p>
|
|
The novel examines marriage from multiple perspectives: for love,
|
|
for security, for social advancement, and the rare ideal of
|
|
marrying for both love and compatibility.
|
|
</p>
|
|
</div>
|
|
<div class="theme-item">
|
|
<div class="theme-icon">
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path d="M12 12h24v24H12z" />
|
|
<path d="M12 12l24 24M36 12L12 36" />
|
|
</svg>
|
|
</div>
|
|
<h3>Class</h3>
|
|
<p>
|
|
The rigid class structure of Regency England shapes every
|
|
interaction, from who may marry whom to how characters are judged
|
|
by their connections and fortune.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Famous Quotes Section -->
|
|
<section id="quotes" class="quotes">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-number">04</span>
|
|
<h2 class="section-title">Memorable Quotes</h2>
|
|
</div>
|
|
<div class="quotes-slider">
|
|
<div class="quote-card active">
|
|
<span class="quote-mark">"</span>
|
|
<blockquote>
|
|
It is a truth universally acknowledged, that a single man in
|
|
possession of a good fortune, must be in want of a wife.
|
|
</blockquote>
|
|
<cite>— Opening Line</cite>
|
|
</div>
|
|
<div class="quote-card">
|
|
<span class="quote-mark">"</span>
|
|
<blockquote>
|
|
I could easily forgive his pride, if he had not mortified mine.
|
|
</blockquote>
|
|
<cite>— Elizabeth Bennet</cite>
|
|
</div>
|
|
<div class="quote-card">
|
|
<span class="quote-mark">"</span>
|
|
<blockquote>
|
|
You have bewitched me, body and soul, and I love, I love, I love
|
|
you.
|
|
</blockquote>
|
|
<cite>— Mr. Darcy</cite>
|
|
</div>
|
|
<div class="quote-card">
|
|
<span class="quote-mark">"</span>
|
|
<blockquote>Till this moment I never knew myself.</blockquote>
|
|
<cite>— Elizabeth Bennet</cite>
|
|
</div>
|
|
<div class="quote-card">
|
|
<span class="quote-mark">"</span>
|
|
<blockquote>My good opinion once lost, is lost forever.</blockquote>
|
|
<cite>— Mr. Darcy</cite>
|
|
</div>
|
|
</div>
|
|
<div class="quotes-nav">
|
|
<button class="quote-dot active" data-index="0"></button>
|
|
<button class="quote-dot" data-index="1"></button>
|
|
<button class="quote-dot" data-index="2"></button>
|
|
<button class="quote-dot" data-index="3"></button>
|
|
<button class="quote-dot" data-index="4"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<span class="footer-logo">P&P</span>
|
|
<p>A timeless masterpiece of English literature</p>
|
|
</div>
|
|
<div class="footer-divider">
|
|
<span class="divider-ornament">❦</span>
|
|
</div>
|
|
<p class="footer-credit">Based on the 1813 novel by Jane Austen</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="https://deerflow.tech"
|
|
target="_blank"
|
|
class="deerflow-signature"
|
|
>
|
|
<span class="signature-text">Created By Deerflow</span>
|
|
<span class="signature-icon">✦</span>
|
|
</a>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|