Display animated invitation card

by dhavaljani

HTML

<div class="envelope-container">
        <div class="envelope">
            <div class="envelope-body">
                <div class="back-fold"></div>
                <div class="letter">
                    <div class="letter-content">
                        <h1>Reyansh's Janoi</h1>
                        <div class="rsvp-buttons">
                            <button class="rsvp-btn">Will attend</button>
                            <button class="rsvp-btn">Will not attend</button>
                        </div>
                        <div class="host-info">
                            <p>Hosted by</p>
                            <h2>Aniruddh and Shradha Jani</h2>
                        </div>
                        <div class="event-details">
                            <h3>Date</h3>
                            <p>Sunday, July 6</p>
                            <p>9:00PM CDT</p>
                            
                            <h3>Address</h3>
                            <p>Deewan Banquet</p>
                            <p>560 Stelton Rd</p>
                            <p>Piscataway, NJ 08854</p>
                        </div>
                    </div>
                </div>
                <div class="top-fold"></div>
                <div class="body"></div>
                <div class="left-fold"></div>
            </div>
            <div class="shadow"></div>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
}

.envelope-container {
    position: relative;
    perspective: 1000px;
}

.envelope {
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.envelope-body {
    position: relative;
    height: 300px;
    width: 500px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.envelope-body .body {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 0 0 200px 500px;
    border-color: transparent transparent #d4a76a transparent;
    z-index: 2;
}

.envelope-body .top-fold {
    position: absolute;
    top: 100px;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 100px 250px 0 250px;
    border-color: #e8c093 transparent transparent transparent;
    transform-origin: 50% 0%;
    transition: transform 0.5s 0.5s, z-index 0.25s 0.5s;
    z-index: 2;
}

.envelope-body .back-fold {
    position: absolute;
    bottom: 0;
    height: 200px;
    width: 500px;
    background-color: #e8c093;
    z-index: 0;
}

.envelope-body .left-fold {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 100px 0 100px 250px;
    border-color: transparent transparent transparent #d4a76a;
    z-index: 2;
}

.envelope-body .letter {
    position: absolute;
    left: 50px;
    bottom: 0;
    height: 120px;
    width: 400px;
    background-color: #ffffff;
    transition: 0.5s 0.25s;
    z-index: 1;
    padding: 20px;
    text-align: center;
    /* Remove overflow: hidden to allow content to be visible */
    transform-origin: bottom center;
}

.letter-content {
    opacity: 0;
    transition: opacity 0.5s 1s;
}

.shadow {
    position:...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const envelope = document.querySelector('.envelope');
    
    envelope.addEventListener('click', function() {
        envelope.classList.toggle('open');
    });
});