-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (261 loc) · 9.91 KB
/
index.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<html><head><base href="https://saintsjourney.org/">
<meta charset="UTF-8">
<title>Journey Through Sainthood - Catholic Saints & Their Stories</title>
<style>
:root {
--primary: #2b3240;
--accent: #8b0000;
--gold: #d4af37;
--light: #f4f1ea;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cormorant Garamond', serif;
line-height: 1.6;
color: var(--primary);
background: linear-gradient(135deg, #f4f1ea 0%, #e6dfd4 100%);
}
.header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('https://images.unsplash.com/photo-1548515943-f1c2c5e21a1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 6rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, rgba(0,0,0,0) 70%);
}
.header h1 {
font-size: 4rem;
margin-bottom: 1rem;
font-family: 'Cinzel', serif;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
position: relative;
}
.header p {
font-size: 1.5rem;
font-style: italic;
position: relative;
}
nav {
background: linear-gradient(to right, var(--primary), var(--accent));
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
gap: 3rem;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
transition: all 0.3s;
position: relative;
padding-bottom: 5px;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gold);
transition: width 0.3s;
}
nav a:hover::after {
width: 100%;
}
.saint-card {
background: white;
border-radius: 15px;
padding: 3rem;
margin: 3rem auto;
max-width: 900px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: transform 0.3s;
position: relative;
overflow: hidden;
}
.saint-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, var(--accent), var(--gold));
}
.saint-card:hover {
transform: translateY(-5px);
}
.saint-content {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2rem;
align-items: start;
}
.saint-image {
width: 300px;
height: 400px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.feast-day {
color: var(--accent);
font-weight: bold;
margin: 1rem 0;
font-size: 1.2rem;
}
.explanation {
background: white;
padding: 3rem;
margin: 3rem auto;
max-width: 900px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.explanation h2 {
color: var(--accent);
font-family: 'Cinzel', serif;
margin-bottom: 2rem;
font-size: 2rem;
}
.explanation h3 {
color: var(--primary);
margin: 1.5rem 0 1rem 0;
font-size: 1.5rem;
}
.explanation ul {
margin-left: 2rem;
margin-bottom: 2rem;
}
.saint-title {
font-family: 'Cinzel', serif;
color: var(--accent);
margin-bottom: 1rem;
font-size: 2rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.saint-card {
animation: fadeIn 1s ease-out;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>Saints Among Us</h1>
<p>Discovering the Holy Lives That Light Our Path</p>
</div>
<nav>
<ul>
<li><a href="#padre-pio">St. Padre Pio</a></li>
<li><a href="#jude">St. Jude Thaddeus</a></li>
<li><a href="#carlo">Bl. Carlo Acutis</a></li>
<li><a href="#about-saints">About Saints</a></li>
</ul>
</nav>
<main>
<div class="saint-card" id="padre-pio">
<div class="saint-content">
<img src="https://static.wixstatic.com/media/4e6c5d_ec3afc9bf56c4a889abbeeecc36c1457~mv2.jpg/v1/fill/w_317,h_432,al_c,q_80,enc_avif,quality_auto/st%20pio%202.jpg"
alt="Saint Padre Pio celebrating Mass wearing his iconic gloves" class="saint-image" width="300" height="400">
<div>
<h2 class="saint-title">Saint Padre Pio</h2>
<p class="feast-day">Feast Day: September 23</p>
<p>Born Francesco Forgione in 1887, Padre Pio was an Italian Franciscan Capuchin friar known for his profound spirituality and the miraculous stigmata he bore for 50 years. He was known for his ability to read souls in confession, bilocation, and healing powers. Despite facing much scrutiny and skepticism, he remained devoted to serving God through hearing confessions and celebrating Mass.</p>
<p><strong>Patron Saint of:</strong> Civil defense volunteers, adolescents, stress relief, and January blues</p>
</div>
</div>
</div>
<div class="saint-card" id="jude">
<div class="saint-content">
<img src="https://i0.wp.com/www.seekingtheosis.blog/wp-content/uploads/2023/08/St-Jude.jpg?w=754&ssl=1"
alt="Classical painting of Saint Jude Thaddeus holding his iconic medallion" class="saint-image" width="300" height="400">
<div>
<h2 class="saint-title">Saint Jude Thaddeus</h2>
<p class="feast-day">Feast Day: October 28</p>
<p>One of Jesus' twelve apostles, St. Jude Thaddeus is perhaps the most popular patron of hopeless causes. After Christ's death, he preached the Gospel in Mesopotamia, Libya, and Persia with St. Simon. His attribute is a club, the instrument of his martyrdom. He wrote an epistle that is included in the New Testament.</p>
<p><strong>Patron Saint of:</strong> Hopeless causes, desperate situations, and hospitals</p>
</div>
</div>
</div>
<div class="saint-card" id="carlo">
<div class="saint-content">
<img src="https://www.lfparish.org/uploaded/Little_Flower_Parish/YM/IMG_3031.jpeg"
alt="Official beatification image of Blessed Carlo Acutis" class="saint-image" width="300" height="400">
<div>
<h2 class="saint-title">Blessed Carlo Acutis</h2>
<p class="feast-day">Feast Day: October 12</p>
<p>A modern-day example of holiness, Carlo Acutis (1991-2006) was an Italian teenager known for documenting Eucharistic miracles around the world and creating a website to share them. Despite his young age, he showed remarkable devotion to the Eucharist and used his computer skills to spread the faith. He died of leukemia at age 15, offering his sufferings for the Church.</p>
<p><strong>Patron Saint of:</strong> Internet users, computer programmers, and youth</p>
</div>
</div>
</div>
<div class="explanation" id="about-saints">
<h2>Why Do Catholics Celebrate Feast Days and Pray to Saints?</h2>
<h3>Feast Days</h3>
<p>Feast days are celebrated to honor and remember the special role that saints play in the history of the Church. These celebrations help us to:</p>
<ul>
<li>Remember the examples of holy lives lived for Christ</li>
<li>Draw inspiration from their virtues and dedication</li>
<li>Mark important moments in the Church's liturgical calendar</li>
<li>Connect with the universal Church across time and space</li>
</ul>
<h3>Praying to Saints</h3>
<p>Catholics don't worship saints but rather ask for their intercession - similar to asking a friend to pray for us. This practice is based on the belief that:</p>
<ul>
<li>Saints are alive in Christ and part of the Church Triumphant</li>
<li>They can intercede for us before God, just as we pray for each other on earth</li>
<li>Their lives serve as models of holiness and inspiration</li>
<li>They form part of the "communion of saints" that unites all believers</li>
</ul>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.saint-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1
});
cards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
observer.observe(card);
});
});
</script>
</body>
</html>