Site logo
Avatar:

Desire

images, quote
Avatar:

Moodboard

Overview

This template consists of one color, and six images that you can change on the #desire id.

  • mainColor: Main color for the entire template.
  • imgMain: Center image.
  • imgTop: Top image.
  • imgBack: Back image (better to be an icon).
  • imgOne -> imgThree: Images URL from the bottom, left to right.

If you use more than once on the same page: change the id #desire 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/60qgp65uwu1ycsyza6xkl/desire.css?rlkey=6flc402zrivprybowyh87qifn&st=gs0888et&dl=0" />

<style>
    #desire {
        --mainColor: #5a9154;

        --filter: invert(55%) sepia(7%) saturate(3037%) hue-rotate(67deg) brightness(92%) contrast(76%);

        --imgPos: center;

        --imgMain: url(https://64.media.tumblr.com/6ca660bbbaeb11312eb057e61e3a46f9/966ef33396b76a11-80/s1280x1920/57a7c0d502537df51ba0a845f6b0f6ca75b60ee3.pnj);
        --imgTop: url(https://i.pinimg.com/564x/ac/a0/e9/aca0e97675e31d2a09f4d4e5c8c34947.jpg);
        --imgBack: url(https://images2.imgbox.com/cf/e1/dwFkoSH5_o.png);
        --imgOne: url(https://i.pinimg.com/474x/ba/4c/13/ba4c13f288ea779e51edba3b797407af.jpg);
        --imgTwo: url(https://64.media.tumblr.com/aae19cf15919ff37a5bcddf2999b0bf9/05845d2d922a8c12-dc/s640x960/a343feb5cc4f6f9a403e139b7771baf25ea2b5b2.gifv);
        --imgThree: url(https://i.pinimg.com/474x/cd/b6/8f/cdb68f8625014e222e8cf8f328527690.jpg);

        --shadown: -1px 2px 5px 0px rgba(0, 0, 0, 0.37);
    }
</style>

<div id="desire" class="desire_wrapper">
    <div class="desire__top">
        <div class="imgDP"></div>
        <p>
            “We locked away our monsters Skeletons in the closets Bad things don't
            like to be kept in ”
        </p>
    </div>
    <div class="imgD"></div>
    <div class="desire__bottom">
        <div class="imgD"></div>
        <div class="imgD" style="background-image: var(--imgTwo)"></div>
        <div class="imgD" style="background-image: var(--imgThree)"></div>
    </div>
    <div class="sign"></div>
</div>

My tiny iglu by Ice Bear 2024 - 2025

version 1.2.0