CaAlden/film
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PUBLISH: Box shadow styles on movie cards

Browse source
This commit is contained in:
Campbell Alden 2023-04-29 22:43:03 +09:00
parent bea7c4ec82
commit eae1db0662
4 changed files with 361 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/card.css
View file

@ -10,6 +10,7 @@
max-width: 280px; max-width: 280px;
padding: 10px; padding: 10px;
text-align: left; text-align: left;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
} }
.card-title-long { .card-title-long {

716
docs/genres/index.html
View file

@ -59,6 +59,30 @@
</header> </header>
<div class="carasol"> <div class="carasol">
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMzdjNjI5MmYtODhiNS00NTcyLWEzZmUtYzVmODM5YzExNDE3XkEyXkFqcGdeQXVyMTAyMjQ3NzQ1._V1_SX800.webp alt="Poster forThe Menu" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The Menu</h3>
</header>
<div>A high class dinner on a remote island turns out more sinister than the diners expect</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-menu/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Poster forFright Night" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Poster forFright Night" />
@ -89,30 +113,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMzdjNjI5MmYtODhiNS00NTcyLWEzZmUtYzVmODM5YzExNDE3XkEyXkFqcGdeQXVyMTAyMjQ3NzQ1._V1_SX800.webp alt="Poster forThe Menu" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">The Menu</h3>
</header>
<div>A high class dinner on a remote island turns out more sinister than the diners expect</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-menu/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -125,21 +125,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2RkYWVkZDQtNTMxMi00NWQ4LWE2ODctNmQzOWM2NjQzYzdlXkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_SX800.webp alt="Poster forMission: Impossible II" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Mission: Impossible II</h3> <h3 class="subtitle">John Wick</h3>
</header> </header>
<div>Ethan Hunt is back to stop a rouge IMF agent from unleashing a deadly virus</div> <div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">3/5</span> <span class="numbers">5/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/mission-impossible-2/"> <a class="button" href="/film/reviews/john-wick/">
Read review Read review
</a> </a>
</div> </div>
@ -207,6 +207,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">In Time</h3>
</header>
<div>A dystopian future where time is literally money</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/in-time/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" />
@ -231,30 +255,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">John Wick</h3>
</header>
<div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/john-wick/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMzdjNjI5MmYtODhiNS00NTcyLWEzZmUtYzVmODM5YzExNDE3XkEyXkFqcGdeQXVyMTAyMjQ3NzQ1._V1_SX800.webp alt="Poster forThe Menu" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMzdjNjI5MmYtODhiNS00NTcyLWEzZmUtYzVmODM5YzExNDE3XkEyXkFqcGdeQXVyMTAyMjQ3NzQ1._V1_SX800.webp alt="Poster forThe Menu" />
@ -279,6 +279,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2RkYWVkZDQtNTMxMi00NWQ4LWE2ODctNmQzOWM2NjQzYzdlXkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_SX800.webp alt="Poster forMission: Impossible II" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">Mission: Impossible II</h3>
</header>
<div>Ethan Hunt is back to stop a rouge IMF agent from unleashing a deadly virus</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/mission-impossible-2/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTc3NjI2MjU0Nl5BMl5BanBnXkFtZTgwNDk3ODYxMTE@._V1_SX800.webp alt="Poster forMission: Impossible" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTc3NjI2MjU0Nl5BMl5BanBnXkFtZTgwNDk3ODYxMTE@._V1_SX800.webp alt="Poster forMission: Impossible" />
@ -303,30 +327,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">In Time</h3>
</header>
<div>A dystopian future where time is literally money</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/in-time/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -339,21 +339,45 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3> <h3 class="subtitle">John Wick</h3>
</header> </header>
<div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div> <div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">5/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/kingsman/"> <a class="button" href="/film/reviews/john-wick/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">The School for Good and Evil</h3>
</header>
<div>Two friends embark on a fairy tale at a school for heroes and villains</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-school-for-good-and-evil/">
Read review Read review
</a> </a>
</div> </div>
@ -387,93 +411,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Poster forBeverly Hills Cop" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Mission: Impossible III</h3> <h3 class="subtitle">Beverly Hills Cop</h3>
</header> </header>
<div>Ethan Hunt is pulled out of retirement to stop the biggest bad yet</div> <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/mission-impossible-3/"> <a class="button" href="/film/reviews/beverly-hills-cop/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">John Wick</h3>
</header>
<div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/john-wick/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">In Time</h3>
</header>
<div>A dystopian future where time is literally money</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/in-time/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">The School for Good and Evil</h3>
</header>
<div>Two friends embark on a fairy tale at a school for heroes and villains</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-school-for-good-and-evil/">
Read review Read review
</a> </a>
</div> </div>
@ -537,21 +489,69 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Poster forBeverly Hills Cop" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle">Beverly Hills Cop</h3> <h3 class="subtitle">In Time</h3>
</header> </header>
<div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div> <div>A dystopian future where time is literally money</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/beverly-hills-cop/"> <a class="button" href="/film/reviews/in-time/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">Mission: Impossible III</h3>
</header>
<div>Ethan Hunt is pulled out of retirement to stop the biggest bad yet</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/mission-impossible-3/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTc3NjI2MjU0Nl5BMl5BanBnXkFtZTgwNDk3ODYxMTE@._V1_SX800.webp alt="Poster forMission: Impossible" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Mission: Impossible</h3>
</header>
<div>An American spy must pull off an &lsquo;impossible&rsquo; heist after his team is betrayed</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/mission-impossible/">
Read review Read review
</a> </a>
</div> </div>
@ -591,41 +591,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTc3NjI2MjU0Nl5BMl5BanBnXkFtZTgwNDk3ODYxMTE@._V1_SX800.webp alt="Poster forMission: Impossible" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Mission: Impossible</h3>
</header>
<div>An American spy must pull off an &lsquo;impossible&rsquo; heist after his team is betrayed</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/mission-impossible/">
Read review
</a>
</div>
</div>
</div>
</div>
</section>
<section>
<header class="cluster spacing:between p1" style="align-items: flex-end;">
<h2>Adventure</h2>
<a href="adventure" class="button button:large">See more</a>
</header>
<div class="carasol">
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
</div> </div>
<section class="card-content"> <section class="card-content">
@ -647,6 +613,16 @@
</div> </div>
</div>
</section>
<section>
<header class="cluster spacing:between p1" style="align-items: flex-end;">
<h2>Adventure</h2>
<a href="adventure" class="button button:large">See more</a>
</header>
<div class="carasol">
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2RkYWVkZDQtNTMxMi00NWQ4LWE2ODctNmQzOWM2NjQzYzdlXkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_SX800.webp alt="Poster forMission: Impossible II" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2RkYWVkZDQtNTMxMi00NWQ4LWE2ODctNmQzOWM2NjQzYzdlXkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_SX800.webp alt="Poster forMission: Impossible II" />
@ -671,6 +647,36 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNjRlZmM0ODktY2RjNS00ZDdjLWJhZGYtNDljNWZkMGM5MTg0XkEyXkFqcGdeQXVyNjAwMjI5MDk@._V1_SX800.webp alt="Poster forMission: Impossible - Fallout" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</a>
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">Mission: Impossible - Fallout</h3>
</header>
<div>Ethan and the team race to prevent old foes from enacting a nuclear disaster</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/mission-impossible-fallout/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" />
@ -703,51 +709,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNjRlZmM0ODktY2RjNS00ZDdjLWJhZGYtNDljNWZkMGM5MTg0XkEyXkFqcGdeQXVyNjAwMjI5MDk@._V1_SX800.webp alt="Poster forMission: Impossible - Fallout" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</a>
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Mission: Impossible - Fallout</h3> <h3 class="subtitle card-title-long">Mission: Impossible III</h3>
</header> </header>
<div>Ethan and the team race to prevent old foes from enacting a nuclear disaster</div> <div>Ethan Hunt is pulled out of retirement to stop the biggest bad yet</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">5/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/mission-impossible-fallout/"> <a class="button" href="/film/reviews/mission-impossible-3/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Now You See Me 2</h3>
</header>
<div>A group of magicians are coerced into pulling off another heist</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">2/5</span>
</div>
<div>
<a class="button" href="/film/reviews/now-you-see-me-2/">
Read review Read review
</a> </a>
</div> </div>
@ -781,21 +757,45 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BOThhNTA1YjItYzk2Ny00M2Y1LWJlYWUtZDQyZDU0YmY5Y2M5XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX800.webp alt="Poster forMission: Impossible III" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Mission: Impossible III</h3> <h3 class="subtitle">Now You See Me 2</h3>
</header> </header>
<div>Ethan Hunt is pulled out of retirement to stop the biggest bad yet</div> <div>A group of magicians are coerced into pulling off another heist</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">2/5</span>
</div>
<div>
<a class="button" href="/film/reviews/now-you-see-me-2/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
</header>
<div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/mission-impossible-3/"> <a class="button" href="/film/reviews/kingsman/">
Read review Read review
</a> </a>
</div> </div>
@ -815,21 +815,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">The School for Good and Evil</h3> <h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
</header> </header>
<div>Two friends embark on a fairy tale at a school for heroes and villains</div> <div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">3/5</span> <span class="numbers">4/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/the-school-for-good-and-evil/"> <a class="button" href="/film/reviews/o-brother-where-art-thou/">
Read review Read review
</a> </a>
</div> </div>
@ -839,21 +839,27 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</a>
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3> <h3 class="subtitle">Holes</h3>
</header> </header>
<div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div> <div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">4/5</span> <span class="numbers">3/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/kingsman/"> <a class="button" href="/film/reviews/holes/">
Read review Read review
</a> </a>
</div> </div>
@ -885,6 +891,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
</header>
<div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/kingsman/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
@ -911,27 +941,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
<a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
<span hidden>Favorite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</a>
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle">Holes</h3> <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
</header> </header>
<div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested</div> <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">3/5</span> <span class="numbers">3/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/holes/"> <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
Read review Read review
</a> </a>
</div> </div>
@ -963,30 +987,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
</header>
<div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/o-brother-where-art-thou/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -1021,30 +1021,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
</header>
<div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/o-brother-where-art-thou/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Poster forNow You See Me" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Poster forNow You See Me" />
@ -1075,6 +1051,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
</header>
<div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">4/5</span>
</div>
<div>
<a class="button" href="/film/reviews/o-brother-where-art-thou/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" /> <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
@ -1111,21 +1111,21 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
</div> </div>
<section class="card-content"> <section class="card-content">
<header> <header>
<h3 class="subtitle">Whisper of the Heart</h3> <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
</header> </header>
<div>A slice of life story about a bookish middle school girl living in Tokyo</div> <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
<div class="cluster spacing:between"> <div class="cluster spacing:between">
<div class="cluster s1 align:center"> <div class="cluster s1 align:center">
Rating: Rating:
<span class="numbers">5/5</span> <span class="numbers">3/5</span>
</div> </div>
<div> <div>
<a class="button" href="/film/reviews/whisper-of-the-heart/"> <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
Read review Read review
</a> </a>
</div> </div>
@ -1165,31 +1165,7 @@
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle card-title-long">The School for Good and Evil</h3>
</header>
<div>Two friends embark on a fairy tale at a school for heroes and villains</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">3/5</span>
</div>
<div>
<a class="button" href="/film/reviews/the-school-for-good-and-evil/">
Read review
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" />
</div> </div>
<section class="card-content"> <section class="card-content">
@ -1235,6 +1211,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Whisper of the Heart</h3>
</header>
<div>A slice of life story about a bookish middle school girl living in Tokyo</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/whisper-of-the-heart/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>
@ -1337,30 +1337,6 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Whisper of the Heart</h3>
</header>
<div>A slice of life story about a bookish middle school girl living in Tokyo</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/whisper-of-the-heart/">
Read review
</a>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" /> <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" />
@ -1385,6 +1361,30 @@
</div> </div>
<div class="card">
<div class="card-image">
<img class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" />
</div>
<section class="card-content">
<header>
<h3 class="subtitle">Whisper of the Heart</h3>
</header>
<div>A slice of life story about a bookish middle school girl living in Tokyo</div>
<div class="cluster spacing:between">
<div class="cluster s1 align:center">
Rating:
<span class="numbers">5/5</span>
</div>
<div>
<a class="button" href="/film/reviews/whisper-of-the-heart/">
Read review
</a>
</div>
</div>
</div>
</div> </div>
</section> </section>

2
docs/index.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head> <html lang="en"><head>
<meta name="generator" content="Hugo 0.110.0"> <meta name="generator" content="Hugo 0.111.3">
<title>CaAlden: Films</title> <title>CaAlden: Films</title>
<meta property="og:title" content="CaAlden: Films" /> <meta property="og:title" content="CaAlden: Films" />

1
static/card.css
View file

@ -10,6 +10,7 @@
max-width: 280px; max-width: 280px;
padding: 10px; padding: 10px;
text-align: left; text-align: left;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
} }
.card-title-long { .card-title-long {