Biosheet: Cycle

[tesscodes]

NAME HERE

Duis pellentesque felis vel varius fermentum

• FIRST IMPRESSIONS •

INFO FIELD INFO FIELD INFO FIELD INFO FIELD INFO FIELD INFO FIELD INFO FIELD

VOICE

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

STYLE

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

ETC.

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

• ABILITIES & SKILLS •

ABILITY

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

ABILITY

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

ABILITY

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

ABILITY

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur.

• APPEARANCE •

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur. Vestibulum a vulputate velit, eget efficitur nisl. Quisque efficitur, lectus et auctor feugiat, quam est fringilla libero, eget venenatis ante dolor vel magna. Suspendisse rutrum finibus lorem, et tincidunt augue aliquet eu. Quisque facilisis arcu quis erat dapibus porttitor.

Suspendisse diam nunc, finibus in fringilla sit amet, facilisis ut orci. Integer maximus massa ac sapien facilisis, vitae elementum felis imperdiet. Nullam imperdiet malesuada magna, sit amet euismod arcu ornare at. Nullam tincidunt sit amet nibh ut pharetra. Nunc nunc lectus, cursus non ipsum sed, dignissim varius urna. Aenean non mattis massa. Etiam iaculis dapibus mauris sit amet ultrices. Cras dapibus elit sapien, non fermentum metus convallis vitae. Nulla tincidunt pellentesque nisi eget malesuada. Curabitur est massa, auctor a feugiat id, facilisis eu tellus.

• PERSONALITY •

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur. Vestibulum a vulputate velit, eget efficitur nisl. Quisque efficitur, lectus et auctor feugiat, quam est fringilla libero, eget venenatis ante dolor vel magna.

Suspendisse rutrum finibus lorem, et tincidunt augue aliquet eu. Quisque facilisis arcu quis erat dapibus porttitor. Suspendisse diam nunc, finibus in fringilla sit amet, facilisis ut orci. Integer maximus massa ac sapien facilisis, vitae elementum felis imperdiet. Nullam imperdiet malesuada magna, sit amet euismod arcu ornare at. Nullam tincidunt sit amet nibh ut pharetra.

Nunc nunc lectus, cursus non ipsum sed, dignissim varius urna. Aenean non mattis massa. Praesent porttitor erat in magna ullamcorper porttitor. Aenean et arcu et sem fringilla malesuada at a quam. Etiam iaculis dapibus mauris sit amet ultrices. Cras dapibus elit sapien, non fermentum metus convallis vitae. Nulla tincidunt pellentesque nisi eget malesuada. Curabitur est massa, auctor a feugiat id, facilisis eu tellus.

• HISTORY •

Phasellus at lacus hendrerit, imperdiet diam ut, lobortis arcu. Quisque eget elementum turpis, id consectetur massa. Pellentesque mi ipsum, aliquam eget pharetra quis, convallis at eros. Vivamus bibendum libero vel odio posuere, ac faucibus mi consectetur. Vestibulum a vulputate velit, eget efficitur nisl. Quisque efficitur, lectus et auctor feugiat, quam est fringilla libero, eget venenatis ante dolor vel magna. Suspendisse rutrum finibus lorem, et tincidunt augue aliquet eu.

Quisque facilisis arcu quis erat dapibus porttitor. Suspendisse diam nunc, finibus in fringilla sit amet, facilisis ut orci. Integer maximus massa ac sapien facilisis, vitae elementum felis imperdiet. Nullam imperdiet malesuada magna, sit amet euismod arcu ornare at. Nullam tincidunt sit amet nibh ut pharetra. Nunc nunc lectus, cursus non ipsum sed, dignissim varius urna. Aenean non mattis massa.

Pellentesque et aliquet augue. Nunc finibus sodales gravida. Phasellus quis egestas ante. Aenean vestibulum tempor tellus. Nullam turpis ipsum, congue ut suscipit et, venenatis vitae leo. Ut pellentesque risus urna, a ultricies metus porta vel. Proin varius rutrum magna, et efficitur lacus maximus sed. Cras a ante pellentesque, auctor enim id, commodo lacus. Nulla bibendum ligula vel tellus cursus, ac aliquam erat tristique. Sed aliquam malesuada nulla, nec ultrices neque blandit et.

In ullamcorper et nisl eget ultricies. Sed justo nisl, consectetur at volutpat quis, euismod ut magna. Vestibulum mattis dui sit amet arcu facilisis elementum. Cras imperdiet, turpis ut auctor tincidunt, dui nunc elementum nulla, quis accumsan felis magna in mauris. Nunc condimentum sagittis erat vel mattis. Ut mollis diam a lorem congue dictum. Vestibulum aliquet non turpis a ultrices. Nulla suscipit arcu ut ex placerat, fringilla finibus nisi dignissim. Praesent porttitor erat in magna ullamcorper porttitor. Aenean et arcu et sem fringilla malesuada at a quam. Etiam iaculis dapibus mauris sit amet ultrices. Cras dapibus elit sapien, non fermentum metus convallis vitae. Nulla tincidunt pellentesque nisi eget malesuada. Curabitur est massa, auctor a feugiat id, facilisis eu tellus.

Sed et consectetur velit. Etiam vestibulum massa pulvinar suscipit cursus. Etiam sed arcu nulla. In eu augue sit amet urna luctus semper ac ac orci. Aenean vel finibus dolor. Sed rhoncus ex tortor. Mauris eu est vitae urna fringilla venenatis quis et dolor. Aenean iaculis justo a magna elementum interdum eu quis lorem. Sed feugiat enim et bibendum elementum.

• NAME | AGE | TIMEZONE | PB NAME | CODE •

Information

Hey guys! Time for a code redo. I'm thinking about permanently retiring some of my very first codes, but I'd like to remake all of them to my current standards as I retire them so that you guys don't lose anything; just gain better versions of them. Let me know what you think in the comments!

This code is a revisitation of Biosheet: Slides; I remember being really excited about being able to figure this one out when I first made it, because I was determined to make a bio with a forward/back carousel LOL. The old code features tables heavily, and I think this new version is a lot more put together visually and easier to use. I hope you like the revamp as much as I do. Enjoy! 💖

The Coding

<lj-raw><!--HEADER--> <div style="width:510px;height:200px;margin:0 auto;background:#ddd url(HEADER_PIC)center -200px;background-size:cover;border-radius:10px 10px 0 0;display:flex;align-items:flex-end;justify-content:center;text-align:center;font-family:georgia;"> <div style="margin:0 0 20px 0;background:#fff;padding:15px 30px;line-height:1;text-transform:uppercase;"> <div style="font-size:20px;letter-spacing:1px;color:#000;">TITLE</div> <div style="font-size:7px;letter-spacing:2px;color:#111;">SUBTITLE</div> </div> </div> <!--CONTENT CONTAINER--> <div style="height:500px;overflow:hidden;font-family:calibri,sans-serif;font-size:12px;color:#222;text-align:justify;margin:0 0 7px 0;"> <!--PAGE CONTAINER--> <a name="1"></a> <div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;"> <!--BACK ARROW--> <a href="#5"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a> <!--PAGE--> <div style="height:100%;width:510px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;"> <!--PAGE HEADER--> <div style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• FIRST IMPRESSIONS •</div> <!--ABOUT COLUMNS--> <div style="display:flex;justify-content:space-between;margin:0 0 20px 0;"> <!--ABOUT PIC--> <div style="width:calc(50% - 10px);background:rgba(0,0,0,0.05) url(ABOUT_PIC)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div> <!--ABOUT STATS--> <div style="width:calc(50% - 10px);"> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> INFO <b style="display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #ddd;">FIELD</b> </div> </div> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">VOICE</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">VOICE_INFO</div><br> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">STYLE</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">STYLE_INFO</div><br> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">ETC.</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">ETC_INFO</div> </div> <!--FORWARD ARROW--> <a href="#2"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a> </div> <!--PAGE CONTAINER--> <a name="2"></a> <div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;"> <!--BACK ARROW--> <a href="#1"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a> <!--PAGE--> <div style="height:100%;width:510px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;"> <!--PAGE HEADER--> <div style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• ABILITIES & SKILLS •</div> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">ABILITY</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">ABILITY_INFO</div><br> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">ABILITY</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">ABILITY_INFO</div><br> <b style="font-family:georgia;font-size:8px;letter-spacing:2px;color:#222;">ABILITY</b> <div style="padding:10px;border:1px solid rgba(0,0,0,0.15);">ABILITY_INFO</div><br> </div> <!--FORWARD ARROW--> <a href="#3"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a> </div> <!--PAGE CONTAINER--> <a name="3"></a> <div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;"> <!--BACK ARROW--> <a href="#2"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a> <!--PAGE--> <div style="height:100%;width:510px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;"> <!--PAGE HEADER--> <div style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• APPEARANCE •</div> <img src="APPEARANCE_PIC" style="width:40%;padding:10px;border:1px solid rgba(0,0,0,0.15);margin:0 20px 0 0;float:left;"> APPEARANCE_INFO </div> <!--FORWARD ARROW--> <a href="#4"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a> </div> <!--PAGE CONTAINER--> <a name="4"></a> <div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;"> <!--BACK ARROW--> <a href="#3"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a> <!--PAGE--> <div style="height:100%;width:510px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;"> <!--PAGE HEADER--> <div style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• PERSONALITY •</div> <img src="PERSONALITY_PIC" style="width:40%;padding:10px;border:1px solid rgba(0,0,0,0.15);margin:0 0 0 20px;float:right;"> PERSONALITY_INFO </div> <!--FORWARD ARROW--> <a href="#5"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a> </div> <!--PAGE CONTAINER--> <a name="5"></a> <div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;"> <!--BACK ARROW--> <a href="#4"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a> <!--PAGE--> <div style="height:100%;width:510px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;"> <!--PAGE HEADER--> <div style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• HISTORY •</div> HISTORY_INFO </div> <!--FORWARD ARROW--> <a href="#1"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a> </div> </div> <!--OOC INFO--> <center style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;">• NAME | AGE | TIMEZONE | PB NAME | <a href="http://tessisamess.insanejournal.com/130969.html" style="text-decoration:none;color:#000;">CODE</a> •</center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

TITLE - Header title
SUBTITLE - Header subtitle

ABOUT_PIC - First impressions image
APPEARANCE_PIC - Appearance image
PERSONALITY_PIC - Personality image

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

DIMENSIONS

200px - Header height
500px - Content height
510px - Content width

FONTS

georgia - Headings
calibri,sans-serif - Body text

IMAGES

https://i.imgur.com/Bh3m23o.png - Back arrow
https://i.imgur.com/XAJgCoR.png - Forward arrow

COLORS

#fff

Content background

#222

Body text

#111

Subtitle

#000

Headings

rgba(0,0,0,0.15)

Borders

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!