Overview

This template has five colors, five images, and a gif you can change on the #greatest id.

• primeColor: Images, gif, and quotes background color.
• color1 -> color4: Bottom rectangles colors (left to right).
• img1: First image URL (the top left one).
• img2: URL of the second collum square image.
• img3: URL of the top last collum image (the top right one).
• img4, img5: Bottom images URL (left to right).

If you use more than once on the same page: change the id #greatest in style and the first div of the HTML.

Preview

Preview mode not available on mobile

Me at 2 am:
I should bake a cake

Code

<link rel="stylesheet" type="text/css"
    href="https://dl.dropbox.com/scl/fi/spz695b8l9p022gsvn6nk/greatest.css?rlkey=v4twj9lf60p4f2s44z4jfgdph&st=f1wt89q2&dl=0" />

<style>
    #greatest {
        --primeColor: rgb(88, 142, 101, 0.7);

        --color1: #8aaf93;
        --color2: #858857;
        --color3: #787c65;
        --color4: #323e0f;

        --img1: url(https://i.imgur.com/LCC5hUP.jpg);
        --img2: url(https://i.imgur.com/ja8N3Sg.jpg);
        --img3: url(https://i.imgur.com/bMWlXpd.jpg);

        --img4: url(https://i.imgur.com/Z7S4dDb.png);
        --img5: url(https://i.imgur.com/JHmaIHI.jpg);

        --gif: url(https://images2.imgbox.com/20/7d/faNtw6bH_o.gif);
    }
</style>

<div id="greatest" class="greatestBack">
    <div class="greatestGif"></div>

    <div class="greatestBox">
        <div class="greatestImg" style="background-image: var(--img1)"></div>
        <div class="greatestImg greatestImg3" style="text-align: center">
            <i>Me at 2 am: <br />
                I should bake a cake</i>
        </div>
        <div class="greatestImg greatestImg3" style="background-image: var(--img2)"></div>
    </div>

    <div class="greatestImg greatestImg2" style="background-image: var(--img3)"></div>
    <div class="greatestImg greatestImg4" style="background-image: var(--img4)"></div>
    <div class="greatestImg" style="background-image: var(--img5)"></div>

    <color style="background-color: var(--color1)"> </color>
    <color style="background-color: var(--color2)"> </color>
    <color style="background-color: var(--color3)"> </color>
    <color style="background-color: var(--color4)"> </color>

    <a href="https://www.mytinyiglu.com/forum/Ice%20Bear" title="template by: Ice Bear" class="credgreatest">
    </a>
</div>

Similar Templates

Greatest

Moodboard

Overview

Preview

Code