-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOurTeamPageNotAccessible.html
119 lines (107 loc) · 4.5 KB
/
OurTeamPageNotAccessible.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sparks - A company that cares about you</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex" id="main-nav">
<div class="flex">
<span class="sparks item" style="border: none; font-size: x-large;">Sparks</span>
</div>
<div class="flex">
<a id="home" class="item" onclick="activateLink('HomePageNotAccessible.html')">
Home
</a>
</div>
<div class="flex" id="our-services">
<div class="item">
Our Services <i class="chevron"></i>
</div>
<div class="flex subitems">
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('PersonalEncouragementServicesNotAccessible.html')">
Request a personal encouragement message
</a>
</div>
</div>
<div class="flex" id="interested-in-us">
<div class="item">
Interested in Us? <i class="chevron"></i>
</div>
<div class="flex subitems">
<a class="item" onclick="activateLink('OurMissionPageNotAccessible.html')">
Our Mission
</a>
<a class="item" onclick="activateLink('OurTeamPageNotAccessible.html')">
Our Team
</a>
<a class="item" style="margin-bottom: 0px !important;" onclick="activateLink('AnalyticsPageNotAccessible.html')">
Cool Company Analytics
</a>
</div>
</div>
</div>
<div class="main-content">
<div class="heading-1">
Our Team
</div>
<div class="paragraph">
At <span class="sparks">Sparks</span>, our team is our greatest asset. Each member brings unique talents, perspectives, and energy to create an inclusive and dynamic environment.
</div>
<div class="heading-2">
Meet the Team
</div>
<div class="paragraph">
We are proud to have a diverse group of individuals committed to making a positive impact. Get to know some of our amazing team members!
</div>
<div class="carousel">
<div class="carousel-track" id="carouselTrack">
<img src="file12847463728373828.png" alt="">
<img src="file12987438863428973489734.png" alt="">
<img src="file28976547671891828839082.png" alt="">
<img src="file34875483721387281922323.png" alt="">
</div>
<button class="carousel-button left" onclick="moveSlide(-1)">◀</button>
<button class="carousel-button right" onclick="moveSlide(1)">▶</button>
</div>
<div class="carousel-dots" id="carouselDots">
<span class="carousel-dot" onclick="goToSlide(0)"></span>
<span class="carousel-dot" onclick="goToSlide(1)"></span>
<span class="carousel-dot" onclick="goToSlide(2)"></span>
<span class="carousel-dot" onclick="goToSlide(3)"></span>
</div>
</div>
<script>
const track = document.getElementById('carouselTrack');
const dots = document.querySelectorAll('.carousel-dot');
let currentSlide = 0;
function updateCarousel() {
const slideWidth = track.children[0].getBoundingClientRect().width;
track.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentSlide);
});
}
function moveSlide(direction) {
const totalSlides = track.children.length;
currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
updateCarousel();
}
function goToSlide(slideIndex) {
currentSlide = slideIndex;
updateCarousel();
}
function startAutoPlay() {
setInterval(() => {
moveSlide(1);
}, 3000); // Change slide every 3 seconds
}
// Ensure responsiveness on window resize
window.addEventListener('resize', updateCarousel);
// Initialize carousel
updateCarousel();
startAutoPlay();
</script>
<script src="functions.js"></script>
</body>
</html>