PUBLISH
This commit is contained in:
parent
858c725bac
commit
ade4dfd1d2
8 changed files with 56 additions and 34 deletions
|
|
@ -115,6 +115,30 @@
|
|||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">The French Dispatch</h3>
|
||||
</header>
|
||||
<div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
<img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
|
||||
<span class="numbers">7.2</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/the-french-dispatch/">
|
||||
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.jpg alt="Kingsman: The Secret Service" />
|
||||
|
|
@ -139,6 +163,16 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="cluster spacing:between p1" style="align-items: flex-end;">
|
||||
<h2>Drama</h2>
|
||||
<a href="drama" class="button button:large">See more</a>
|
||||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
|
||||
|
|
@ -163,16 +197,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="cluster spacing:between p1" style="align-items: flex-end;">
|
||||
<h2>Drama</h2>
|
||||
<a href="drama" class="button button:large">See more</a>
|
||||
</header>
|
||||
<div class="carasol">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
|
||||
|
|
@ -197,30 +221,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
|
||||
|
||||
</div>
|
||||
<section class="card-content">
|
||||
<header>
|
||||
<h3 class="subtitle">The French Dispatch</h3>
|
||||
</header>
|
||||
<div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
|
||||
<div class="cluster spacing:between">
|
||||
<div class="cluster s1 align:center">
|
||||
<img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
|
||||
<span class="numbers">7.2</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="/film/reviews/the-french-dispatch/">
|
||||
Read review
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
.review-poster {
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
flex-basis: 200px;
|
||||
max-width: 200px;
|
||||
|
|
@ -32,3 +33,13 @@
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.review-favorite {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
padding: 10px;
|
||||
background: rgba(255,255,255,0.25);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
<div class="review-poster">
|
||||
<img src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.jpg alt="Poster">
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Kingsman: The Secret Service</h1>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
<div class="review-poster">
|
||||
<img src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="Poster">
|
||||
|
||||
</div>
|
||||
|
||||
<h1>No Reservations</h1>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
<div class="review-poster">
|
||||
<img src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="Poster">
|
||||
|
||||
</div>
|
||||
|
||||
<h1>The French Dispatch</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
const searchInput = document.getElementById('movie-search');
|
||||
const datalist = document.getElementById('movies');
|
||||
const dataitems = new Map();
|
||||
const dataSummaries = new Map();
|
||||
Array.from(datalist.children).forEach(function (ch) {
|
||||
dataitems.set(ch.value, ch.getAttribute('data-value'));
|
||||
if (navigator.userAgent.match(/firefox/i)) {
|
||||
ch.innerHTML = ch.value;
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener('change', function(e) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
const searchInput = document.getElementById('movie-search');
|
||||
const datalist = document.getElementById('movies');
|
||||
const dataitems = new Map();
|
||||
const dataSummaries = new Map();
|
||||
Array.from(datalist.children).forEach(function (ch) {
|
||||
dataitems.set(ch.value, ch.getAttribute('data-value'));
|
||||
if (navigator.userAgent.match(/firefox/i)) {
|
||||
ch.innerHTML = ch.value;
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener('change', function(e) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue