Site logo
Avatar:

Stay Forever

images, gif, quote
Avatar:

Moodboard

Overview

This template has six colors, five images, and a gif. You can change it on the #stayForever id.

  • mainColor03: Images and quote background color.
  • color1: Gif and first rectangle color.
  • color2 -> color5: Rectangles colors (left to right, starting from the second).
  • img1 -> img3: Images URL from the top row (left to right).
  • img4, img5: Images URL from the bottom row (left to right).
  • gif: Gif URL.

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

preview

Preview mode not available on mobile

Code

<link rel="stylesheet" type="text/css"
    href="https://dl.dropbox.com/scl/fi/x7llz7vdehouc2fwfnux3/stay-forever.css?rlkey=eon4the8qswn7bvgclfc4vm4g&st=9p3ebe2y&dl=0" />

<style>
    #stayForever {
        --mainFont: "Rubik", sans-serif;
        --fontColos: #0c271d;

        --mainColor03: rgb(48, 155, 118, 0.6);

        --color1: #283049;
        --color2: #8f8c99;
        --color3: #b5a3a8;
        --color4: #4c412e;
        --color5: #251a17;

        --img1: url(https://i.imgur.com/GeE4cIT.jpg);
        --img2: url(https://i.imgur.com/mmgMNea.jpg);
        --img3: url(https://i.imgur.com/hzm3aLC.jpg);

        --img4: url(https://i.imgur.com/oLrcESz.png);
        --img5: url(https://i.imgur.com/v7b9YFK.png);

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

<div id="stayForever" class="moodBack">
    <div class="moodGif"></div>
    <div class="moodImage1"></div>

    <div class="moodBox">
        <div class="moodImage2"></div>
        <div class="moodImage3"></div>

        <div class="moodImage4">
            <i>If I had one wish, <br />
                you'd stay forever.
            </i>
        </div>
    </div>

    <div class="moodBoxColors">
        <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>
        <color style="background-color: var(--color5)"> </color>
    </div>
    <a href=""> </a>
    <div class="moodImage4" style="
  width: calc(50% - 2.5px);
  background-color: var(--mainColor03);
  background-image: var(--img4);
 "></div>
    <div class="moodImage5" style="width: calc(50% - 2.5px)"></div>

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

My tiny iglu by Ice Bear 2024 - 2025

version 1.2.0