Vintage Card - 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>Vintage Card</title> <style> @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f5f5dc; font-family: 'Libre Baskerville', serif; } .card { background: #fff; border-radius: 15px; border: 1px solid #ccc; max-width: 350px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); text-align: center; transition: transform 0.3s; } .card:hover { transform: scale(1.05); } .card-header { background: #d2b48c; padding: 20px; color: #fff; font-size: 1.5em; } .card-body { padding: 20px; } .card-body p { margin: 10px 0; font-size: 1.2em; } .card-footer { padding: 15px; background: #f0e68c; } .card-footer button { background: #8b4513; color: #fff; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; transition: background 0.3s; } .card-footer button:hover { background: #a0522d; } </style> </head> <body> <div class="card"> <div class="card-header"> Vintage Card </div> <div class="card-body"> <p>Charming vintage design with a classic touch.</p> <p>Great for nostalgic and heritage projects.</p> </div> <div class="card-footer"> <button type="button">Join Us</button> </div> </div> </body> </html>