|
<div class="cards">
<div class="card-background border-outer">
<div class="border-inner">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Venice_MAN_98_Statue_of_Odysseus_01.jpg/960px-Venice_MAN_98_Statue_of_Odysseus_01.jpg" />
</div>
</div>
<div class="card-content border-outer">
<div class="border-inner">
<div class="card-content-layout">
<h2 class="vertical-title">Odysseus</h2>
<h2>Odysseus</h2>
<h3>Odysseus is the clever, resilient king of Ithaca, renowned for his wit and determination.</h3>
<p>The Odyssey recounts Odysseus' long struggle to return home after the Trojan War, as he survives divine hostility, monsters, and constant hardship through ingenuity and endurance. His journey tests his identity and judgment, and when he finally reaches Ithaca, he uses strategy and disguise to defeat the suitors and restore order to his house and kingdom.</p>
</div>
</div>
<label class="toggle">
<input type="radio" name="accordion" id="Odysseus" checked />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</label>
</div>
</div>
</div>
<div class="card-background border-outer">
<div class="border-inner">
<img src="https://www.pafa.org/sites/default/files/artworkpics/1851_2_l.jpg" />
</div>
</div>
<div class="card-content border-outer">
<div class="border-inner">
<div class="card-content-layout">
<h2 class="vertical-title">Penelope</h2>
<h2>Penelope</h2>
<h3>Penelope is Odysseus’s loyal and intelligent wife, admired for her patience and cunning.</h3>
<p>While besieged by suitors, Penelope maintains stability in Ithaca by using clever delays and protecting her household. Her steadfastness and subtle intelligence balance Odysseus’s adventures, and her careful testing of him upon his return provides the emotional resolution of the epic.</p>
</div>
</div>
<label class="toggle">
<input type="radio" name="accordion" id="Penelope" />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</label>
</div>
</div>
</div>
<div class="card-background border-outer">
<div class="border-inner">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Telemachos_Saarbruecken.jpg/500px-Telemachos_Saarbruecken.jpg" />
</div>
</div>
<div class="card-content border-outer">
<div class="border-inner">
<div class="card-content-layout">
<h2 class="vertical-title">Telemachus</h2>
<h2>Telemachus</h2>
<h3>Telemachus is the young son of Odysseus who grows from a passive youth into a capable heir.</h3>
<p>Telemachus’s journey marks his transformation into adulthood as he seeks news of his father and learns leadership from figures like Nestor and Menelaus. His newfound confidence culminates in fighting alongside Odysseus to reclaim their household and help restore rightful order in Ithaca.</p>
</div>
</div>
<label class="toggle">
<input type="radio" name="accordion" id="Telemachus" />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</label>
</div>
</div>
</div>
</div>
|
