Garrett.Hawke
Wildcard 😘
[comment]
Designed and coded by [USER=20950]@Nano[/USER].
Please do not remove the credits or claim the code as your own work.
[font=Shippori Mincho B1]serif[/font]
[font=Exo 2]sans-serif[/font]
[/comment][comment]
// accents //
[/comment][border=0; padding: 0;
/* <--------------------------------- general accents ---------------------------------> */
/* colors */
--bgcolor: #fefefe;
--whitetext: #fefefe;
--blacktext: #777777;
--quotecolor: #777777;
/* fonts */
--JPNfont: 'Shippori Mincho B1', serif;
--ENGfont: 'Exo 2', sans-serif;
/* <--------------------------------- accents for charA ---------------------------------> */
/* colors */
--charAaccent01: #f5bec6;
--charAaccent02: #beeffb;
/* images */
--WIP: url('https://i.imgur.com/vu6NzDQ.jpg') center/cover no-repeat;
--charAmain: url('https://i.imgur.com/HCd7jOr.jpg') top left/cover no-repeat;
--charAproficon: url('https://i.imgur.com/RhhuxKU.jpg') top center/cover no-repeat;
--charAhistory01: url('https://i.imgur.com/GsPQMr2.jpg') top right/cover no-repeat;
--charAhistory02: url('https://i.imgur.com/TnfB6rZ.jpg') center/cover no-repeat;
--charAhistory03: url('https://i.imgur.com/i9kmBdJ.jpg') top center/cover no-repeat;
--charAability: url('https://i.imgur.com/zmSIduT.jpg') top center/cover no-repeat;
--charARS01: url('https://i.imgur.com/Vc04X6m.jpg') top center/cover no-repeat;
--charARS02: url('https://i.imgur.com/MefM4mN.jpg') center/cover no-repeat;
--charARScomment: url('https://i.imgur.com/DzBMA5B.jpg') center/cover no-repeat;
--charAgallery01: url('https://i.imgur.com/bVVd9l5.jpg') center right/cover no-repeat;
--charAgallery02: url('https://i.imgur.com/ziw4ztH.jpg') top center/cover no-repeat;
--charAgallery03: url('https://i.imgur.com/5NFqL9G.jpg') top center/cover no-repeat;
margin: 0 auto;
padding: 50px 0;
width: 100%;
min-width: 300px;
background: var(--bgcolor);
font-size: initial;
overflow: hidden;
position: relative;][comment]
---------- WIP Warning start ---------->
[/comment][border=0; padding: 0; margin: 0 auto; width: 90%; max-width: 550px;][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% + 20px);][comment]
-------------------- quotebox start -------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 3; width: calc(100% - 56px); display: flex; align-items: center;][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; width: calc(100% - 53px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;]This CS is still a WIP! Please proceed with caution. Hard hats on until I finish this in 4 years.
I'm working on it...gradually...[comment]
------------------------------ border quotations start ------------------------------>
[/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; bottom: 10px; right: -22px;][fa]fas fa-quote-right[/fa][/border][comment]
<------------------------------ border quotations end ------------------------------
[/comment][/border][/border][comment]
<-------------------- quotebox end --------------------
[/comment][comment]
-------------------- WIP image start -------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 1; max-width: 125px; width: 100%;][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--WIP);][/border][/border][comment]
<-------------------- WIP image end --------------------
[/comment][/border][/border][comment]
<---------- WIP Warning end ----------
[/comment][comment]
---------- Character Select Tabs Start ---------->
[/comment][border=0; padding: 0; margin: 25px auto 0; max-width: 1000px; width: 100%; position: relative; overflow: hidden;][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px); pointer-events: none;][comment]
-------------------- CharA LEFT SIDE Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][comment]
------------------------------ Triangles Start ------------------------------>
[/comment][border=0; padding: 0; width: 225px; height: 195px; background: var(--charAaccent01); clip-path: polygon(50% 0, 0% 100%, 100% 100%); position: absolute; top: 0; left: 0;][/border][border=0; padding: 0; width: 225px; height: 195px; background: var(--charAaccent01); clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: 0; right: 0;][/border][comment]
<------------------------------ Triangles End ------------------------------
[/comment][comment]
------------------------------ Main Image Start ------------------------------>
[/comment][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; background: var(--charAaccent02); position: relative;][border=0; border-radius: 20px; padding: 0; width: 100%; height: 100%; background: var(--charAmain); display: flex; justify-content: center; align-items: center;][comment]
---------------------------------------- JPN Name Start ---------------------------------------->
[/comment][border=0; padding: 0; font-family: var(--JPNfont); font-size: 60px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--whitetext); text-align: center;]名前[/border][comment]
<---------------------------------------- JPN Name End ----------------------------------------
[/comment][/border][comment]
---------------------------------------- CharA Content Tab Covers Start ---------------------------------------->
[/comment][border=0; padding: 0; width: calc(100% - 42px); height: 200px; position: absolute; bottom: 30px; pointer-events: initial;][/border][border=0; padding: 0; width: 600px; height: 200px; position: absolute; bottom: 30px; left: calc(100% + 13px); pointer-events: initial;][/border][border=0; border-radius: 7px; padding: 7px 0; width: 40px; background: var(--bgcolor); font-size: 18px; line-height: 100%; color: var(--charAaccent01); text-align: center; position: absolute; bottom: 50px; right: -13px; z-index: 3;][comment]
// font awesome icons start //
[/comment][border=0; padding: 7px 0;][fa]fas fa-house[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-book[/fa][/border][border=0; padding: 7px 0;][fa]fa fa-superpowers[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-heart[/fa][/border][border=0; padding: 7px 0;][fa]fas fa-star[/fa][/border][comment]
// font awesome icons end //
[/comment][/border][comment]
<---------------------------------------- CharA Content Tab Covers End ----------------------------------------
[/comment][/border][comment]
<------------------------------ Main Image End ------------------------------
[/comment][/border][comment]
<-------------------- CharA LEFT SIDE End --------------------
[/comment][comment]
-------------------- CharA RIGHT SIDE Filler Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; opacity: 0;][/border][comment]
<-------------------- CharA RIGHT SIDE Filler End --------------------
[/comment][comment]
-------------------- CharA Content Tabs Start -------------------->
[/comment][border=0; padding: 0; width: 100%; position: absolute; top: 305px; line-height: 27px; pointer-events: initial;][comment]
// tab cover junk start //
[/comment][border=0; padding: 0; position: absolute; top: -30px; width: 200%; height: 300px; background: var(--bgcolor); pointer-events: none;][/border][comment]
// tab cover junk end //
[/comment][tabs]
[tab=BASIC INFO 010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
-------------------- CharA Tab 01 Selected Tab Cover Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 184px; right: -61px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-house[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Basics[/border][/border][/border][/border][comment]
<-------------------- CharA Tab 01 Selected Tab Cover End --------------------
[/comment][comment]
-------------------- CharA Tab 01 Content Box Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
------------------------------ nameplate start ------------------------------>
[/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-align: right; text-transform: uppercase;]Surname☆First[/border][border=0; padding: 0; margin-top: 10px; font-family: var(--JPNfont); font-size: 2.5em; line-height: 100%; color: var(--charAaccent02); text-align: right; text-transform: uppercase;]姓姓[border=0; padding: 0; display: inline; color: var(--charAaccent01);]名前[/border][/border][comment]
<------------------------------ nameplate end ------------------------------
[/comment][comment]
------------------------------ basic profile start ------------------------------>
[/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
---------------------------------------- proficon start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 1; max-width: 300px; width: 100%; min-width: 150px; position: relative;][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charAaccent02); position: absolute; top: 10px; left: 10px;][/border][border=0; padding: 0; padding-top: 100%; width: 100%; background: var(--charAproficon); position: relative;][/border][comment]
// faceclaim credit start //
[/comment][border=0; padding: 0; margin-top: 15px; margin-left: 10px; font-family: var(--ENGfont); font-size: .7em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;]FC: リリコ (永远的7日之都)[/border][comment]
// faceclaim credit end //
[/comment][/border][comment]
<---------------------------------------- proficon end ----------------------------------------
[/comment][comment]
---------------------------------------- basic info start ---------------------------------------->
[/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
// Q&A 01 start //
[/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Codename[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]ABC-##[/border][/border][comment]
// Q&A 01 end //
[/comment][comment]
// Q&A 02 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Age[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Number (##)[/border][/border][comment]
// Q&A 02 end //
[/comment][comment]
// Q&A 03 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Birthday[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Day Month Year[/border][/border][comment]
// Q&A 03 end //
[/comment][comment]
// Q&A 04 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Gender[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Gender (Pronouns)[/border][/border][comment]
// Q&A 04 end //
[/comment][comment]
// Q&A 05 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ethnicity[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
// Q&A 05 end //
[/comment][comment]
// Q&A 06 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Rank[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Union Rank[/border][/border][comment]
// Q&A 06 end //
[/comment][comment]
// Q&A 07 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Division[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Union Division[/border][/border][comment]
// Q&A 07 end //
[/comment][/border][comment]
<---------------------------------------- basic info end ----------------------------------------
[/comment][/border][comment]
<------------------------------ basic profile end ------------------------------
[/comment][comment]
// section spacer start //
[/comment][border=0; padding: 0; height: 35px;][/border][comment]
// section spacer end //
[/comment][comment]
------------------------------ appearance start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Appearance[/border][/border][comment]
// header end //
[/comment][comment]
// Q&A 01 start //
[/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Height[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#'#' (###cm)[/border][/border][comment]
// Q&A 01 end //
[/comment][comment]
// Q&A 02 start //
[/comment][border=0; padding: 8px; margin-top: 7px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Weight[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]#lbs (#kg)[/border][/border][comment]
// Q&A 02 end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ appearance end ------------------------------
[/comment][comment]
------------------------------ personality start ------------------------------>
[/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
---------------------------------------- personality LEFT start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 3; width: 100%; min-width: 200px;][comment]
// header start //
[/comment][border=0; padding: 0; margin: 20px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Personality[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 5px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui. Quisque ullamcorper massa elit, a dignissim dolor scelerisque ac. Praesent consequat purus sit amet cursus finibus. Etiam varius tellus a varius placerat. Nullam sed turpis viverra, laoreet orci eget, scelerisque arcu. Etiam lacus libero, varius eu fringilla tincidunt, feugiat sed augue. Aenean vestibulum nunc finibus augue porttitor, vehicula congue erat sollicitudin. Nam rutrum sem efficitur odio venenatis ullamcorper. Morbi ligula quam, tincidunt in rutrum sed, tincidunt volutpat sem. Nulla et suscipit leo.[/border][comment]
// text end //
[/comment][/border][comment]
<---------------------------------------- personality LEFT end ----------------------------------------
[/comment][comment]
---------------------------------------- personality RIGHT start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px;][comment]
// likes start //
[/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charAaccent02);]+[/border] Likes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charAaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charAaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8, Item 9, Item 10, Item 11[/border][/border][comment]
// likes end //
[/comment][comment]
// dislikes start //
[/comment][border=0; padding: 0; margin-top: 10px; margin-left: 5px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase;][border=0; padding: 0; display: inline; color: var(--charAaccent02);]-[/border] Dislikes[/border][border=0; padding: 0; margin-top: 15px; margin-left: 10px; width: calc(100% - 10px); background: var(--charAaccent02); position: relative;][border=0; padding: 10px; width: calc(100% - 20px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--whitetext); text-align: left; background: var(--charAaccent01); position: relative; top: -10px; left: -10px;]Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7, Item 8[/border][/border][comment]
// dislikes end //
[/comment][/border][comment]
<---------------------------------------- personality RIGHT end ----------------------------------------
[/comment][/border][comment]
<------------------------------ personality end ------------------------------
[/comment][/border][/border][comment]
<-------------------- CharA Tab 01 Content Box End --------------------
[/comment][/border][/tab]
[tab=HISTORY 02020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
-------------------- CharA Tab 02 Selected Tab Cover Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 152px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-book[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]HISTORY[/border][/border][/border][/border][comment]
<-------------------- CharA Tab 02 Selected Tab Cover End --------------------
[/comment][comment]
-------------------- CharA Tab 02 Content Box Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
------------------------------ history pt.i start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 01[/border][/border][comment]
// header end //
[/comment][comment]
// image start //
[/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory01); position: relative;][/border][/border][comment]
// image end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ history pt.i end ------------------------------
[/comment][comment]
------------------------------ history pt.ii start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 02[/border][/border][comment]
// header end //
[/comment][comment]
// image start //
[/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory02); position: relative;][/border][/border][comment]
// image end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ history pt.ii end ------------------------------
[/comment][comment]
------------------------------ history pt.iii start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Chapter 03[/border][/border][comment]
// header end //
[/comment][comment]
// image start //
[/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAhistory03); position: relative;][/border][/border][comment]
// image end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ history pt.iii end ------------------------------
[/comment][/border][/border][comment]
<-------------------- CharA Tab 02 Content Box End --------------------
[/comment][/border][/tab]
[tab=POWERS 03030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
-------------------- CharA Tab 03 Selected Tab Cover Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 120px; right: -67px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fa fa-superpowers[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Combat[/border][/border][/border][/border][comment]
<-------------------- CharA Tab 03 Selected Tab Cover End --------------------
[/comment][comment]
-------------------- CharA Tab 03 Content Box Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
------------------------------ ability profile start ------------------------------>
[/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
---------------------------------------- ability icon start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 175px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 175px; background: var(--charAability); position: relative;][/border][/border][comment]
<---------------------------------------- ability icon end ----------------------------------------
[/comment][comment]
---------------------------------------- ability basic info start ---------------------------------------->
[/comment][border=0; padding: 0; margin-top: 20px; margin-left: 20px; flex: 1; width: 100%; min-width: 300px;][comment]
// Q&A 01 start //
[/comment][border=0; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Ability Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
// Q&A 01 end //
[/comment][comment]
// Q&A 02 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Scientific Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Name[/border][/border][comment]
// Q&A 02 end //
[/comment][comment]
// Q&A 03 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Variant[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Type[/border][/border][comment]
// Q&A 03 end //
[/comment][/border][comment]
<---------------------------------------- ability basic info end ----------------------------------------
[/comment][/border][comment]
<------------------------------ ability profile end ------------------------------
[/comment][comment]
------------------------------ ability description start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 30px 0 15px; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Description[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ ability description end ------------------------------
[/comment][comment]
------------------------------ ability strengths start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Strengths[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ ability strengths end ------------------------------
[/comment][comment]
------------------------------ ability weakness start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Weaknesses[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.[/border][comment]
// text end //
[/comment][comment]
<------------------------------ ability weakness end ------------------------------
[/comment][comment]
------------------------------ combat info start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Combat Info[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;][B]Equipment:
Weapons:
Combat Type:
Other Skills:[/B] [/border][comment]
// text end //
[/comment][comment]
<------------------------------ combat info end ------------------------------
[/comment][/border][/border][comment]
<-------------------- CharA Tab 03 Content Box End --------------------
[/comment][/border][/tab]
[tab=RELATIONSHIPS 040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
-------------------- CharA Tab 04 Selected Tab Cover Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 88px; right: -107px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-heart[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Relationships[/border][/border][/border][/border][comment]
<-------------------- CharA Tab 04 Selected Tab Cover End --------------------
[/comment][comment]
-------------------- CharA Tab 04 Content Box Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
------------------------------ rs 01 start ------------------------------>
[/comment][border=0; padding: 0; margin-top: 15px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
---------------------------------------- rs 01 icon + basics start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charARS01); position: relative;][/border][comment]
// Q&A 01 start //
[/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
// Q&A 01 end //
[/comment][comment]
// Q&A 02 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Relationship[/border][/border][comment]
// Q&A 02 end //
[/comment][comment]
// Q&A 03 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
// Q&A 03 end //
[/comment][/border][comment]
<---------------------------------------- rs 01 icon + basics end ----------------------------------------
[/comment][comment]
---------------------------------------- rs 01 description start ---------------------------------------->
[/comment][border=0; padding: 0; margin-top: -5pxpx; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
// text start //
[/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
// text end //
[/comment][/border][comment]
<---------------------------------------- rs 01 description end ----------------------------------------
[/comment][/border][comment]
-------------------------------------------------- quotebox start -------------------------------------------------->
[/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
------------------------------------------------------------ border quotations start ------------------------------------------------------------>
[/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charARScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
<------------------------------------------------------------ border quotations end ------------------------------------------------------------
[/comment][/border][comment]
<-------------------------------------------------- quotebox end --------------------------------------------------
[/comment][comment]
<------------------------------ rs 01 end ------------------------------
[/comment][comment]
------------------------------ rs 02 start ------------------------------>
[/comment][border=0; padding: 0; margin-top: 50px; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width: calc(100% + 20px);][comment]
---------------------------------------- rs 02 icon + basics start ---------------------------------------->
[/comment][border=0; padding: 0; margin-left: 20px; margin-bottom: 15px; flex: 1; width: 100%; min-width: 200px; position: relative;][border=0; padding: 0; margin-left: 10px; margin-top: 10px; width: calc(100% - 10px); height: 275px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 275px; background: var(--charARS02); position: relative;][/border][comment]
// Q&A 01 start //
[/comment][border=0; margin-top: 15px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Name[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]--[/border][/border][comment]
// Q&A 01 end //
[/comment][comment]
// Q&A 02 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Relation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Relationship[/border][/border][comment]
// Q&A 02 end //
[/comment][comment]
// Q&A 03 start //
[/comment][border=0; margin-top: 7px; padding: 8px; width: calc(100% - 16px); font-family: var(--ENGfont); font-size: .9em; line-height: 100%; color: var(--whitetext); background: var(--charAaccent01);][border=0; padding: 0; margin-right: 10px; display: inline; text-transform: uppercase;]Appellation[/border]|[border=0; padding: 0; margin-left: 10px; display: inline;]Nickname[/border][/border][comment]
// Q&A 03 end //
[/comment][/border][comment]
<---------------------------------------- rs 02 icon + basics end ----------------------------------------
[/comment][comment]
---------------------------------------- rs 02 description start ---------------------------------------->
[/comment][border=0; padding: 0; margin-top: -5px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px;][comment]
// text start //
[/comment][border=0; padding: 0; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio. Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam. Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis. Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
Nullam consequat ornare euismod. Aenean elementum purus eu massa consectetur, vitae pretium sapien fringilla. Quisque sodales massa quis iaculis dictum. Curabitur sit amet neque tortor. Cras blandit ex id nisi convallis accumsan. Maecenas arcu nisl, tristique vitae ullamcorper eu, convallis vel dui.[/border][comment]
// text end //
[/comment][/border][comment]
<---------------------------------------- rs 02 description end ----------------------------------------
[/comment][/border][comment]
-------------------------------------------------- quotebox start -------------------------------------------------->
[/comment][border=3px solid var(--quotecolor); border-radius: 10px; padding: 25px; margin: 25px auto; width: calc(100% - 76px); font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: center; position: relative;][border=0; padding: 0; position: relative; z-index: 7;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh.[/border][comment]
------------------------------------------------------------ border quotations start ------------------------------------------------------------>
[/comment][border=0; padding: 10px; font-size: 25px; background: var(--bgcolor); position: absolute; top: 10px; left: -22px;][fa]fas fa-quote-left[/fa][/border][border=0; padding: 10px; font-family: var(--ENGfont); font-size: 11px; line-height: 100%; text-transform: uppercase; background: var(--bgcolor); position: absolute; bottom: -15px; right: 75px;]About [Name][/border][border=10px solid var(--bgcolor); padding: 0; width: 40px; height: 40px; background: var(--charARScomment); position: absolute; bottom: -30px; right: 22px;][/border][comment]
<------------------------------------------------------------ border quotations end ------------------------------------------------------------
[/comment][/border][comment]
<-------------------------------------------------- quotebox end --------------------------------------------------
[/comment][comment]
<------------------------------ rs 02 end ------------------------------
[/comment][/border][/border][comment]
<-------------------- CharA Tab 04 Content Box End --------------------
[/comment][/border][/tab]
[tab=EXTRAS 050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; width: 100%; position: absolute; top: -306px; left: 0; pointer-events: none; font-size: initial; line-height: initial; z-index: 6;][comment]
-------------------- CharA Tab 05 Selected Tab Cover Start -------------------->
[/comment][border=0; padding: 40px; margin-left: 20px; flex: 1; max-width: 500px; width: calc(100% - 80px); min-width: 200px; position: relative; z-index: 3;][border=0; border-radius: 25px; padding: 15px; width: calc(100% - 30px); height: 450px; position: relative;][border=0; border-radius: 5px; padding: 5px 10px 5px 5px; background: var(--charAaccent01); font-size: 18px; line-height: 100%; color: var(--whitetext); position: absolute; bottom: 56px; right: -59px; z-index: 4; overflow: hidden; pointer-events: initial;][fa]fas fa-star[/fa][border=0; padding: 0; margin-left: 10px; display: inline; font-family: var(--ENGfont); font-size: 12px; text-transform: uppercase;]Extra[/border][/border][/border][/border][comment]
<-------------------- CharA Tab 05 Selected Tab Cover End --------------------
[/comment][comment]
-------------------- CharA Tab 05 Content Box Start -------------------->
[/comment][border=0; padding: 0; margin-top: 40px; margin-left: 20px; flex: 2; width: 100%; min-width: 300px; height: calc(450px + 30px); position: relative; overflow: hidden; pointer-events: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; text-align: justify;][comment]
------------------------------ art credit start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Credit Links[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]
[LIST=1]
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%92%83%E7%92%83%E5%AD%90']璃璃子 - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL]
[*][URL='https://f7d.huijiwiki.com/wiki/%E6%98%9F%E5%B1%91%E3%83%BB%E7%92%83%E7%92%83%E5%AD%90']星屑・璃璃子 - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL]
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/51%2B']相册/51+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#98)
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/101%2B']相册/101+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#104)
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/301%2B']相册/301+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#343, #344)
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/201%2B']相册/201+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#214)
[*][URL='https://f7d.huijiwiki.com/wiki/%E7%9B%B8%E5%86%8C/401%2B']相册/401+ - 永远的7日之都维基|永远的7日之都WIKI|永远的7日之都资料站|Forever 7 Days - 灰机wiki[/URL] (#406)
[*]ability section's image is Columbina by Ideolo
[/LIST]
[/border][comment]
// text end //
[/comment][comment]
<------------------------------ art credit end ------------------------------
[/comment][comment]
------------------------------ extras start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Extras[/border][/border][comment]
// header end //
[/comment][comment]
// text start //
[/comment][border=0; padding: 0; margin-top: 15px; font-family: var(--ENGfont); font-size: .9em; line-height: 130%; color: var(--blacktext); text-align: justify;]
[LIST=1]
[*]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, ante a hendrerit fermentum, orci mauris lacinia lorem, id ultricies sem eros in nibh. Nam sed efficitur odio, quis vestibulum odio.
[*]Aliquam ullamcorper porta pretium. Mauris ornare nisi et tristique egestas. Sed malesuada fermentum massa nec bibendum. Maecenas volutpat lacinia nulla, in euismod mi elementum eget. Mauris eu imperdiet quam.
[*]Integer facilisis ipsum elit. Etiam efficitur enim tellus, in pharetra ante feugiat rhoncus. Cras vel nibh sollicitudin, feugiat felis in, pellentesque odio. Donec lacus nisl, facilisis ac malesuada non, faucibus eu turpis.
[*]Nunc hendrerit eros at pulvinar imperdiet. Proin pretium fringilla ultricies. Etiam enim enim, vehicula id placerat vitae, finibus in risus. Vivamus sollicitudin magna at magna cursus accumsan. Morbi quis fringilla sapien.
[/LIST]
[/border][comment]
// text end //
[/comment][comment]
<------------------------------ extras end ------------------------------
[/comment][comment]
------------------------------ gallery start ------------------------------>
[/comment][comment]
// header start //
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 1px; background: var(--charAaccent01);][border=0; padding: 0; margin-top: 1px; width: 10px; height: 10px; background: var(--charAaccent02);][/border][border=0; padding: 0 7px; margin-top: -1px; font-family: var(--ENGfont); font-size: 1.1em; line-height: 100%; color: var(--blacktext); text-transform: uppercase; background: var(--bgcolor);]Gallery[/border][/border][comment]
// header end //
[/comment][comment]
// images start //
[/comment][border=0; padding: 0; margin-left: -20px; display: flex; flex-flow: row wrap; justify-content: center; width calc(100% + 20px);][border=0; padding: 0; margin-left: 20px; flex: 2; width: 100%; min-width: 200px;][comment]
// image 01 start //
[/comment][border=0; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAgallery01); position: relative;][/border][/border][comment]
// image 01 end //
[/comment][comment]
// image 02 start //
[/comment][border=0; margin-top: 30px; padding: 0; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 200px; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 200px; background: var(--charAgallery02); position: relative;][/border][/border][comment]
// image 02 end //
[/comment][/border][comment]
// image 03 start //
[/comment][border=0; padding: 0; margin-left: 20px; flex: 1; width: 100%; min-width: 200px; min-height: 200px; position: relative;][border=0; padding: 0; margin-top: 10px; margin-left: 10px; width: calc(100% - 10px); height: 100%; background: var(--charAaccent02); position: absolute;][/border][border=0; padding: 0; width: calc(100% - 10px); height: 100%; background: var(--charAgallery03); position: relative;][/border][/border][comment]
// image 03 end //
[/comment][/border][comment]
// images end //
[/comment][comment]
<------------------------------ gallery end ------------------------------
[/comment][/border][/border][comment]
<-------------------- CharA Tab 05 Content Box End --------------------
[/comment][/border][/tab]
[/tabs][/border][comment]
<-------------------- CharA Content Tabs End --------------------
[/comment][/border][/border][comment]
---------- start of credits ---------->
[/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--ENGfont); font-size: .6em; color: var(--blacktext); line-height: 100%; text-align: center; text-transform: uppercase;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
<---------- end of credits ----------
[/comment][/border]
❤
- to Hawke
