301 lines
8.2 KiB
HTML
301 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Benjamin Baier - Business Card</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: black;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: #1a1a1a;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.card-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.left-section {
|
|
flex: 0.8;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-container {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: #2a2a2a;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
/* Yahan apna logo lagao */
|
|
background: #d4af37;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
color: #ffffff;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.title {
|
|
color: #a0a0a0;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.right-section {
|
|
flex: 1.2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-left: 1px solid #333;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.contact-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.contact-item a {
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.contact-item a:hover {
|
|
color: #d4af37;
|
|
}
|
|
|
|
|
|
|
|
/* Social Icons Container */
|
|
.social-icons {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Social Icons Links */
|
|
.social-icons a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.social-icons a img {
|
|
width: 25px;
|
|
/* height: 0px; */
|
|
object-fit: contain;
|
|
filter: brightness(0) invert(1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
|
|
|
|
/* Reddit */
|
|
.social-icons a:nth-child(7):hover {
|
|
background: #000000;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.social-icons {
|
|
gap: 12px;
|
|
}
|
|
|
|
.social-icons a {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.social-icons a img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.social-icons {
|
|
gap: 10px;
|
|
}
|
|
|
|
.social-icons a {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.social-icons a img {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.logo-container img {
|
|
width: 60px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.card-container {
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.right-section {
|
|
border-left: none;
|
|
border-top: 1px solid #333;
|
|
padding-left: 0;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.card {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.contact-item {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo-container {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.social-icons {
|
|
gap: 12px;
|
|
}
|
|
|
|
.social-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="card">
|
|
<div class="card-container">
|
|
<!-- Left Section -->
|
|
<div class="left-section">
|
|
<div class="logo-container">
|
|
|
|
<img src="https://flirtmetrics.com/assets/logo.png" alt="Flirtmetrics" class="logo-img">
|
|
</div>
|
|
<h1 class="name">Muhammad Waris</h1>
|
|
<p class="title">Quality Assurance Engineer</p>
|
|
</div>
|
|
|
|
<!-- Right Section -->
|
|
<div class="right-section">
|
|
<div class="contact-item">
|
|
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
<a href="mailto:benjamin.baier@flirtmetrics.com">muhammad.waris@flirtmetrics.com</a>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
|
|
</path>
|
|
</svg>
|
|
<a href="https://www.flirtmetrics.com" target="_blank">www.flirtmetrics.comRohit</a>
|
|
</div>
|
|
|
|
<div class="social-icons">
|
|
<a href="https://www.facebook.com/Flirtmetrics" target="_black"><img
|
|
src="../../public/assets/facebook.svg" alt="Facebook" /></a>
|
|
<a href="https://www.instagram.com/flirtmetrics/" target="_black"><img
|
|
src="../../public/assets/insta.svg" alt="Instagram" /></a>
|
|
<a href="https://www.tiktok.com/@flirtmetrics" target="_black"><img
|
|
src="../../public/assets/tiktok.svg" alt="TikTok" /></a>
|
|
|
|
<a href="https://x.com/flirtmetrics/" target="_black"><img src="../../public/assets/twitter.svg"
|
|
alt="Twitter" /></a>
|
|
<a href="https://rumble.com/user/flirtmetrics" target="_black"><img
|
|
src="../../public/assets/rumble.svg" alt="Rumble" /></a>
|
|
|
|
<a href="http://reddit.com/flirtmetrics/" target="_black"><img src="../../public/assets/reddit.svg"
|
|
alt="Reddit" /></a>
|
|
<a href="https://www.threads.com/@flirtmetrics" target="_black"><img
|
|
src="/../../public/assets/thread.svg" alt="Thread" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |