Code

[bread]

鶴見徳四郎

Character Name

Canon Title

---

Label

Info

Label

Info

Label

Info

Label

Info

---

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Left Header

» button «

» button «

» button «

Right Header

Ability Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Alternative Label Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

---

Stat 1

Statistic 2

---

Set Header

• Item 1
• Item 2
• Item 3
• Item 4

Set Header

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Set Header

Fave

• Item
• Item
• Item
• Item

Yes

• Item
• Item
• Item
• Item

Maybe

• Item
• Item
• Item
• Item

No

• Item
• Item
• Item
• Item

• Resizable! Change "max-width:600px;" at the top if you want it to be bigger/smaller • I strongly encourage you delete and add sections as needed. Everything should be labelled in the code with a start and end point. • Name on the left can be removed & the design will adjust on its own

Comments

(frozen comment) Code

[bread]

<raw-code><div style="font-family:arial;font-size:12px;max-width:600px;display: flex;gap: px 10px;margin:0 auto;"> <!-- Side Bar Text (Delete if you don't want) --> <div style="writing-mode: vertical-rl;text-orientation: upright;font-size:38px;font-weight:800;vertical-align:top;text-transform:uppercase;"> <!-- Adjust "letter-spacing" for roman characters (0 is probably fine) --> <span style="letter-spacing:20px;">鶴見徳四郎</span></div> <!-- /Side Bar Text (Delete if you don't want) --> <div style="flex-grow:1;"> <!-- Start Main Content --> <!-- Image --> <img src="https://files.catbox.moe/g6slin.gif" style="width:100%;"> <!-- /Image --> <details open> <!-- Remove "open" to have info collapsed by default --> <!-- Header & Subtitle --> <summary style="font-size:30px;font-weight:800;text-align:right;margin:0px;"> Character Name <div style="font-size:12px;font-weight:400;font-style:italic;text-align:right;margin:0 10px 7px 10px;"> Canon Title</div> </summary> <!-- /Header & Subtitle --> <!-- Horizontal breaker --> <hr style="width:100%;height:1px;background-color:#000000;border:0;margin:0 0 7px 0;padding:0;"> <!-- /Horizontal breaker --> <!-- Info Grid --> <div style="display: grid; grid-template-columns: auto auto auto auto;align-items: center;gap: 7px 10px;margin-bottom:7px;"> <!-- Label & Info --> <div style="background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;letter-spacing:2px;padding:3px;text-transform:uppercase;"> Label</div> <div>Info</div> <!-- /Label & Info --> <!-- Label & Info --> <div style="background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;letter-spacing:2px;padding:3px;text-transform:uppercase;"> Label</div> <div>Info</div> <!-- /Label & Info --> <!-- Label & Info --> <div style="background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;letter-spacing:2px;padding:3px;text-transform:uppercase;"> Label</div> <div>Info</div> <!-- /Label & Info --> <!-- Label & Info --> <div style="background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;letter-spacing:2px;padding:3px;text-transform:uppercase;"> Label</div> <div>Info</div> <!-- /Label & Info --> </div> <!-- /Info Grid --> <!-- Horizontal breaker --> <hr style="width:100%;height:1px;background-color:#000000;border:0;margin:0 0 7px 0;padding:0;"> <!-- /Horizontal breaker --> <!-- Paragraph --> <p style="margin-bottom:7px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> <!-- /Paragraph --> <!-- Header (Left) --> <div style="display: flex;gap:0 10px;margin-bottom:7px;"><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;display: block;">Left Header</div><div style="height:16px;display:inline-block;border-bottom:1px solid #000000;display: block;flex-grow: 1;"></div></div> <!-- /Header (Left) --> <!-- Row of buttons --> <div style="display: flex;margin-right:-14px;margin-bottom:7px;"> <!-- Single Button --> <div style="display: block;flex-grow: 1;padding-right:14px;"><a href="#" style="text-decoration:none;"><div style="width:100%;background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:2px;padding:3px;">» button «</div></a> </div> <!-- /Single Button --> <!-- Single Button --> <div style="display: block;flex-grow: 1;padding-right:14px;"><a href="#" style="text-decoration:none;"><div style="width:100%;background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:2px;padding:3px;">» button «</div></a> </div> <!-- /Single Button --> <!-- Single Button --> <div style="display: block;flex-grow: 1;padding-right:14px;"><a href="#" style="text-decoration:none;"><div style="width:100%;background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:2px;padding:3px;">» button «</div></a> </div> <!-- /Single Button --> </div> <!-- /Row of Button --> <!-- Header (Right) --> <div style="display: flex;gap:0 10px;margin-bottom:7px;"><div style="height:16px;display:inline-block;border-bottom:1px solid #000000;display: block;flex-grow: 1;"></div><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;display: block;">Right Header</div></div> <!-- /Header (Right) --> <!-- Paragraph --> <p style="margin-bottom:7px;"><span style="background-color:#000000;color:#ffffff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:2px;padding:3px 10px;margin-right:14px;display:inline-block">Ability</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p> <!-- /Paragraph --> <!-- Paragraph --> <p style="margin-bottom:7px;"><span style="font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:1px;margin-right:10px;display:inline-block">Alternative Label</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <!-- /Paragraph --> <!-- Horizontal breaker --> <hr style="width:100%;height:1px;background-color:#000000;border:0;margin:0 0 7px 0;padding:0;"> <!-- /Horizontal breaker --> <!-- Stats Bars --> <div style="display: grid; grid-template-columns: max-content auto;align-items: center;gap: 5px 20px;margin-bottom:7px;"> <!-- Stat (Adjust "width:50%;" for Each Stat) --> <div style="font-size:14px;font-weight:800;text-transform:uppercase;text-align:right;">Stat 1</div> <div style="border-bottom:1px solid black;"><div style="width:50%;height:16px;background:black;"></div></div> <!-- /Stat --> <!-- Stat (Adjust "width:50%;" for Each Stat) --> <div style="font-size:14px;font-weight:800;text-transform:uppercase;text-align:right;">Statistic 2</div> <div style="border-bottom:1px solid black;"><div style="width:50%;height:16px;background:black;"></div></div> <!-- /Stat --> </div> <!-- /Status Bars --> <!-- Horizontal breaker --> <hr style="width:100%;height:1px;background-color:#000000;border:0;margin:0 0 7px 0;padding:0;"> <!-- /Horizontal breaker --> <!-- Two-column Lists --> <div style="display: grid; grid-template-columns: auto auto;align-items: center;gap: 7px 10px;margin-bottom:7px;align-items: start;"> <!-- Left --> <div style="text-align:left;"> <div style="display: flex;"><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Set Header</div><div style="height:16px;display:inline-block;border-bottom:1px solid #000000;display: block;flex-grow: 1;"></div></div> <ul style="margin-bottom:0;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> <!-- Right --> <div style="text-align:left;"> <div style="display: flex;"><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Set Header</div><div style="height:16px;display:inline-block;border-bottom:1px solid #000000;display: block;flex-grow: 1;"></div></div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div> </div> <!-- /Two-column Lists --> <!-- Header --> <div style="display: flex;"><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Set Header</div><div style="height:16px;display:inline-block;border-bottom:1px solid #000000;display: block;flex-grow: 1;"></div></div> <!-- /Header --> <!-- Four-column Lists --> <div style="display: grid; grid-template-columns:repeat(4, 1fr); ;align-items: center;gap: 7px 10px;margin-bottom:7px;align-items: start;"> <!-- Fave --> <div><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Fave</div> <ul style="border-left:1px solid #000000;list-style:none;margin:0 0 0 7px;list-style-type: none;:none;padding:0 7px;"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <!-- /Fave --> <!-- Yes --> <div><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Yes</div> <ul style="border-left:1px solid #000000;list-style:none;margin:0 0 0 7px;list-style-type: none;:none;padding:0 7px;"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <!-- /Yes --> <!-- Maybe --> <div><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">Maybe</div> <ul style="border-left:1px solid #000000;list-style:none;margin:0 0 0 7px;list-style-type: none;:none;padding:0 7px;"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <!-- /Maybe --> <!-- No --> <div style=""><div style="height:16px;font-size:14px;font-weight:800;text-align:left;text-transform:uppercase;margin-bottom:7px;display: block;padding-right:10px;">No</div> <ul style="border-left:1px solid #000000;list-style:none;margin:0 0 0 7px;list-style-type: none;:none;padding:0 7px;"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <!-- /No --> </div> <!-- /Two-column Lists --> </details> <!-- End Main Content --> </div></div></raw-code>