Skip to content

Commit bde4073

Browse files
BeikewzhBeikewzh
committed
Update home.html
1 parent 50b1183 commit bde4073

File tree

1 file changed

+65
-84
lines changed

1 file changed

+65
-84
lines changed

‎_layouts/home.html‎

Lines changed: 65 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -32,38 +32,35 @@
3232
</div>
3333
</div>
3434

35-
<!-- Upcoming Seminar + Countdown (redesigned) -->
36-
<div class="strip strip-grey animate__animated animate__fadeInUp" aria-labelledby="event-section-title">
35+
<!-- Upcoming Seminar + News Strip -->
36+
<div class="strip strip-grey animate__animated animate__fadeInUp">
3737
<div class="container py-6">
38-
<div class="row justify-content-center">
39-
40-
<!-- Card Container -->
41-
<section class="col-12 col-lg-8">
42-
<div class="event-card p-4 bg-white rounded shadow-sm">
38+
<div class="row justify-content-center gx-5">
4339

44-
<!-- Title & Subtitle -->
40+
<!-- Event Card -->
41+
<section class="col-12 col-lg-6">
42+
<div class="event-card p-4 bg-white rounded shadow-sm position-relative" style="top:-30px;">
4543
{% assign seminar = site.data.news.upcoming_seminar %}
46-
<h2 id="event-section-title" class="mb-1"><strong>{{ seminar.title }}</strong></h2>
44+
<h2 class="mb-1"><strong>{{ seminar.title }}</strong></h2>
4745
<p class="text-secondary mb-4">{{ seminar.subtitle }}</p>
4846

4947
<!-- Countdown -->
50-
<div class="event-countdown mb-4">
51-
<div id="countdown" class="d-flex justify-content-between align-items-center"></div>
48+
<div class="event-countdown mb-4 animate__animated animate__pulse animate__infinite">
49+
<div id="countdown" class="d-flex justify-content-center align-items-center"></div>
5250
</div>
5351

54-
<!-- Date & Time -->
55-
<div class="mb-3">
56-
<p class="mb-1"><strong>Date &amp; Time:</strong> {{ seminar.date }}</p>
57-
<p class="mb-0"><strong>Time Zones:</strong> {{ seminar.time_zones }}</p>
58-
</div>
52+
<!-- Details -->
53+
<p class="mb-1"><strong>Date &amp; Time:</strong> {{ seminar.date }}</p>
54+
<p class="mb-4"><strong>Time Zones:</strong> {{ seminar.time_zones }}</p>
5955

6056
<!-- Speakers Grid -->
61-
<h4 class="mt-4">Speakers</h4>
62-
<div class="row gx-4 gy-3">
57+
<h4>Speakers</h4>
58+
<div class="row gx-3 gy-3">
6359
{% for speaker in seminar.speakers %}
6460
<div class="col-12 col-md-6 d-flex">
65-
<img src="{{ speaker.image | prepend: site.baseurl }}" alt="{{ speaker.name }}"
66-
class="rounded-circle me-3" width="50" height="50" loading="lazy">
61+
<img src="{{ speaker.image | prepend: site.baseurl }}"
62+
alt="{{ speaker.name }}" class="rounded-circle me-3"
63+
width="50" height="50" loading="lazy">
6764
<div>
6865
<strong>{{ speaker.name }}</strong><br>
6966
<small class="text-muted">{{ speaker.role }}</small><br>
@@ -73,20 +70,39 @@ <h4 class="mt-4">Speakers</h4>
7370
{% endfor %}
7471
</div>
7572

76-
<!-- Action Button -->
73+
<!-- Action -->
7774
<div class="text-end mt-4">
7875
<a href="{{ seminar.registration_link }}"
79-
class="btn btn-primary animate__animated animate__pulse animate__infinite">
76+
class="btn btn-primary">
8077
Join the Seminar
8178
</a>
8279
</div>
8380
</div>
8481
</section>
8582

83+
<!-- News Card -->
84+
<aside class="col-12 col-md-5 col-lg-3">
85+
<div class="news-card p-4 bg-white rounded shadow-sm position-relative" style="top:-30px;">
86+
<h3 class="mb-3"><strong>Latest News</strong></h3>
87+
<ul class="list-unstyled mb-0">
88+
{% for news in site.data.news.latest_news limit:6 %}
89+
<li class="mb-2">
90+
<small class="text-muted">{{ news.date }}:</small>
91+
{{ news.text | truncatewords: 18 }}
92+
{% if news.read_more %}
93+
<a href="{{ news.read_more }}" target="_blank" rel="noopener">Read more</a>
94+
{% endif %}
95+
</li>
96+
{% endfor %}
97+
</ul>
98+
</div>
99+
</aside>
100+
86101
</div>
87102
</div>
88103
</div>
89104

105+
90106
<!-- Services Strip (unchanged) -->
91107
<div class="strip">
92108
<div class="container pt-6 pb-6 pb-md-10">
@@ -143,93 +159,58 @@ <h2 class="feature-title">{{ feature.title }}</h2>
143159
</div>
144160
{% endif %}
145161

146-
<!-- Countdown Styles & Script -->
147-
<style>
148-
.event-countdown #countdown {
149-
font-family: "Segoe UI", sans-serif;
150-
font-size: 1.25rem;
151-
gap: 0.75rem;
152-
}
153-
.event-countdown #countdown span {
154-
display: flex;
155-
flex-direction: column;
156-
align-items: center;
157-
background: #f0f0f0;
158-
padding: 0.5rem 0.75rem;
159-
border-radius: 0.5rem;
160-
min-width: 60px;
161-
}
162-
.event-countdown #countdown span small {
163-
font-size: 0.6em;
164-
color: #555;
165-
}
166-
.event-countdown #countdown .sep {
167-
font-size: 1.5rem;
168-
line-height: 1.5;
169-
margin: 0 0.25rem;
170-
}
171-
</style>
172-
173-
<!-- Styles for the redesigned card & countdown -->
174162
<style>
175-
.event-card { position: relative; top: -30px; } /* lifts card into strip */
176163
.event-countdown #countdown {
177164
display: flex;
178-
justify-content: space-between;
179-
background: #f8f9fa;
180-
padding: 0.75rem;
181-
border-radius: 0.5rem;
165+
justify-content: center;
166+
font-size: 2.5rem;
167+
gap: 0.5rem;
182168
}
183-
.event-countdown #countdown span {
184-
flex: 1;
169+
.event-countdown #countdown .unit {
185170
text-align: center;
186171
}
187-
.event-countdown #countdown span small {
172+
.event-countdown #countdown .unit small {
188173
display: block;
189-
font-size: 0.65rem;
174+
font-size: 0.6rem;
190175
color: #666;
191176
}
192177
.event-countdown #countdown .sep {
193-
flex: 0;
194-
font-size: 1.5rem;
178+
font-size: 2.5rem;
195179
line-height: 1;
196-
margin: 0 0.5rem;
197-
color: #888;
180+
color: #333;
198181
}
199182
</style>
200183

201-
<!-- Countdown script (unchanged) -->
184+
<!-- Countdown Script -->
202185
<script>
203186
document.addEventListener("DOMContentLoaded", function() {
204187
const target = new Date("{{ seminar.date | date: "%Y-%m-%dT%H:%M:%S" }}Z");
205-
const countdownEl = document.getElementById("countdown");
188+
const el = document.getElementById("countdown");
206189

207-
function update() {
190+
function render() {
208191
const now = new Date();
209192
let diff = target - now;
210193
if (diff <= 0) {
211-
countdownEl.innerHTML = "<strong>We're live now!</strong>";
194+
el.innerHTML = "<strong>We're live now!</strong>";
212195
clearInterval(timer);
213196
return;
214197
}
215-
const days = Math.floor(diff / 86400000);
216-
diff %= 86400000;
217-
const hours = Math.floor(diff / 3600000);
218-
diff %= 3600000;
219-
const mins = Math.floor(diff / 60000);
220-
const secs = Math.floor((diff % 60000) / 1000);
221-
222-
countdownEl.innerHTML =
223-
`<span>${days}<small>Days</small></span>` +
224-
`<span class="sep">:</span>` +
225-
`<span>${hours}<small>Hrs</small></span>` +
226-
`<span class="sep">:</span>` +
227-
`<span>${mins}<small>Min</small></span>` +
228-
`<span class="sep">:</span>` +
229-
`<span>${secs}<small>Sec</small></span>`;
198+
const days = Math.floor(diff / 86400000); diff %= 86400000;
199+
const hours = Math.floor(diff / 3600000); diff %= 3600000;
200+
const mins = Math.floor(diff / 60000); diff %= 60000;
201+
const secs = Math.floor(diff / 1000);
202+
203+
el.innerHTML =
204+
`<div class="unit">${days}<small>Days</small></div>` +
205+
`<div class="sep">:</div>` +
206+
`<div class="unit">${hours}<small>Hrs</small></div>` +
207+
`<div class="sep">:</div>` +
208+
`<div class="unit">${mins}<small>Min</small></div>` +
209+
`<div class="sep">:</div>` +
210+
`<div class="unit">${secs}<small>Sec</small></div>`;
230211
}
231212

232-
update();
233-
const timer = setInterval(update, 1000);
213+
render();
214+
const timer = setInterval(render, 1000);
234215
});
235216
</script>

0 commit comments

Comments
 (0)