Overview

This template consists of two colors and five images. You can change the #scars id.

• imageColor: Images color.
• quoteColor: Quote's background color.
• image1 -> image5: Images URL top to bottom.

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

Preview

Preview mode not available on mobile

This is the story of becoming a hero the hard way.

But you're dying to be loved.

Fearless Child,
Broken boy;
Tell what it's like to be burn.

Are you afraid of yourself?

We can simultaneously be human and monster. That both of those possibilities are in all of us.

Codes

<link rel="stylesheet" type="text/css"
    href="https://dl.dropbox.com/scl/fi/emo5izf6sx6uccgpe95tb/scars.css?rlkey=degil1b5xyhk8b9px7cqwoxu1&st=0mapuhy9&dl=0" />

<style>
    #scars {
        --imageColor: rgb(95, 132, 138, 0.7);
        --quoteColor: rgb(95, 132, 138, 0.9);

        --image1: url(https://i.pinimg.com/474x/ac/ac/3a/acac3a94c739e4076b78177e8f3afb0d.jpg);
        --image2: url(https://i.pinimg.com/564x/35/b4/c4/35b4c48de1aee0e1bf2363938f845b99.jpg);
        --image3: url(https://i.pinimg.com/474x/0b/f8/f3/0bf8f3899ed903a9bc7404731d381b7a.jpg);
        --image4: url(https://i.pinimg.com/474x/0b/1f/26/0b1f26c94c3ffcef8b12dd2e104b56c3.jpg);
        --image5: url(https://i.pinimg.com/474x/bc/dd/ce/bcddcee4119969a7e6d1a7dce1f448d4.jpg);
    }
</style>

<div id="scars" class="quoteBack">
    <div class="imageBox" style="background-image: var(--image1)"></div>
    <div class="quoteBox">
        <h2 style="text-align: justify">
            This is the story of becoming a hero the hard way.
        </h2>
    </div>

    <div class="quoteBox">
        <h2>But you're dying to be loved.</h2>
    </div>
    <div class="imageBox" style="background-image: var(--image2)"></div>

    <div class="imageBox" style="background-image: var(--image3)"></div>
    <div class="quoteBox">
        <h2>
            Fearless Child, <br />
            Broken boy; <br />
            Tell what it's like to be burn.
        </h2>
    </div>

    <div class="quoteBox" style="text-align: justify">
        <h2>
            <p>Are you afraid of yourself?</p>
        </h2>
    </div>
    <div class="imageBox" style="background-image: var(--image4)"></div>

    <div class="imageBox" style="background-image: var(--image5)"></div>
    <div class="quoteBox">
        <h2 style="text-align: justify">
            We can simultaneously be human and monster. That both of those
            possibilities are in all of us.
        </h2>
    </div>
    <a href="https://www.mytinyiglu.com/forum/Ice%20Bear" title="template by: Ice Bear" class="credScars">
    </a>
</div>

Similar Templates