Overview

This template consists of four colors and ten images you can change on the #friendInMe ID.

• darkton: Color of the top-right dot and bottom-right.
• midton: Color of the middle dot and title.
• softton: Color of the top-left dot and bottom-left.
• cphrase: Text color.
• img1 -> img3: URL of the top images in order (left to right).
• img4 -> img7: URL of the square middle images (left to right).
• img8 -> img10: URL of the bottom images in order (left to right).

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

Preview

Preview mode not available on mobile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu quam, iaculis sit amet venenatis eu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu quam, iaculis sit amet venenatis eu, dapibus eget metus.

Name / Name

Code

<div id="friendInMe">
    <div class="wplay_play">
        <div class="bimg_play">
            <div class="imagePlay" style="background-image: var(--img1)"></div>
            <div class="imagePlay" style="background-image: var(--img2)"></div>
            <div class="imagePlay" style="background-image: var(--img3)"></div>
        </div>

        <div class="bimg_play" style="top: 300px">
            <div class="imagePlay" style="background-image: var(--img8)"></div>
            <div class="imagePlay" style="background-image: var(--img9)"></div>
            <div class="imagePlay" style="background-image: var(--img10)"></div>
        </div>

        <div class="color_play"></div>
        <div class="color_play" style="right: 80px; background-color: var(--midton)"></div>
        <div class="color_play" style="right: 140px; background-color: var(--softton)"></div>

        <div class="color_play" style="left: 20px; top: 430px; background-color: var(--softton)"></div>
        <div class="color_play" style="left: 80px; top: 430px; background-color: var(--midton)"></div>
        <div class="color_play" style="left: 140px; top: 430px"></div>

        <div class="img_play" style="z-index: 10">
            <div class="imagePlay" style="background-image: var(--img6)"></div>
        </div>

        <div class="img_play" style="top: 200px; right: 220px">
            <div class="imagePlay" style="background-image: var(--img7)"></div>
        </div>

        <div class="img_play" style="z-index: 20; right: 420px">
            <div class="imagePlay" style="background-image: var(--img4)"></div>
        </div>

        <div class="img_play" style="top: 200px; right: 360px; z-index: 15">
            <div class="imagePlay" style="background-image: var(--img5)"></div>
        </div>

        <div class="phrase_play">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu quam,
            iaculis sit amet venenatis eu.
        </div>

        <div class="phrase_play" style="width: 280px; top: 440px; right: 40px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu quam,
            iaculis sit amet venenatis eu, dapibus eget metus.
        </div>

        <div class="tittle_play">Name / Name</div>

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

Similar Templates

Friend In Me

Moodboard

Overview

Preview

Code