Live Example

Here’s a working example of the Letter with Polaroid Picture layout. Hover over the Polaroid to see the interactive effect!

What This Skill Does

Creates an old-timey letter page with authentic Polaroid-style photo(s). Perfect for nostalgic content, personal stories, memories, or vintage-themed pages.

When to Use This

• Nostalgic content (childhood memories, vintage items, family stories)
• Personal letters or testimonials
• Product showcases with vintage aesthetic
• Memory pages or tribute pages
• Any content that benefits from warm, authentic, handwritten feel

Design Elements

Color Palette

Element	Color	Hex Code
Background (body)	Aged paper beige	#f5e6d3
Container	Cream/off-white	#fff9f0
Border	Light brown	#d4c4b0
Text (dark)	Dark brown ink	#2c1810
Text (body)	Medium brown	#3a2a1f
Accent	Warm brown	#8b7355

Typography

• Body text: 'Courier New', Courier, monospace (typewriter feel)
• Headers: 'Georgia', serif (classic elegance)
• Captions: 'Brush Script MT', cursive (handwritten)
• Body size: 16px
• Line height: 2 (double-spaced typewriter)

Container Structure

.container {
    max-width: 900px;
    background: #fff9f0;
    padding: 60px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid #d4c4b0;
}

Polaroid Photo Structure

Single Photo Layout

.polaroid-container {
    display: flex;
    justify-content: center;
    margin: 60px 0;
}

.polaroid {
    background: white;
    padding: 15px 15px 60px 15px;  /* Extra bottom for caption */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transform: rotate(-2deg);  /* Authentic tilt */
    max-width: 400px;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

Multiple Photos Layout (Grid)

.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
    margin: 60px 0;
}

.polaroid:nth-child(1) { transform: rotate(-2deg); }
.polaroid:nth-child(2) { transform: rotate(1deg); margin-top: 30px; }
.polaroid:nth-child(3) { transform: rotate(-1.5deg); margin-top: 15px; }

Photo Container

.polaroid-image {
    width: 100%;
    height: 280px;  /* or 350px for single photo */
    background: #e8e8e8;
    overflow: hidden;
}

.polaroid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Handwritten Caption

.polaroid-caption {
    font-family: 'Brush Script MT', cursive;
    font-size: 22px;
    color: #2c1810;
    text-align: center;
    margin-top: 20px;
}

Letter Formatting

Header

.letter-header {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 2px solid #8b7355;
    padding-bottom: 30px;
}

.letter-header h1 {
    font-family: 'Georgia', serif;
    font-size: 36px;
    color: #5c4033;
    letter-spacing: 2px;
}

.letter-header .subtitle {
    font-size: 18px;
    color: #8b7355;
    font-style: italic;
}

Body Text

.letter-body {
    font-size: 16px;
    line-height: 2;  /* Double-spaced typewriter feel */
    color: #3a2a1f;
    text-align: justify;  /* Classic letter formatting */
}

.letter-body p {
    margin-bottom: 25px;
    text-indent: 40px;  /* Indent all paragraphs */
}

.letter-body p:first-child {
    text-indent: 0;  /* Except the first one */
}

Signature

.signature {
    text-align: right;
    margin-top: 50px;
    font-style: italic;
    color: #5c4033;
}

HTML Structure

Single Photo Version

<div class="container">
    <div class="letter-header">
        <h1>Letters From The Past</h1>
        <p class="subtitle">Your Subtitle Here</p>
    </div>
    
    <div class="polaroid-container">
        <div class="polaroid">
            <div class="polaroid-image">
                <img src="your-image.jpg" alt="Description">
            </div>
            <div class="polaroid-caption">Your Caption</div>
        </div>
    </div>
    
    <div class="letter-body">
        <p>Dear Friend,</p>
        <p>Your letter content here...</p>
    </div>
    
    <div class="signature">
        <p>— Your Name</p>
    </div>
</div>

Usage Examples

Key Tips

1. Rotation is Key: The slight rotation (-2deg, 1deg, -1.5deg) makes Polaroids feel authentic
2. Extra Bottom Padding: 60px bottom padding creates the classic Polaroid caption space
3. Hover Effect: Straightening on hover adds interactivity
4. Text Indent: 40px indent on paragraphs creates typewriter letter feel
5. Justify Text: Makes the letter look more formal and authentic
6. Double Line Height: Line-height: 2 mimics double-spaced typewriter
7. Color Consistency: Stick to warm browns and creams for vintage feel
8. Font Choices: Courier for body, Georgia for headers, Brush Script for captions

Common Mistakes to Avoid