[F2U HTML] Hallownest

StormyStarlight

Info

Created
2 years, 1 month ago
Creator
StormyStarlight
Favorites
1524
code template HTML F2U character profile layout Hollow Knight non-character HK custom colors FtU bootstrap colors

Profile

Hallownest F2U HTML Character Profile Bootstrap Colors Custom Colors Mobile-Responsive
INFO TERMS CHANGES

A layout inspired by the video game Hollow Knight, intended for fan-characters of it.

This is a tabbed layout with a fixed height—all of the tab boxes will scroll if enough content is added to them. It's somewhat text-heavy, so it works best if your character has a lot of written information. It might be difficult to repurpose for a non-fan-character considering it uses a lot of assets specific to the game, but you're welcome to edit it as much as you'd like!

Check out this tab for a list of alternate tracks from the game to use for the music box and charm/item images to use in the inventory section.

  • Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
  • Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
  • Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout. You can change these settings here.
  • Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
  • Need assistance? Comment or message me for help!
26 Mar 2022:
  • Initial release!
9 Feb 2023:
  • Code restructuring to allow lines to be added to/removed from the basics column without having to manually readjust the height of the other box.
5 Oct 2023:
  • Switched image hosting from Discord to File Garden.
8 Apr 2023:
  • Added version: Custom Colors by graphic-ginger.
  • Minor adjustments to the way colors are defined in the original for parity's sake.
Featured:
Get the HTML! [Bootstrap] Get the HTML! [Custom Colors]

Last Updated: 8 Apr 2023

Basics hr_small.png
Name
Amber
Pronouns
she/her
Orientation
Unlabeled
Age
Adult
Species
Butterfly
Status
Alive
Residence
Kingdom's Edge
Occupation
Explorer
Affiliation
N/A
Alignment
True Neutral
hr_small.png

"Dirthmouth" - Christopher Larkin

title_header.png

Amber

title_footer.png

Character

mask.png mask_empty.png mask_empty.png mask_empty.png mask_empty.png

Adjective Adjective Adjective Adjective

Introvert Extrovert

Optimist Pessimist

Thinking Feeling

Apathetic Empathetic

Cautious Careless

Mature Immature

Likes

  • Item
  • Item
  • Item

Dislikes

  • Item
  • Item
  • Item

Notes

  • Item
  • Item
  • Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.

Design

mask.png mask.png mask_empty.png mask_empty.png mask_empty.png

#FFFAF2

Mask

#F9E8CC

Mask Fluff, Wing Markings

#FF6D35

Wing Markings, Necklace Gemstone

#693323

Necklace, Dress

#49231A

Dress

#261310

Wings, Carapace, Dress

#000000

Eyes, Antennae, Arms, Legs

ambercrop.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Design Notes

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
  • Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Inventory

mask.png mask.png mask.png mask_empty.png mask_empty.png
nail_old.png
wayward_compass.png gathering_swarm.png stalwart_shell.png soul_catcher.png empty.png
hr_wide.png hr_small.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

hr_wide.png hr_small.png

geo.png 76

History

mask.png mask.png mask.png mask.png mask_empty.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.

dialogue_header.png

"Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit."
—Source

dialogue_footer.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trivia

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
  • Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Connections

mask.png mask.png mask.png mask.png mask.png
5787420?1587955257

Spuk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

5788535?1587962404

Uru

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

6933037?1589667239

Rose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

6933249?1599970045

Solace

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

Basics hr_small.png
Name
Amber
Pronouns
she/her
Orientation
Unlabeled
Age
Adult
Species
Butterfly
Status
Alive
Residence
Kingdom's Edge
Occupation
Explorer
Affiliation
N/A
Alignment
True Neutral
hr_small.png

"Dirthmouth" - Christopher Larkin

title_header.png

Amber

title_footer.png

Character

mask.png mask_empty.png mask_empty.png mask_empty.png mask_empty.png

Adjective Adjective Adjective Adjective

Introvert Extrovert

Optimist Pessimist

Thinking Feeling

Apathetic Empathetic

Cautious Careless

Mature Immature

Likes

  • Item
  • Item
  • Item

Dislikes

  • Item
  • Item
  • Item

Notes

  • Item
  • Item
  • Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.

Design

mask.png mask.png mask_empty.png mask_empty.png mask_empty.png

#FFFAF2

Mask

#F9E8CC

Mask Fluff, Wing Markings

#FF6D35

Wing Markings, Necklace Gemstone

#693323

Necklace, Dress

#49231A

Dress

#261310

Wings, Carapace, Dress

#000000

Eyes, Antennae, Arms, Legs

ambercrop.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Design Notes

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
  • Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Inventory

mask.png mask.png mask.png mask_empty.png mask_empty.png
nail_old.png
wayward_compass.png gathering_swarm.png stalwart_shell.png soul_catcher.png empty.png
hr_wide.png hr_small.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio

hr_wide.png hr_small.png

geo.png 76

History

mask.png mask.png mask.png mask.png mask_empty.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.

dialogue_header.png

"Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit."
—Source

dialogue_footer.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trivia

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
  • Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

Connections

mask.png mask.png mask.png mask.png mask.png
5787420?1587955257

Spuk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

5788535?1587962404

Uru

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

6933037?1589667239

Rose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

6933249?1599970045

Solace

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.

This version was contributed by graphic-ginger!

Recent Images

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:28 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:24 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:24 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:23 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:21 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.

  • Details
    0

    Viewing full image.

    Credits

    26 Mar 2022, 4:01:22 pm

    Characters

    [F2U HTML] Hallownest

    Comments

    No comments found.
4139 Users Online 2:43 pm © cyancrows 2017
About FAQ Rules TOS