mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-19 12:24:46 +08:00
265 lines
13 KiB
HTML
265 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>
|