Profile
Stagger Code
If you'd like to change the colors quickly, use find and replace to edit these color codes:
Text Main: 212529
Accent: F4C2C6
Backgrounds: F7F7F7
Code
<!-- Stagger | Code by rimucode | 9/15/21 -->
<!-- Colors:
Text Main: 212529
Accent: F4C2C6
Backgrounds: F7F7F7 -->
<!-- Row 1 : Character Info, Personality, History -->
<div class="row no-gutters m-auto" style="max-width:900px; color:#212529;">
<!-- Character Info -->
<div class="col-sm-5 order-sm-2 p-2">
<div class="card h-100 bg-transparent border-0 rounded-0">
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- Character Info : Panel Title-->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.7em; background:#F4C2C6;">
<p align="center">
Character Name
</p>
</div>
<!-- Character Info : Information -->
<div class="card bg-transparent border-0 p-3 m-0 rounded-0" style="font-weight:300;">
<!-- Character Info : Columns -->
<p>
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6;">
Full Name
</span>
<span class="pull-right">
Content
</span>
<br>
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6;">
Nickname(s)
</span>
<span class="pull-right">
Content
</span>
<br>
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6;">
Species
</span>
<span class="pull-right">
Content
</span>
<br>
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6;">
Gender / Pronouns
</span>
<span class="pull-right">
Content
</span>
<br>
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6;">
Sexuality
</span>
<span class="pull-right">
Content
</span>
<br>
</p>
<!-- Character Info : Short Description -->
<p>
Write a description of your character here. Can be as long as you need, but best kept short and sweet, like a book summary. No ideas? Try something like 1 sentence history, 1 sentence personality, and a few sentences of what they do, what makes them outstanding, and/or why they're important. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<hr style="margin:8px; border:0px;">
<!-- Character Info : Character & Code Credit -->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1em; background:#F4C2C6; border-radius:15px">
<p align="center">
Name © Username | Code © Rimucode
</p>
</div>
</div>
</div>
<!-- Personality -->
<div class="col-sm order-sm-1 p-2">
<div class="card h-100 bg-transparent border-0 rounded-0">
<div class="card border-0 rounded-0 p-3 m-auto">
<!-- Personality : Icon Image -->
<i class="fal fa-flower fa-4x" style="color:#F4C2C6;"></i>
</div>
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- Personality : Panel Title -->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; background:#F4C2C6;">
<p>
Personality
<span class="pull-right"><i class="fal fa-heart"></i></span>
</p>
</div>
<!-- Personality : Paragraph -->
<div class="card bg-transparent border-0 p-3 m-0 rounded-0" style="font-weight:300;">
Write some about your character's personality 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 feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
</div>
</div>
<!-- History -->
<div class="col-sm order-sm-3 p-2">
<div class="card h-100 bg-transparent border-0 rounded-0">
<div class="card border-0 rounded-0 p-3 m-auto">
<!-- History : Icon Image -->
<i class="fal fa-flower fa-4x" style="color:#F4C2C6;"></i>
</div>
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- History : Panel Title -->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; background:#F4C2C6;">
<p>
<i class="fal fa-book"></i>
<span class="pull-right">History</span>
</p>
</div>
<!-- History : Paragraph -->
<div class="card bg-transparent border-0 p-3 m-0 rounded-0" style="font-weight:300;">
Write some about your character's history 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 feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
</div>
</div>
</div>
<!-- Row 2 : Character Relationships -->
<div class="row no-gutters m-auto" style="max-width:900px; color:#212529;">
<!-- Relation 1 -->
<div class="col-sm-6 p-2">
<div class="card border-0 modal-open h-100" style="border-radius:15px; background:#F7F7F7;">
<div class="row no-gutters h-100">
<div class="col p-3" style="font-weight:300;">
<!-- Relation 1 : Name & Association -->
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6; font-weight:400;">
Name • Relation
</span>
<br>
<!-- Relation 1 : Description -->
How do these characters know each other? Best to keep it short and sweet, this is a small box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Relation 1 : Panel Title -->
<div class="col-auto p-2 text-white" style="background:#F4C2C6; width:40px">
<p style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; transform:rotate(90deg);">
Relationship
</p>
</div>
</div>
</div>
</div>
<!-- Relation 2 -->
<div class="col-sm-6 p-2">
<div class="card border-0 modal-open h-100" style="border-radius:15px; background:#F7F7F7;">
<div class="row no-gutters h-100">
<div class="col p-3" style="font-weight:300;">
<!-- Relation 2 : Name & Association -->
<span style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.2em; color:#F4C2C6; font-weight:400;">
Name • Relation
</span>
<br>
<!-- Relation 2 : Description -->
How do these characters know each other? Best to keep it short and sweet, this is a small box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Relation 2 : Panel Title -->
<div class="col-auto p-2 text-white" style="background:#F4C2C6; width:40px">
<p style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; transform:rotate(90deg);">
Relationship
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Row 3 : Design -->
<div class="row no-gutters m-auto" style="max-width:900px; color:#212529;">
<!-- Character Image -->
<div class="col-sm-4 order-sm-2 p-2">
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- Character Image : Image Container -->
<div class="card bg-transparent border-0 m-3 rounded-0 h-100" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/39791345_sEvOfKu0UkvEvGQ.png?1631733870); background-size:contain; background-position:center; background-repeat:no-repeat; min-height:125px;"></div>
<!-- Character Image : Credit-->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; background:#F4C2C6;">
<p align="center">
Art by Username
</p>
</div>
</div>
</div>
<!-- Colors -->
<div class="col-sm order-sm-1 p-2">
<div class="card h-100 bg-transparent border-0 rounded-0">
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- Colors : Panel Title -->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; background:#F4C2C6;">
<p>
Colors
<span class="pull-right"><i class="fal fa-swatchbook"></i></span>
</p>
</div>
<!-- Colors : List -->
<div class="card bg-transparent border-0 p-3 m-0 rounded-0" style="font-weight:300;">
<p>
• Hair
<span class="badge badge-pill" style="background-color:#E78890; font-weight:400;">#E78890</span>
<br>
• Eyes
<span class="badge badge-pill" style="background-color:#F9DDDF; font-weight:400;">#F9DDDF</span>
<br>
• Skin
<span class="badge badge-pill" style="background-color:#E78890; font-weight:400;">#E78890</span>
<br>
• Clothes
<span class="badge badge-pill" style="background-color:#F9DDDF; font-weight:400;">#F9DDDF</span>
<br>
• Gradient
<span class="badge badge-pill" style="background-color:#EB989F; font-weight:400;">#EB989F</span>
<span class="badge badge-pill" style="background-color:#EFA9AF; font-weight:400;">#EFA9AF</span>
<span class="badge badge-pill" style="background-color:#F2BABF; font-weight:400;">#F2BABF</span>
<br>
<!-- Etcetera etcetera, copy & paste as needed -->
</p>
</div>
</div>
<div class="card border-0 rounded-0 p-3 m-auto">
<!-- Colors : Little Icons -->
<span>
<i class="far fa-seedling" style="color:#F4C2C6;"></i>
<i class="fal fa-flower fa-2x" style="color:#F4C2C6;"></i>
<i class="far fa-seedling" style="color:#F4C2C6;"></i>
</span>
</div>
</div>
</div>
<!-- Design Notes -->
<div class="col-sm order-sm-3 p-2">
<div class="card h-100 bg-transparent border-0 rounded-0">
<div class="card h-100 border-0 modal-open" style="border-radius:15px; background:#F7F7F7;">
<!-- Design Notes : Panel Title -->
<div class="card rounded-0 border-0 p-2 text-white" style="font-variant:small-caps; font-family:Garamond, Serif; letter-spacing:1px; font-size:1.3em; background:#F4C2C6;">
<p>
<i class="fal fa-clipboard"></i>
<span class="pull-right">Design Notes</span>
</p>
</div>
<!-- Design Notes : Paragraph -->
<div class="card bg-transparent border-0 p-3 m-0 rounded-0" style="font-weight:300;">
<p>
• Use this space to make write about your character's design notes.<br>
• Write about important aspects that shouldn't be forgotten.<br>
• Write about minor details that aren't as important.<br>
• Provide ideas for alternate outfits.<br>
• Or maybe <a href="LINK">provide a link</a> to a reference or two.<br>
• Lorem ipsum dolor sit amet.<br>
</p>
</div>
</div>
<div class="card border-0 rounded-0 p-3 m-auto">
<!-- Design Notes : Little Icons -->
<span>
<i class="far fa-seedling" style="color:#F4C2C6;"></i>
<i class="fal fa-flower fa-2x" style="color:#F4C2C6;"></i>
<i class="far fa-seedling" style="color:#F4C2C6;"></i>
</span>
</div>
</div>
</div>
</div>