Skip to content
Snippets Groups Projects
Commit e9cdbcae authored by Vishwaa Kannan's avatar Vishwaa Kannan
Browse files

Merge branch 'timeline' into 'main' 

Time line first

See merge request !15
parents 18022b64 08821f1d
No related branches found
No related tags found
1 merge request!15Time line first
Pipeline #404837 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
static/app.js
+ 17
− 1
View file @ e9cdbcae
......@@ -50,4 +50,20 @@ document.addEventListener('DOMContentLoaded', function () {
heroSection.classList.add('hidden');
heroSection.classList.remove('hero-overlay');
}, 5000); // 5 seconds delay
});
\ No newline at end of file
});
document.addEventListener('DOMContentLoaded', function() {
const events = document.querySelectorAll('.timeline-event');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view');
}
});
});
events.forEach(event => {
observer.observe(event);
});
});
static/style.css
+ 112
− 1
View file @ e9cdbcae
......@@ -327,4 +327,115 @@ h2 {
}
.hidden {
display: none;
}
\ No newline at end of file
}
.timeline {
position: relative;
margin: 0 auto;
padding: 20px 0;
width: 90%;
max-width: 1000px;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: #bbb;
transform: translateX(-50%);
}
.timeline-start,
.timeline-end {
position: absolute;
left: 50%;
width: 20px;
height: 20px;
background-color: #bbb;
border-radius: 50%;
transform: translateX(-50%);
}
.timeline-start {
top: 0;
}
.timeline-end {
bottom: 0;
}
.timeline-event {
position: relative;
margin: 20px 0;
width: 45%;
}
.timeline-event.left {
left: 0;
transform: translateX(-55%);
}
.timeline-event.right {
left: 55%;
transform: translateX(-55%);
}
.date-bubble {
position: absolute;
top: 0;
padding: 10px 15px;
background-color: #555;
color: #fff;
border-radius: 20px;
}
.timeline-event.left .date-bubble {
left: -60px;
}
.timeline-event.right .date-bubble {
right: -60px;
}
.event-content {
background-color: #f2f2f2;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.event-content img {
width: 100%;
height: auto;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.timeline-event {
width: 100%;
transform: translateX(0) !important;
margin: 40px 0;
}
.timeline-event.left .date-bubble,
.timeline-event.right .date-bubble {
left: auto;
right: auto;
top: -30px;
}
}
.timeline-event {
opacity: 0;
transform: translateY(100px);
transition: all 0.6s ease-in-out;
}
.timeline-event.in-view {
opacity: 1;
transform: translateY(0);
}
\ No newline at end of file
wiki/pages/timeline.html
+ 31
− 0
View file @ e9cdbcae
......@@ -35,6 +35,37 @@
</head>
<body>
<div class="timeline">
<div class="timeline-start"></div>
<div class="timeline-event left">
<div class="date-bubble">8/10</div>
<div class="event-content">
<h3>Event Title</h3>
<p>This is the description for the event on August 10th.</p>
<img src="https://www.pfasfacts.com/wp-content/uploads/2019/07/pfas-diagram2-1024x666.png" alt="PFAS Diagram">
</div>
</div>
<div class="timeline-event right">
<div class="date-bubble">8/11</div>
<div class="event-content">
<h3>Event Title</h3>
<p>This is the description for the event on August 11th.</p>
</div>
</div>
<div class="timeline-event left">
<div class="date-bubble">8/12</div>
<div class="event-content">
<h3>Event Title</h3>
<p>This is the description for the event on August 12th.</p>
<img src="https://www.pfasfacts.com/wp-content/uploads/2019/07/pfas-diagram2-1024x666.png" alt="PFAS Diagram">
</div>
</div>
<div class="timeline-end"></div>
</div>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment