Paperhood - Professional Print on Demand Landing Page

Live Link : https://paperhoodbytejas.netlify.app

Project Overview

A fully responsive, professionally designed landing page for Paperhood — a premium print-on-demand book service. Features a live open book animation with automatic typing text that loops through inspirational phrases.

Key Feature: Live Book Animation

• Open Book Design - Realistic 3D open book with left and right pages
• Typing Animation - Text automatically types and deletes in a continuous loop
• Multiple Phrases - Cycles through 8 different inspirational messages
• Floating Effect - Gentle floating animation for the entire book

All Requirements Implemented

Core Sections (10/10)

1. ✅ Hero Section - Live open book + typing animation
2. ✅ Features Section - 6 cards with icons
3. ✅ How It Works - 4 steps
4. ✅ Pricing Section - 3 cards (recommended highlighted)
5. ✅ CTA Section - Strong message + button
6. ✅ Testimonials - 3 cards with ratings
7. ✅ FAQ Accordion - 6 questions
8. ✅ Contact Form - With validation
9. ✅ Footer - Links + social icons
10. ✅ Navbar - Sticky + hamburger menu

Functional Requirements

• ✅ Mobile menu toggle (JavaScript)
• ✅ FAQ accordion (expand/collapse)
• ✅ Form validation (name, email, message)
• ✅ Smooth scrolling
• ✅ Sticky navbar

Design Requirements

• ✅ Clean, modern UI
• ✅ Proper spacing and typography
• ✅ Fully responsive
• ✅ Font Awesome icons (no emojis)
• ✅ Professional color scheme

Tech Stack

• HTML5 (Semantic)
• CSS3 (Flexbox, Grid, 3D Transforms)
• Vanilla JavaScript (ES6+)
• Font Awesome 6
• Google Fonts

Folder Structure

paperhood/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── README.md

How to Run

1. Create the folder structure above
2. Copy each file's content into the respective files
3. Open index.html in any modern browser

Live Book Animation Details

The hero section features a custom-built open book with:

• Left Page: Displays typing animation with phrases like:

  • "Once upon a time..."
  • "In a world of words..."
  • "The journey begins..."
  • "Print your story today..."
  • "From manuscript to masterpiece..."
  • "Your voice matters..."
  • "Create something beautiful..."
  • "Share your passion..."

• Right Page: Shows static content with icon and features

• Animation Loop: Types → Pauses → Deletes → Next phrase → Repeats

Responsive Breakpoints

• Desktop: > 968px
• Tablet: 768px - 968px
• Mobile: < 768px (book scales down)

Color Palette

• Primary: #2B5E3B (Forest Green)
• Accent: #C28A3B (Warm Gold)
• Background: #FAF8F5 (Warm White)
• Book Pages: Cream/Off-white gradients

JavaScript Features

1. Typing Animation - Custom typewriter effect with loop
2. Mobile Menu - Toggle with icon change
3. FAQ Accordion - Smooth expand/collapse
4. Form Validation - Real-time error messages
5. Smooth Scroll - All navigation links
6. Intersection Observer - Scroll-triggered fade-ins
7. Newsletter Signup - Email validation

---

Created for: Paperhood Print on Demand
All requirements: 100% Complete
Special Feature: Live open book with automatic typing text loop