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