mymellohi.com

letterboxd top 4

display example:

FAVORITE FILMS

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

Perfect Blue (1997)

The Dark Knight (2008)

Logan (2017)

code:

<!--made by mellohi (https://mymellohi.com)-->
<section id="top4">
    <p>FAVORITE FILMS</p>
    <div class="lb-account">
        <a href="[link of letterboxd account]/"> <!--adjustment needed-->
            <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User Account Symbol">
        </a>
    </div>
    <hr>

    <div id="films">

        <div class="film">
            <div class="film-cover">
                <a href="[link of movie on letterboxd - optional]"> <!--adjustment needed OPTIONAL-->
                    <img
                        src="[png link of movie cover]" alt="Movie Cover"> <!--adjustment needed-->
                </a>
            </div>
            <div class="film-title">[Film name] ([year])</div> <!--2 adjustment needed-->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link of movie on letterboxd - optional]"> <!--adjustment needed OPTIONAL-->
                    <img
                        src="[png link of movie cover]" alt="Movie Cover"> <!--adjustment needed-->
                </a>
            </div>
            <div class="film-title">[Film name] ([year])</div> <!--2 adjustment needed-->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link of movie on letterboxd - optional]"> <!--adjustment needed OPTIONAL-->
                    <img
                        src="[png link of movie cover]" alt="Movie Cover"> <!--adjustment needed-->
                </a>
            </div>
            <div class="film-title">[Film name] ([year])</div> <!--2 adjustment needed-->
            <div class="down-arrow"></div>
        </div>

        <div class="film">
            <div class="film-cover">
                <a href="[link of movie on letterboxd - optional]"> <!--adjustment needed OPTIONAL-->
                    <img
                        src="[png link of movie cover]" alt="Movie Cover"> <!--adjustment needed-->
                </a>
            </div>
            <div class="film-title">[Film name] ([year])</div> <!--2 adjustment needed-->
            <div class="down-arrow"></div>
        </div>
    </div>
</section>

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

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

    #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%;
        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;
    }

    .lb-account img {
        width: 4% !important;
        float: right;
        filter: invert(1);
        padding: 10px;
    }
</style>
        </section>

letterboxd review

display example:

RECENT REVIEWSMORE

code:

<!--made by mellohi (https://mymellohi.com)-->
<section id="recent-reviews">
    <p>RECENT REVIEWS<a href="[letterboxd account url]" class="review-lb-account">MORE</a></p> <!--adjustment needed-->
    <hr/>

    <div id="review-films">

        <aside class="review-film">
            <div class="review-film-cover">
                <a href="[letterboxd film url]"> <!--adjustment needed OPTIONAL-->
                    <img src="[png of film cover]" alt="Movie Cover"/> <!--adjustment needed-->
                </a>
            </div>
            <div class="review-film-title">[film name] ([year])</div> <!--2 adjustment needed-->
            <div class="down-arrow"></div>
        </aside>
                    
        <aside class="film-review">
            <div class="top-line">
                <span class="review-title">[film name]</span> <!--adjustment needed-->
                <span class="release-date">[year]</span> <!--adjustment needed-->
            </div>
                        
            <div class="film-stats">
                <span class="rating">[stars]</span> <!--adjustment needed using ★ and ½ -->
                <span class="liked">❤︎</span> <!--can remove the heart if you want-->
                <span class="date">[watch date]</span> <!--adjustment needed-->
            </div>
                    	
            <div class="review">[review] <!--adjustment needed-->
            </div>
		</aside>
                   
    </div>
</section>

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

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

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

    #review-films {
        display: flex;
        padding: 4px;
        width: 100%;
    }

    .review-film {
        position: relative;
        padding: 10px;
        width: 25%;
    }

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

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

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

    #recent-reviews a {
        display: block;
    }

    .review-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;
    }

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

    .review-lb-account {
        color: #99a9b9;
        font-family: GraphikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-decoration: none;
        margin-top: -25px;
        text-align: right;
    }
                
    .review-title {
        color: #fff;
        font-family: TiemposTextWeb, Georgia, serif, ColorEmoji;
        font-weight: 700;
        font-size: 20px;
    }
                
    .review-title:hover, .release-date:hover, .review-lb-account:hover, #recent-reviews p:hover {
        color: #40BCF4;
        transition: 0.3s;
    }
                
    .release-date {
        color:#9ab;
        font-family: GraphikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif, ColorEmoji;
        margin-inline-start: .4em;
        font-weight: 300;
        font-size: 15px;
    }
                
    .top-line {
        margin: 10px;
    }
                
    .film-stats {
        font-size: 12px;
        margin: 0px 10px;
    }
                
    .film-review {
        width: 80%;
    }
                
    .rating {
        color: #00C030;
        margin-right: 5px;
        font-size: 15px;
    }
                
    .liked {
        color: #FF9933;
        margin-right: 5px;
    }
                
    .date {
        color: #678;
        font-family: GraphikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif, ColorEmoji;
        font-weight: 300;
    }
                
    .review {
        font-family: TiemposTextWeb, Georgia, serif, ColorEmoji;
        color: #9ab;
        margin: 10px 10px 20px 10px;
    }
                
</style>

mymellohi.com

custom codes

letterboxd top 4

letterboxd review