letterboxd top 4 code

display example:

FAVORITE FILMS

---

Spider-Man: Into the Spider-Verse (2018)

Perfect Blue (1997)

The Dark Knight (2008)

Logan (2017)

this is also mobile friendly :) please lmk if there are any bugs and i will fix them ASAP

note: will need to be adjusted to suit your film taste, adjustments to be made will be marked with a squared bracket (remove the square brackets when pasting in data but not the quote marks) as well as a comment

customisable code:

<!-- made by ray (https://spacehey.com/deadonarrival) -->

<section id="top4">
    <p>FAVORITE FILMS</p>
    <hr>

    <div id="films">

        <div class="film">
            <div class="film-cover">
                <a href="[link to films letterboxd page - optional]"> <!-- adjustment needed -->
                    <img src="[image cover of the film]"> <!-- adjustment needed -->
                </a>
            </div>
            <div class="film-title">[film title] ([year])</div> <!-- 2 adjustments needed -->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link to films letterboxd page - optional]"> <!-- adjustment needed -->
                    <img src="[image cover of the film]"> <!-- adjustment needed -->
                </a>
            </div>
            <div class="film-title">[film title] ([year])</div> <!-- 2 adjustments needed -->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link to films letterboxd page - optional]"> <!-- adjustment needed -->
                    <img src="[image cover of the film]"> <!-- adjustment needed -->
                </a>
            </div>
            <div class="film-title">[film title] ([year])</div> <!-- 2 adjustments needed -->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link to films letterboxd page - optional]"> <!-- adjustment needed -->
                    <img src="[image cover of the film]"> <!-- adjustment needed -->
                </a>
            </div>
            <div class="film-title">[film title] ([year])</div> <!-- 2 adjustments needed -->
            <div class="down-arrow"></div>
        </div>

    </div>
</section>

<style>
#top4 {
    background: #171B20;
    border: 1px solid rgb(72, 90, 108);
    border-radius: 3px;
}

#top4 p {
    color: #99a9b9;
    font-family: GraphikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 0px 10px 0;
}

#top4 hr {
    border: 1px solid rgb(72, 90, 108);
    width: 95%;
}

#films {
    display: flex;
    padding: 4px;
}

.film {
    flex: 1;
    position: relative;
}

.film-cover {
    width: 95%;
    border: 1px solid rgb(72, 90, 108);
    border-radius: 3px;
    margin: 2px;
    transition: border-color .3s;
}

.film-cover:hover {
    border-color: lime;
}

.film-cover img {
    display: block;
    width: 100%!important;
    border-radius: 3px;
}

#top4 a {
    display: block;
}

.film-title {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    background: rgb(72, 90, 108);
    color: #DEF;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: GraphikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 1001;
}

.down-arrow {
  position: absolute;
  left: 45%;
  bottom: calc(100% + 3px);
  width: 14px;
  height: 14px;
  background: rgb(72, 90, 108);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 1000;
}

.film:hover .film-title,
.film:hover .down-arrow {
    opacity: 1;
}

.blog-entry .content *, .bulletin .content *, .topic-box .content *, .reply-box .content * {
  max-width: none !important;
}
</style>