Overview

This template has six colors, seven images, and a gif you can change on the #LoveStory ID.

• backColor: Images, gif, and quotes background color.
• color1: First column rectangle color.
• color2, color3: Second column rectangles color (top to bottom).
• color4, color5: Last column rectangles color (top to bottom).
• image1, image2: Images URL from the first column (top to bottom).
• image3 -> image5: Images URL from the second column (top to bottom).
• image6, image7: Images URL from the last column (top to bottom).
• gif: Gif URL.

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

Preview

Preview mode not available on mobile

and I said: Romeo, take me somewhere we can be alone.

i'll be waiting, all there's left to do is run You'll be the prince and I'll be the princess.

Code

<link rel="stylesheet" type="text/css"
    href="https://dl.dropbox.com/scl/fi/lu1q4uec607hwoqf6kjjm/love-story.css?rlkey=mqq9nawo6izll5x74aucseb6t&st=ax5jptc6&dl=0" />

<style>
    #LoveStory {
        --backColor: rgb(9, 124, 142, 0.4);

        --color1: #097c8e;
        --color2: #097c8e;
        --color3: #097c8e;
        --color4: #097c8e;
        --color5: #097c8e;

        --image1: url(https://66.media.tumblr.com/cfa71be724a86e2d42f1dafa5c620bec/tumblr_ptketnSL7f1wes5cs_500.png);
        --image2: url(https://66.media.tumblr.com/f495dc749d01366782777c1f2090741f/tumblr_p2msbxXfX01w8fhxoo2_250.png);

        --image3: url(https://64.media.tumblr.com/b150544f38c8b101f5f3c6af7057afc3/tumblr_pnz2853AX41wxv71b_400.jpg);
        --image4: url(https://i.pinimg.com/474x/2c/20/cd/2c20cded70f9d31f93361c0361217acd.jpg);
        --image5: url(https://i0.wp.com/mundoperdido.com.br/wp-content/uploads/2019/06/Frases-tumblr-casal.jpg?fit=1080%2C814&ssl=1);

        --image6: url(https://i.pinimg.com/736x/38/25/cd/3825cdea2fd5e9ce5ddee263211d1632.jpg);
        --image7: url(https://f.i.uol.com.br/fotografia/2018/10/24/15404103655bd0cbfd3c890_1540410365_3x2_md.jpg);

        --mainFont: "Roboto", sans-serif;

        --gif: url(https://66.media.tumblr.com/af8278640abd7c338b2b985fb3aa581f/tumblr_muw1qxkpyC1s9cu9fo1_400.gifv);
    }
</style>

<div id="LoveStory" class="moodIBack">
    <div class="moodIGif"></div>

    <div class="moodIimage" style="background-image: var(--image1)"></div>
    <color style="background-color: var(--color1)"> </color>
    <div class="moodIimage" style="height: 144px">
        <h3>and I said: Romeo, take me somewhere we can be alone.</h3>
    </div>
    <div class="moodIimage" style="height: 171px; margin-bottom: 0px; background-image: var(--image2)"></div>

    <div class="moodIimage" style="height: 144px; background-image: var(--image3)"></div>
    <color style="background-color: var(--color2)"> </color>
    <div class="moodIimage" style="height: 202px; background-image: var(--image4)"></div>
    <div class="moodIimage" style="height: 144px; background-image: var(--image5)"></div>
    <color style="margin-bottom: 0px; background-color: var(--color3)"> </color>

    <div class="moodIimage" style="height: 180px; background-image: var(--image6)"></div>
    <color style="background-color: var(--color4)"> </color>
    <div class="moodIimage" style="height: 144px">
        <h3>
            i'll be waiting, all there's left to do is run You'll be the prince and
            I'll be the princess.
        </h3>
    </div>
    <color style="background-color: var(--color5)"> </color>
    <div class="moodIimage" style="height: 166px; margin-bottom: 0px; background-image: var(--image7)"></div>

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

Similar Templates

Love Story

Thread Template

Overview

Preview

and I said: Romeo, take me somewhere we can be alone.

i'll be waiting, all there's left to do is run You'll be the prince and I'll be the princess.

Code