Professional Card Designs Kit - VexaX
Run Code
Toggle Theme
Share Link
<!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>