📚 The Lit Library

"Within pages, we vanish — and in their silence, rediscover who we are."

A vintage-inspired digital bookshelf built for readers who appreciate timeless literature, thoughtful design, and the quiet magic of books. The Lit Library is a fully responsive, feature-rich frontend project combining a love for reading with clean web development.

🔗 vandanacoder.github.io/The-Lit-Library

Repository: github.com/vandanacoder/The-Lit-Library

• Polished hero section with background image and animated intro text
• Featured Book of the Week section with cover, rating, and description
• Trending Books showcase with hover effects
• Book Category overview (Fiction, Non-Fiction, YA, Children's, eBooks)
• About Us and Contact snippets
• Fully revamped footer with logo, quick links, social icons, and scroll-to-top

• Live search — filter by title, author, or genre instantly as you type
• Genre filter buttons — Fiction, Fantasy, Romance, Mystery, Classics, Horror, Self Help, Poetry, Dystopian, Gothic, Philosophy
• Enhanced book cards with:
  • Cover image with hover zoom
  • Star ratings ★★★★★
  • Genre badge
  • Short description
  • Read More button → opens Book Details Modal
  • Add to Reading List button
  • ♡ Favorite heart icon

Clicking any book opens a beautiful modal showing:

• Book cover, title, author, genre badge
• Star rating
• Full description
• Famous quote from the book
• Why readers love this book
• Add to Reading List / Favorite buttons

• Add or remove books with one click
• Slide-out panel accessible from the navbar
• Persists across page refreshes via Local Storage

• Heart icon on every book card
• Toggle favorites on/off
• Saved in Local Storage — survives page refresh

• Toggle between light and dark with one click
• Dark palette uses warm browns, espresso, parchment, and gold — keeps the vintage feel
• Preference saved in Local Storage

• 25+ curated literary quotes
• Previous / Next / Random navigation
• Copy to clipboard button
• Share button (uses Web Share API on supported devices)
• Smooth fade-in/out animation between quotes

• Form validation with field-level error highlighting
• Success and error feedback messages
• Social media links (GitHub, LinkedIn, Email, Instagram, Goodreads)
• FAQ accordion — animated open/close
• Google Maps placeholder
• Back-to-top button

• Mission, Vision, Community cards
• Timeline of the project's development
• Fun facts about books and reading
• Curated reading experience philosophy

• Sticky navbar that shrinks on scroll
• Active page indicator on current link
• Animated hamburger menu for mobile
• Reading List panel toggle in the navbar
• Dark mode toggle in the navbar

• Scroll-triggered fade-in on all major sections
• Card hover lift and zoom
• Button ripple effect
• Quote container fade transition
• Modal scale-in animation
• Hamburger morph animation (☰ → ✕)

• Semantic HTML5 throughout (<main>, <nav>, <section>, <article>, <aside>, <footer>)
• aria-label, aria-current, aria-expanded, aria-live attributes
• :focus-visible focus rings for keyboard navigation
• alt text on all images
• role attributes on interactive components

The-Lit-Library/
│
├── index.html       # Homepage — hero, featured book, quotes, trending, categories
├── books.html       # Books page — search, filter, cards, modal
├── about.html       # About page — cards, timeline, fun facts
├── contact.html     # Contact page — form, FAQ, social links
├── style.css        # Single unified stylesheet (no duplicates)
├── script.js        # Single unified JavaScript file
└── README.md        # Project documentation

All CSS lives in one style.css. All JavaScript lives in one script.js. No external frameworks, no build tools.

Dark mode uses deep browns, warm parchment tones, and gold accents to maintain the vintage aesthetic.

• Headings: Cormorant Garamond (serif) — elegant, literary feel
• Body / UI: Inter (sans-serif) — clean, readable

Vandana — @vandanacoder

This project is open source and available under the MIT License.