| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Taxi Service Business Card</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| color: #333; |
| } |
| |
| .business-card { |
| width: 100%; |
| max-width: 350px; |
| background: white; |
| border-radius: 20px; |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
| overflow: hidden; |
| position: relative; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| animation: fadeIn 0.5s ease forwards; |
| } |
| |
| .business-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); |
| padding: 30px; |
| text-align: center; |
| position: relative; |
| color: white; |
| } |
| |
| .header::after { |
| content: ''; |
| position: absolute; |
| bottom: -20px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 0; |
| height: 0; |
| border-left: 30px solid transparent; |
| border-right: 30px solid transparent; |
| border-top: 20px solid #3a7bd5; |
| z-index: 1; |
| } |
| |
| .logo { |
| width: 60px; |
| height: 60px; |
| background: white; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin: 0 auto 15px; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .logo i { |
| font-size: 28px; |
| background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .company-name { |
| font-size: 24px; |
| font-weight: 700; |
| margin-bottom: 5px; |
| letter-spacing: 1px; |
| } |
| |
| .slogan { |
| font-size: 14px; |
| opacity: 0.9; |
| } |
| |
| .content { |
| padding: 30px; |
| padding-top: 40px; |
| } |
| |
| .contact-info { |
| margin-bottom: 25px; |
| } |
| |
| .info-item { |
| display: flex; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
| |
| .info-item i { |
| width: 35px; |
| height: 35px; |
| background: #f5f7fa; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin-right: 15px; |
| color: #3a7bd5; |
| font-size: 14px; |
| transition: all 0.3s ease; |
| } |
| |
| .info-item:hover i { |
| background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); |
| color: white; |
| transform: scale(1.1); |
| } |
| |
| .info-text { |
| font-size: 14px; |
| } |
| |
| .info-text .label { |
| font-weight: 600; |
| display: block; |
| margin-bottom: 3px; |
| } |
| |
| .info-text .value { |
| color: #666; |
| } |
| |
| .social-links { |
| display: flex; |
| justify-content: space-around; |
| margin-top: 30px; |
| } |
| |
| .social-link { |
| width: 45px; |
| height: 45px; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: white; |
| font-size: 20px; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .social-link::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(255, 255, 255, 0.1); |
| transform: scale(0); |
| border-radius: 50%; |
| transition: transform 0.3s ease; |
| } |
| |
| .social-link:hover::before { |
| transform: scale(1); |
| } |
| |
| .telegram { |
| background: #0088cc; |
| } |
| |
| .tiktok { |
| background: #000000; |
| } |
| |
| .youtube { |
| background: #ff0000; |
| } |
| |
| .social-link i { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .social-link:hover { |
| transform: translateY(-5px); |
| } |
| |
| .footer { |
| background: #f5f7fa; |
| padding: 15px; |
| text-align: center; |
| font-size: 12px; |
| color: #888; |
| } |
| |
| .watermark { |
| position: absolute; |
| bottom: 10px; |
| right: 10px; |
| font-size: 10px; |
| color: #ccc; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| |
| @keyframes pulse { |
| 0% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.05); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| |
| .logo { |
| animation: pulse 2s infinite; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="business-card"> |
| <div class="header"> |
| <div class="logo"> |
| <i class="fas fa-taxi"></i> |
| </div> |
| <h1 class="company-name">SPEEDY TAXI</h1> |
| <p class="slogan">Fast. Safe. Reliable.</p> |
| </div> |
| |
| <div class="content"> |
| <div class="contact-info"> |
| <div class="info-item"> |
| <i class="fas fa-phone"></i> |
| <div class="info-text"> |
| <span class="label">Phone</span> |
| <span class="value">+1 (555) 123-4567</span> |
| </div> |
| </div> |
| |
| <div class="info-item"> |
| <i class="fas fa-envelope"></i> |
| <div class="info-text"> |
| <span class="label">Email</span> |
| <span class="value">book@speedytaxi.com</span> |
| </div> |
| </div> |
| |
| <div class="info-item"> |
| <i class="fas fa-globe"></i> |
| <div class="info-text"> |
| <span class="label">Website</span> |
| <span class="value">www.speedytaxi.com</span> |
| </div> |
| </div> |
| |
| <div class="info-item"> |
| <i class="fas fa-clock"></i> |
| <div class="info-text"> |
| <span class="label">Working Hours</span> |
| <span class="value">24/7 Service</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="social-links"> |
| <a href="https://t.me/speedytaxi" class="social-link telegram" target="_blank"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="https://www.tiktok.com/@speedytaxi" class="social-link tiktok" target="_blank"> |
| <i class="fab fa-tiktok"></i> |
| </a> |
| <a href="https://www.youtube.com/channel/speedytaxi" class="social-link youtube" target="_blank"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="footer"> |
| Follow us on social media for updates & promotions |
| <div class="watermark">SPEEDY TAXI © 2023</div> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const card = document.querySelector('.business-card'); |
| const socialLinks = document.querySelectorAll('.social-link'); |
| |
| |
| card.addEventListener('click', function() { |
| card.style.transform = 'scale(0.95)'; |
| setTimeout(() => { |
| card.style.transform = 'scale(1)'; |
| }, 200); |
| }); |
| |
| |
| socialLinks.forEach(link => { |
| link.addEventListener('mouseenter', function() { |
| |
| }); |
| }); |
| |
| |
| const logo = document.querySelector('.logo i'); |
| logo.addEventListener('mouseenter', function() { |
| this.style.transform = 'rotate(15deg)'; |
| }); |
| logo.addEventListener('mouseleave', function() { |
| this.style.transform = 'rotate(0)'; |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
