Sujay's Free Tools(online business card maker)
Creating a complete responsive code for an online business card maker involves a significant amount of code, and I can provide you with a basic example to get you started. Note that this is a simplified version, and you might want to enhance it further based on your specific requirements.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Card Maker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="businessCard">
<div id="cardContent">
<h2 id="name">Your Name</h2>
<p id="position">Your Position</p>
<p id="email">Your Email</p>
<p id="phone">Your Phone</p>
<div id="imageContainer">
<img id="userImage" src="default-image.jpg" alt="User Image">
</div>
<div id="logoContainer">
<img id="companyLogo" src="default-logo.png" alt="Company Logo">
</div>
</div>
</div>
<button onclick="generateCard()">Generate Business Card</button>
<button onclick="downloadCard()">Download Business Card</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="script.js"></script>
</body>
</html>/* styles.css */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f0f0f0;
}
#businessCard {
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
#cardContent {
padding: 20px;
}
#name {
color: #3498db;
}
#position {
color: #2ecc71;
}
#email, #phone {
color: #e74c3c;
}
#imageContainer, #logoContainer {
margin-top: 10px;
}
#userImage, #companyLogo {
max-width: 100%;
height: auto;
border-radius: 4px;
}// script.js
function generateCard() {
const randomColor = getRandomColor();
document.getElementById('businessCard').style.backgroundColor = randomColor;
}
function downloadCard() {
const svgString = document.getElementById('businessCard').outerHTML;
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'business_card.svg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}This code provides a basic structure for an online business card maker with the specified features. You need to add your own images and customize the styles further based on your design preferences. Remember that this is a starting point, and you may want to extend the functionality and styling according to your needs.
Comments
Post a Comment