Professional Card Designs Kit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Card Designs Kit</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
            gap: 20px;
        }
        .card {
            width: 300px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .card-content {
            padding: 20px;
        }
        .card-title {
            font-size: 1.5em;
            margin: 0 0 10px;
        }
        .card-description {
            font-size: 1em;
            color: #666;
        }
        .card-actions {
            margin-top: 20px;
            text-align: center;
        }
        .card-actions button {
            background: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .card-actions button:hover {
            background: #0056b3;
        }
        .card-icon {
            font-size: 3em;
            text-align: center;
            margin-top: -40px;
            margin-bottom: 20px;
        }
        .card-emoji {
            font-size: 2em;
            margin-right: 10px;
        }
        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .fade-in {
            animation: fadeIn 1s;
        }
        .rotate {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .scale-up {
            transition: transform 0.3s;
        }
        .scale-up:hover {
            transform: scale(1.1);
        }
        /* Card styles */
        .card-style-1 {
            border: 2px solid #007BFF;
        }
        .card-style-2 {
            background: linear-gradient(45deg, #f06, #ffba08);
            color: #fff;
        }
        .card-style-3 {
            border: 1px solid #ddd;
            border-radius: 0;
        }
        .card-style-4 {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .card-style-5 {
            background: #28a745;
            color: #fff;
        }
        .card-style-6 {
            background: #6f42c1;
            color: #fff;
        }
        .card-style-7 {
            background: #f8f9fa;
        }
        .card-style-8 {
            border: 1px solid #dee2e6;
        }
        .card-style-9 {
            background: #ffc107;
            color: #fff;
        }
        .card-style-10 {
            background: #e83e8c;
            color: #fff;
        }
        .card-style-11 {
            background: #fd7e14;
            color: #fff;
        }
        .card-style-12 {
            background: #20c997;
            color: #fff;
        }
        .card-style-13 {
            background: #17a2b8;
            color: #fff;
        }
        .card-style-14 {
            background: #343a40;
            color: #fff;
        }
        .card-style-15 {
            border: 2px dashed #6c757d;
        }
        .card-style-16 {
            background: linear-gradient(45deg, #007BFF, #6610f2);
            color: #fff;
        }
        .card-style-17 {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: #fff;
        }
        .card-style-18 {
            background: linear-gradient(45deg, #ffc107, #fd7e14);
            color: #fff;
        }
        .card-style-19 {
            background: linear-gradient(45deg, #17a2b8, #007BFF);
            color: #fff;
        }
        .card-style-20 {
            background: linear-gradient(45deg, #6f42c1, #e83e8c);
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="card card-style-1 fade-in scale-up">
        <div class="card-icon">✨</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 1</h3>
            <p class="card-description">This is a description for the first card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-2 fade-in scale-up">
        <div class="card-icon">🔥</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 2</h3>
            <p class="card-description">This is a description for the second card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-3 fade-in scale-up">
        <div class="card-icon">💧</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 3</h3>
            <p class="card-description">This is a description for the third card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-4 fade-in scale-up">
        <div class="card-icon">🌟</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 4</h3>
            <p class="card-description">This is a description for the fourth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-5 fade-in scale-up">
        <div class="card-icon">🍀</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 5</h3>
            <p class="card-description">This is a description for the fifth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-6 fade-in scale-up">
        <div class="card-icon">🔮</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 6</h3>
            <p class="card-description">This is a description for the sixth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-7 fade-in scale-up">
        <div class="card-icon">🌈</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 7</h3>
            <p class="card-description">This is a description for the seventh card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-8 fade-in scale-up">
        <div class="card-icon">⚡</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 8</h3>
            <p class="card-description">This is a description for the eighth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-9 fade-in scale-up">
        <div class="card-icon">🎉</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 9</h3>
            <p class="card-description">This is a description for the ninth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-10 fade-in scale-up">
        <div class="card-icon">🎁</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 10</h3>
            <p class="card-description">This is a description for the tenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-11 fade-in scale-up">
        <div class="card-icon">🌸</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 11</h3>
            <p class="card-description">This is a description for the eleventh card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-12 fade-in scale-up">
        <div class="card-icon">🍔</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 12</h3>
            <p class="card-description">This is a description for the twelfth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-13 fade-in scale-up">
        <div class="card-icon">🍕</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 13</h3>
            <p class="card-description">This is a description for the thirteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-14 fade-in scale-up">
        <div class="card-icon">🎸</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 14</h3>
            <p class="card-description">This is a description for the fourteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-15 fade-in scale-up">
        <div class="card-icon">🏀</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 15</h3>
            <p class="card-description">This is a description for the fifteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-16 fade-in scale-up">
        <div class="card-icon">🚀</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 16</h3>
            <p class="card-description">This is a description for the sixteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-17 fade-in scale-up">
        <div class="card-icon">🌌</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 17</h3>
            <p class="card-description">This is a description for the seventeenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-18 fade-in scale-up">
        <div class="card-icon">⚓</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 18</h3>
            <p class="card-description">This is a description for the eighteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-19 fade-in scale-up">
        <div class="card-icon">🌍</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 19</h3>
            <p class="card-description">This is a description for the nineteenth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
    <div class="card card-style-20 fade-in scale-up">
        <div class="card-icon">🎨</div>
        <img src="https://via.placeholder.com/300x200" alt="Card Image">
        <div class="card-content">
            <h3 class="card-title">Card Title 20</h3>
            <p class="card-description">This is a description for the twentieth card design.</p>
            <div class="card-actions">
                <button type="button">Learn More</button>
            </div>
        </div>
    </div>
</body>
</html>

Professional Card Designs Kit - VexaX