[P2U - £9] Interactive

Harrie

Info


Created
7 months, 8 days ago
Creator
Harrie
Favorites
1344

Profile


[£9 - Interactive]

Info

  • Mobile Friendly
  • Theme friendly
  • HTML Only — no premium required!
  • Pattern from Toptal Subtle Patterns
  • All other assets made by me. The example used is my character Tempest.
  • Poppy & Kabira belong to floralthief & cquaer
  • This code requires substantial HTML editing. There is a guide included, but you will need to be comfortable editing HTML to set this up.

Terms of Use

  • Do not remove the credit.
  • You may edit the code as needed, but you may not claim the code as your own.
  • Do not redistribute or copy my code. The code is only for use by the purchaser.
  • Unless marked as a placeholder, the assets & characters displayed here are not free for use. They are of my & my friend's characters, and here for example purposes only.

Ensure you have WYSIWYG turned OFF, and Code Editor turned ON when editing, or the code won't work! More info.

Making a comic, you end up with a lot of characters with interconnected stories. I'm also someone who likes to change up the appearance of my characters through the layers they wear and alternative outfits they have.

So I made a layout for myself to present this info in an interactive manner, and by popular request I am now releasing the code!

Features: Interactive design inspector with front & back views and alternative outfits, key items with descriptions, & relationship carousel.

Be aware that this is a code with no small amount of set-up. You will need to make a lot of assets — Tempest here has around 40 images. However Rosalie only needed 15! It depends on how complex and how many layers your character has.

tempest.png

Tempest

The Storm at Sea
  • Age 23
  • Pronouns She/Her
  • Orientation Lesbian

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis iaculis viverra leo, quis ornare ante consequat a. Phasellus vehicula magna in auctor hendrerit. Nulla facilisi. Aliquam quis scelerisque mauris. Praesent nisl lorem, gravida eu mollis id, tincidunt nec sapien. Nam orci purus, pellentesque vitae purus in, sodales fermentum tortor. Suspendisse commodo sapien vulputate, pellentesque tortor eget, cursus orci. Duis eget mollis velit. Vivamus pharetra orci a elementum viverra.

Heading 2

In nunc ligula, auctor eget eros eu, cursus tincidunt justo. Nullam viverra placerat nulla, ac consequat est egestas nec. Nullam volutpat felis lacinia, euismod arcu id, porta nisl. Sed ante felis, blandit in congue non, ultrices sed quam. Duis iaculis felis et orci auctor, eu dignissim nisi tristique. Fusce molestie facilisis velit quis vulputate. Vestibulum varius cursus maximus. Aenean feugiat finibus mattis. Ut euismod porta massa a ornare.

Aenean ut justo dolor. Etiam semper lobortis nibh, eget cursus erat. Vivamus vestibulum dolor nulla, at dapibus turpis faucibus vitae. Nam mattis neque ut tincidunt congue. Mauris feugiat nulla et nulla tristique, vel congue elit luctus. Nullam et cursus metus. Integer vitae hendrerit tellus. Proin eu sapien luctus, laoreet ligula sit amet, interdum dolor. Donec urna est, rhoncus tristique tempus a, accumsan vel ligula. Nam viverra consequat orci sit amet consequat. Sed ante nunc, vulputate vitae odio eu, egestas venenatis nunc. Nulla non blandit ligula, et condimentum ipsum. Maecenas aliquet sapien in sagittis varius. Sed sed libero imperdiet, rhoncus arcu a, ullamcorper dui. Mauris porttitor ex vehicula, congue lorem nec, facilisis est.

Clothing Layers

  • Hat
  • Coat
  • Accessories
  • Shirt

Key Items

Wand

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Halberd

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Hat

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Notes:

  • Donec a nisi quis purus iaculis finibus.
  • Donec sodales nulla vitae libero commodo, sed faucibus est hendrerit.
  • Nam venenatis urna vel ornare faucibus.
  • Mauris tempus libero nec sapien faucibus, vel fringilla enim malesuada.
  • Morbi porta risus quis augue rutrum, molestie finibus mi varius.

Clothing Layers

  • Hat
  • Coat
  • Sword
  • Vest
  • Shirt

Key Items

Sword

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Halberd

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Hat

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Notes:

  • Ut tincidunt turpis id nisl ornare placerat.
  • Vestibulum sagittis nunc lobortis, condimentum nulla nec, tristique nisl.
  • Duis ac massa condimentum, interdum libero in, elementum sem.
  • Nulla nec nulla quis velit pulvinar luctus accumsan vel lacus.

Relationships

callisto.png
aquila.png
lavandula.png
debauchery.png
kabira.png
poppy.png
rosalie.png
  • Affinity
  • Relationship "Friends"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Callisto
  • Affinity
  • Relationship Ex-Lovers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Aquila
  • Affinity
  • Relationship Unknown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Lavandula
  • Affinity
  • Relationship Friends

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Debauchery
  • Affinity
  • Relationship Ex-Lovers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

  • Affinity
  • Relationship Coersively Assigned Bestie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Poppy
  • Affinity
  • Relationship Acquaintances

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ornare nisl. Duis non risus molestie, posuere tortor non, cursus nisi. Cras pellentesque lacinia nisi non tempus. Cras molestie ut augue nec fringilla. Donec aliquet elementum maximus. Donec et metus eget lectus pharetra viverra. Nulla facilisi. Vivamus elementum urna eget libero ullamcorper dictum. Mauris scelerisque commodo condimentum. Nulla cursus venenatis leo ut tincidunt. Donec a semper mauris, vitae cursus nibh. Nam cursus semper iaculis.

Nunc pretium finibus interdum. Proin dapibus ut odio nec euismod. Nam dapibus non magna vel commodo. Ut nibh felis, sollicitudin non condimentum quis, consectetur in erat. Sed sed mollis velit. Aliquam vel tellus eget mauris ornare ultricies et quis velit. In volutpat leo purus, sit amet pellentesque est interdum vitae. Ut sed felis sit amet diam commodo tristique.

More about Rosalie
empty.png

Name

Subtitle or similar
  • Age Unknown
  • Pronouns Unspecified
  • Orientation Unspecified

Who is this character? Write a little something about them here.

If your description gets very long, the box will scroll!

Clothing Layers

  • Layer 1
  • Layer 2
  • Layer 3
  • Layer 4

Key Items

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Notes:

  • Donec a nisi quis purus iaculis finibus.
  • Donec sodales nulla vitae libero commodo, sed faucibus est hendrerit.
  • Nam venenatis urna vel ornare faucibus.
  • Mauris tempus libero nec sapien faucibus, vel fringilla enim malesuada.
  • Morbi porta risus quis augue rutrum, molestie finibus mi varius.

Clothing Layers

  • Layer 1
  • Layer 2
  • Layer 3
  • Layer 4

Key Items

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Item Name

A description of your item goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at rutrum nisi. Maecenas congue viverra nibh eu eleifend.

Morbi ut quam ex. Sed ornare arcu ut metus sagittis egestas.

Notes:

  • Welcome to tab 2, the assets here are all the same so this is just to let you know you are, in fact, on a different tab now. Hello!
  • Ut tincidunt turpis id nisl ornare placerat.
  • Vestibulum sagittis nunc lobortis, condimentum nulla nec, tristique nisl.
  • Duis ac massa condimentum, interdum libero in, elementum sem.
  • Nulla nec nulla quis velit pulvinar luctus accumsan vel lacus.

Relationships

empty.png
empty.png
empty.png
empty.png
empty.png
empty.png
empty.png
empty.png
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME
  • Affinity
  • Relationship Unknown

Write a little bit about their relationship here.

More about NAME