|
|
<!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> |
