init commit
This commit is contained in:
commit
b3d945643b
BIN
balloon.jpg
Normal file
BIN
balloon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
22
data.json
Normal file
22
data.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Chris",
|
||||||
|
"title": "Owner",
|
||||||
|
"phone": "203.283.5626",
|
||||||
|
"email": "chris@beachpartyballoons.com",
|
||||||
|
"website": "beachpartyballoons.com",
|
||||||
|
"photo": "photo.png",
|
||||||
|
"profile": "chris.jpg",
|
||||||
|
"address": "554 Boston Post Road, Milford, CT 06460",
|
||||||
|
"balloon": "balloon.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bob The Builder",
|
||||||
|
"title": "Master Builder",
|
||||||
|
"phone": "+1-555-987-6543",
|
||||||
|
"email": "bob@example.com",
|
||||||
|
"website": "https://www.bobbuilds.com",
|
||||||
|
"photo": "https://example.com/bob.jpg",
|
||||||
|
"address": "456 Hammer Street, Constructionville"
|
||||||
|
}
|
||||||
|
]
|
||||||
36
index.html
Normal file
36
index.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Virtual Business Card</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
|
||||||
|
<body >
|
||||||
|
<div class="card" id="businessCard">
|
||||||
|
<div class="background">
|
||||||
|
<img id="photo" class="photo" src="" alt="Logo">
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<img id="profile" class="photo" src="" alt="Profile Photo">
|
||||||
|
<h2 id="name"></h2>
|
||||||
|
<p id="title"></p>
|
||||||
|
<p id="phone"></p>
|
||||||
|
<p id="email"></p>
|
||||||
|
<p id="website"></p>
|
||||||
|
<p id="address"></p>
|
||||||
|
<img id="balloon" class="photo" src="" alt="picture of balloons" >
|
||||||
|
|
||||||
|
<!-- Social Media Icons -->
|
||||||
|
<div class="social-media">
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-bluesky"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-mastodon"></i></a>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
</div >
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body >
|
||||||
|
</html >
|
||||||
50
script.js
Normal file
50
script.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const businessCard = document.getElementById('businessCard');
|
||||||
|
const nameElement = document.getElementById('name');
|
||||||
|
const titleElement = document.getElementById('title');
|
||||||
|
const phoneLinkElement = document.getElementById('phone');
|
||||||
|
const emailLinkElement = document.getElementById('email');
|
||||||
|
const websiteLinkElement = document.getElementById('website');
|
||||||
|
const addressElement = document.getElementById('address');
|
||||||
|
const photoElement = document.getElementById('photo');
|
||||||
|
const profileElement = document.getElementById('profile');
|
||||||
|
const balloonElement = document.getElementById('balloon');
|
||||||
|
|
||||||
|
fetch('data.json')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// If using the multiple employee format, choose the employee to display.
|
||||||
|
// For example, to display the first employee:
|
||||||
|
const employee = data[0]; // Or choose by ID or other criteria.
|
||||||
|
|
||||||
|
nameElement.textContent = employee.name;
|
||||||
|
titleElement.textContent = employee.title;
|
||||||
|
addressElement.textContent = employee.address;
|
||||||
|
profileElement.src = employee.profile;
|
||||||
|
photoElement.src = employee.photo;
|
||||||
|
balloonElement.src = employee.balloon;
|
||||||
|
|
||||||
|
// Create phone link
|
||||||
|
const phoneLink = document.createElement('a');
|
||||||
|
phoneLink.href = `tel:${employee.phone}`;
|
||||||
|
phoneLink.textContent = employee.phone;
|
||||||
|
phoneLinkElement.appendChild(phoneLink);
|
||||||
|
|
||||||
|
// Create email link
|
||||||
|
const emailLink = document.createElement('a');
|
||||||
|
emailLink.href = `mailto:${employee.email}`;
|
||||||
|
emailLink.textContent = employee.email;
|
||||||
|
emailLinkElement.appendChild(emailLink);
|
||||||
|
|
||||||
|
// Create website link
|
||||||
|
const websiteLink = document.createElement('a');
|
||||||
|
websiteLink.href = employee.website;
|
||||||
|
websiteLink.textContent = employee.website;
|
||||||
|
websiteLinkElement.appendChild(websiteLink);
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
businessCard.innerHTML = '<p>Error loading data. Check the console.</p>'; // Display an error message
|
||||||
|
});
|
||||||
|
});
|
||||||
129
style.css
Normal file
129
style.css
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
html {
|
||||||
|
background-color: #e7e6dd;
|
||||||
|
font-family: "Autour One", serif;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.card a{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 40px auto;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #507962;
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
animation: fadeSlideUp 1s ease-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeSlideUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(40px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details img#profile {
|
||||||
|
animation: scaleFadeIn 2s ease-out 0.6s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleFadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .background {
|
||||||
|
background-color: #d1fff8;
|
||||||
|
height: 180px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#photo {
|
||||||
|
width: 140px;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
.photo{
|
||||||
|
box-shadow: 0 25px 35px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
}
|
||||||
|
.details {
|
||||||
|
margin-top: -60px; /* Pull profile image upward */
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details img#profile {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid white;
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 52px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 10px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details p {
|
||||||
|
margin: 4px 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#balloon {
|
||||||
|
border-radius: 20%;
|
||||||
|
width: 260px;
|
||||||
|
height: auto;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-media {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28px;
|
||||||
|
transition: transform 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover {
|
||||||
|
color: #ffdb70;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user