Skip to content

Commit 080ca51

Browse files
CordeiroLabCordeiroLab
authored
Update Join_us.html
1 parent 0cecd5c commit 080ca51

File tree

1 file changed

+92
-10
lines changed

1 file changed

+92
-10
lines changed

‎pages/Join_us.html‎

Lines changed: 92 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,58 @@
1717

1818
gtag('config', 'G-11BY9ZPPC8');
1919
</script>
20+
<style>
21+
/* Carousel Styles */
22+
.carousel {
23+
position: relative;
24+
max-width: 600px;
25+
margin: 30px auto;
26+
overflow: hidden;
27+
border-radius: 12px;
28+
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
29+
}
30+
.carousel-images img {
31+
width: 100%;
32+
display: none;
33+
transition: opacity 0.5s;
34+
}
35+
.carousel-images img.active {
36+
display: block;
37+
opacity: 1;
38+
}
39+
.carousel-dots {
40+
text-align: center;
41+
position: absolute;
42+
bottom: 12px;
43+
width: 100%;
44+
}
45+
.carousel-dots span {
46+
cursor: pointer;
47+
height: 12px;
48+
width: 12px;
49+
margin: 0 3px;
50+
background-color: #bbb;
51+
border-radius: 50%;
52+
display: inline-block;
53+
transition: background 0.3s;
54+
}
55+
.carousel-dots span.active {
56+
background-color: #333;
57+
}
58+
</style>
2059
</head>
2160
<body>
2261
<header>
2362
<nav>
24-
<div class="menu-bar">
25-
<!-- Name of the Webpage -->
26-
<!-- <h1 class="webpage-name">Cordeiro Lab</h1> -->
27-
63+
<div class="menu-bar">
2864
<a href="https://www.itqb.unl.pt/research/biological-chemistry/dynamic-structural-biology" target="_blank">
2965
<img src="/assets/logos/Lab_Logo_2.png" alt="Cordeiro Lab Logo" class="logo">
3066
</a>
31-
<!-- Hamburger Menu -->
3267
<div class="hamburger" id="hamburger">
3368
<span class="bar"></span>
3469
<span class="bar"></span>
3570
<span class="bar"></span>
3671
</div>
37-
<!-- Menu Links -->
3872
<ul class="menu" id="menu">
3973
<li><a href="/index.html">Home</a></li>
4074
<li><a href="team.html">Team</a></li>
@@ -45,8 +79,58 @@
4579
</div>
4680
</nav>
4781
</header>
48-
<main>
49-
<!-- Here are our amazing researchers -->
82+
<main>
83+
<!-- Carousel Start -->
84+
<div class="carousel">
85+
<div class="carousel-images">
86+
<img src="/assets/images/slider/image1.jpg" alt="Image 1">
87+
<img src="/assets/images/slider/image2.jpg" alt="Image 2">
88+
<img src="/assets/images/slider/image3.jpg" alt="Image 3">
89+
<!-- Add more images as needed -->
90+
</div>
91+
<div class="carousel-dots"></div>
92+
</div>
93+
<script>
94+
document.addEventListener('DOMContentLoaded', function () {
95+
const images = document.querySelectorAll('.carousel-images img');
96+
const dotsContainer = document.querySelector('.carousel-dots');
97+
let current = 0;
98+
let interval;
99+
100+
function showImage(idx) {
101+
images.forEach((img, i) => {
102+
img.classList.toggle('active', i === idx);
103+
dotsContainer.children[i].classList.toggle('active', i === idx);
104+
});
105+
current = idx;
106+
}
107+
108+
// Create dots
109+
images.forEach((_, i) => {
110+
const dot = document.createElement('span');
111+
dot.addEventListener('click', () => {
112+
showImage(i);
113+
resetInterval();
114+
});
115+
dotsContainer.appendChild(dot);
116+
});
117+
118+
function nextImage() {
119+
showImage((current + 1) % images.length);
120+
}
121+
122+
function resetInterval() {
123+
clearInterval(interval);
124+
interval = setInterval(nextImage, 3000);
125+
}
126+
127+
showImage(0);
128+
resetInterval();
129+
});
130+
</script>
131+
<!-- Carousel End -->
132+
133+
<!-- Here are our amazing researchers -->
50134
<div id="container">Loading...</div>
51135
<script>
52136
fetch('/content/Join_us.md')
@@ -58,11 +142,9 @@
58142
</main>
59143
<footer>
60144
<nav>
61-
<!-- Logo of the Institute -->
62145
<a href="https://www.itqb.unl.pt" target="_blank">
63146
<img src="/assets/logos/itqb_logo2.png" alt="Institute Logo" class="logo">
64147
</a>
65-
<!-- Menu Links -->
66148
<ul class="menu1">
67149
<li><a href="/index.html">Home</a></li>
68150
<li><a href="team.html">Team</a></li>

0 commit comments

Comments
 (0)