Skip to content

Instantly share code, notes, and snippets.

@YukiteraKure
Last active March 6, 2022 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save YukiteraKure/ec8c4680ce3d0192b7619031f0b8e9e3 to your computer and use it in GitHub Desktop.
Save YukiteraKure/ec8c4680ce3d0192b7619031f0b8e9e3 to your computer and use it in GitHub Desktop.
[comment][font=Josefin Sans][font=Fredoka][font=Roboto Condensed][font=Jost][font=Orbitron][font=Oswald][font=Roboto][font=Montserrat]
Code & Design by Serobliss | Vanity#8119
[/font][/font][/font][/font][/font][/font][/font][/font][/comment][border=0; padding: calc(38px - 1.5vh) 0;
//. CS Control Panel;
--character-img: url('https://i.imgur.com/f0bqEib.jpg') no-repeat 0% 60%/auto 130%;
--character-img2: url('https://i.imgur.com/LVTPIIr.jpg') no-repeat 50% 50%/cover;
--themecolor: #4444dd;
--background-char-img: url('https://i.imgur.com/fJ4SwKv.jpg') no-repeat 50% 50%/cover;
--banner-img: url('https://i.imgur.com/93V1vlx.jpg') no-repeat 100% 59%/105% auto;
--banner2-img: url('https://i.imgur.com/b74EUaB.jpg') no-repeat 50% 50%/cover;
--skill-01: url('https://i.imgur.com/lIE3HOp.jpg') no-repeat 50% 50%/cover;
--skill-02: url('https://i.imgur.com/3TIHepg.jpg') no-repeat 50% 50%/cover;
--skill-03: url('https://i.imgur.com/ENNYr55.jpg') no-repeat 50% 50%/cover;
//. Miscellaneous;
--char-bg: url('https://i.imgur.com/b4KkhVZ.jpg') no-repeat 50% 50%/cover;
--char-bg2: url('https://i.imgur.com/x43yF33.jpg') no-repeat 50% 50%/cover;
--bg: url('https://i.imgur.com/dx4yqJN.jpg') no-repeat 50% 50%/cover;
--div-shadow: 0 0 12px rgba(0 0 0 / 50%);
--clip-path-lg: polygon(0 0, 97.2% 0, 97.2% 100%, 98% 100%, 98% 0, 100% 0, 100% 100%, 0 100%);
--clip-path-ag: polygon(1em 0, calc(1em + 10px) 0, 10px 100%, 15px 100%, calc(1em + 15px) 0, 100% 0, 97% 100%, 0 100%);
background: var(--bg)][border=0; padding: 0; margin: auto; width: clamp(250px, 100%, 1250px); display: flex; flex-flow: row wrap; justify-content: center][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 530px); margin-right: auto][comment]
//. First Box
[/comment][border=0; border-bottom: 5px solid var(--themecolor); padding: 0; box-sizing: border-box; height: 586px; background: var(--char-bg); box-shadow: var(--div-shadow)][border=0; padding: 0; box-sizing: border-box; height: 100%; margin: 0 auto; width: clamp(250px, 100%, 494px)][border=0; padding: 14px 3px 10px; display: flex; flex-flow: row wrap; box-sizing: border-box; font-family: 'Fredoka', sans-serif; font-size: 8px; text-transform: uppercase; color: #c7c7d1][border=0; padding: 0 53px 0 0; border-bottom: 1px solid rgba(199 199 209 / 20%)]Valorous Order x Code by Serobliss[/border][border=0; padding: 0; margin-left: auto; font-size: 13px; letter-spacing: 0.15em]Keeper of the Lock & Keys[/border][/border][comment]
//. P2
[/comment][border=0; padding: 0; margin-left: auto; box-sizing: border-box; width: clamp(250px, 100%, 410px); height: 520px; background: var(--character-img); box-shadow: -7px 7px 10px rgba(0 0 0 / 45%), 0 0 12px rgba(0 0 0 / 45%) inset; position: relative][border=0; padding: 0; position: absolute; box-sizing: border-box; width: 230px; left: clamp(-64px, 70px - 10vw, 18px); bottom: 25px; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase][border=0; padding: 0; line-height: 1; font: normal 700 32px Josefin Sans; color: #FBFBFB; letter-spacing: 0.08em]Mostima[/border][border=0; padding: 0; font-size: 13px; margin-top: 2px]Rhode Island[border=0; padding: 2px; display: inline-block; background: #eaeaea; margin-left: 5px; width: 66px; box-shadow: 0 0 5px rgba(0 0 0 / 90%)][/border][/border][border=0; padding: 0; margin-top: 10px; font: normal 300 10px Josefin Sans; line-height: 1.58][comment]
//. Code Name
[/comment]Code Name / Mostima
Gender / Female
Combat Experience / Excellent
Birthplace / Laterano
Birthday / December
Race / Undisclosed
Height / 170 cm[/border][/border][/border][/border][/border][border=0; padding: 28px calc(15px - 1vw) 28px 15px; border-bottom: 5px solid var(--themecolor); margin-top: 15px; background: var(--char-bg2); box-shadow: var(--div-shadow)][border=0; padding: 0; height: 170px; overflow: hidden; box-sizing: border-box; margin: auto; width: clamp(250px, 100%, 470px)][border=0; padding: 0; overflow-y: scroll; height: 170px; padding-right: 17px; box-sizing: content-box; width: 100%; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #c9cccf; line-height: 1.56; text-align: justify][border=0; padding: 0; margin-bottom: 6px; font-family: 'Josefin Sans', sans-serif; color: #FBFBFB; font-size: 20px; text-transform: uppercase; line-height: 1]Personal Details[/border][border=0; padding: 0; box-sizing: border-box; width: 50px; height: 5px; background: rgba(255 255 255 / 85%); margin-bottom: 12px][/border][comment]
//. General Description and Personality
[/comment][border=0; padding: 0; display: inline-block; color: rgba(255 255 255 / 93%); margin-right: 5px]General Description[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
[border=0; padding: 0; display: inline-block; color: rgba(255 255 255 / 93%); margin-right: 5px]Personality[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/border][/border][/border][/border][comment]
//. Third Box
[/comment][border=0; padding: 12px calc(26px - 1vw) 12px 24px; margin: 0 auto; box-sizing: border-box; width: clamp(250px, 100%, 700px); background: var(--background-char-img); position: relative; margin-right: auto][border=0; padding: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0 0 0 / 85%); box-shadow: var(--div-shadow)][/border][border=0; position: relative; padding: 10px 0; box-sizing: border-box; height: 800px; overflow: hidden; width: clamp(250px, 100%, 670px); margin: auto][border=0; padding: 0; padding-right: 20px; overflow-y: scroll; width: 100%; box-sizing: content-box; height: 800px; text-align: justify][comment]
//. Character Level
[/comment][border=0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center][border=4px solid #F6D90F; padding: 0; box-sizing: border-box; width: 128px; height: 128px; border-radius: 50%; box-shadow: 0 0 5px rgba(0 0 0 / 80%)][border=0; padding: 0; text-align: center; font: normal 300 14px Montserrat; color: #fff; margin-top: 20px; line-height: 1]LEVEL[border=0; padding: 0; font: normal 300 70px Jost; line-height: 1; margin-top: -3px]90[/border][/border][/border][comment]
//. Profile Banner
[/comment][border=0; padding: 0; filter: drop-shadow(16px 8px 0 var(--themecolor)) drop-shadow(12px 8px 6px rgba(15 15 15 / 90%)); box-sizing: border-box; width: clamp(250px, 100%, 500px); margin: auto][border=0; padding: 24px 15px 8px 21px; margin: 15px 0; height: 80px; background: var(--banner-img); clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%); box-sizing: border-box][border=0; padding: 0; font: normal 300 12px Fredoka, sans-serif; color: rgba(255 255 255 / 90%); margin-right: auto; width: clamp(250px, 100%, 450px); line-height: 1; text-transform: uppercase]EXP — Grade: Elite[/border][border=0; padding: 0; margin-top: 3px; line-height: 1; font: normal 15px Jost][color=#F6D90F]240000[/color] / 240000 — Ascension: 5[/border][/border][/border][/border][comment]
//. Faction Information
[/comment][border=0; padding: 0; margin: 15px 0; display: flex; flex-flow: nowrap][border=0; padding: 0; display: flex; flex-flow: row nowrap; box-sizing: border-box; width: clamp(250px, 100%, 495px)][border=0; padding: 0; box-sizing: border-box; width: 11px; background: var(--themecolor)][/border][border=0; padding: 0 0 5px; margin-left: auto; box-sizing: border-box; width: clamp(250px, 100%, 475px); background: var(--banner2-img)][border=0; padding: 4px 0 8px 12px; font: normal 700 2.4vh Orbitron, sans-serif; text-transform: uppercase; clip-path: var(--clip-path-lg); background: var(--themecolor); text-shadow: 0 0 5px rgba(0 0 0 / 58%); letter-spacing: 0.08em]Penguin Logistics[border=0; padding: 0; margin-top: 2px; font-family: 'Jost', sans-serif; font-size: 12px; color: #fff; text-shadow: 0 0 2px rgba(0 0 0 / 50%); text-transform: none; display: flex; flex-flow: row wrap; font-weight: 300; letter-spacing: 0][border=0; padding: 0; box-sizing: border-box; width: 174px]❖ Echelon:⠀Archon Operator[/border][border=0; padding: 0; box-sizing: border-box; width: 250px]❖ Imperial Rank:⠀First Lieutenant[/border][border=0; padding: 0; box-sizing: border-box; width: 174px]❖ Position:⠀Ranged DPS[/border][border=0; padding: 0; box-sizing: border-box; width: 250px]❖ Tags:⠀AoE, Support, Crowd-Control[/border][/border][/border][comment]
[/comment][border=0; padding: 0; display: flex; flex-flow: row wrap][border=0; padding: 0 0 0 18px; border-right: 1px solid rgba(50 50 50 / 80%); box-sizing: border-box; width: 105px; height: 46px; margin-top: 8px][border=0; padding: 0; font: normal 300 11px Roboto Condensed; color: rgba(210 210 210)]Kills[/border][border=0; padding: 0; font: normal 300 32px Jost; color: #f8f8ff; line-height: 1; margin: 2px 0 0 0]240[/border][/border][comment]
[/comment][border=0; padding: 0 0 0 18px; border-right: 1px solid rgba(50 50 50 / 80%); box-sizing: border-box; width: 105px; height: 46px; margin-top: 8px][border=0; padding: 0; font: normal 300 11px Roboto Condensed; color: rgba(210 210 210)]Operations[/border][border=0; padding: 0; font: normal 300 32px Jost; color: #f8f8ff; line-height: 1; margin: 2px 0 0 0]312[/border][/border][comment]
[/comment][border=0; padding: 0 0 0 18px; border-right: 1px solid rgba(50 50 50 / 80%); box-sizing: border-box; width: 105px; height: 46px; margin-top: 8px][border=0; padding: 0; font: normal 300 11px Roboto Condensed; color: rgba(210 210 210)]Medals[/border][border=0; padding: 0; font: normal 300 32px Jost; color: #f8f8ff; line-height: 1; margin: 2px 0 0 0]7[/border][/border][comment]
[/comment][border=0; padding: 0 0 0 18px; border-right: 1px solid rgba(50 50 50 / 80%); box-sizing: border-box; width: 105px; height: 46px; margin-top: 8px][border=0; padding: 0; font: normal 300 11px Roboto Condensed; color: rgba(210 210 210)]Service Term[/border][border=0; padding: 0; font: normal 300 32px Jost; color: #f8f8ff; line-height: 1; margin: 2px 0 0 0]29[/border][/border][/border][/border][/border][border=0; padding: 0; background: var(--character-img2); box-sizing: border-box; width: 140px; height: 140px; margin-left: auto; box-shadow: 6px 6px var(--themecolor), -6px -6px var(--themecolor)][/border][/border][comment]
//. Statistics ----------------------------------------------------------------- First Accordion
[/comment][border=0; padding: 0; margin-top: 20px][border=0; margin: 10px 0; padding: 0; font-size: 0px; visibility: hidden][accordion=100%]{slide=[border="0; padding: 4px 0 6px 38px; background: var(--themecolor); clip-path: var(--clip-path-ag); line-height: 1; font: normal 700 16px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -5px -6px -2px; z-index: 1; visibility: visible; line-height: 1; color: #fff"]General Profile[/border]}[border=0; padding: 1px 10px 5px 22px; margin: 0 auto; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 618px); line-height: 1; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; overflow-x: auto; color: #f8f8ff][comment]
//. Name
[/comment][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Name[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Undisclosed[/border][comment]
//. Epithet
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Epithet[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Keeper of the Lock & Keys[/border][/border][comment]
//. Code Name
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Code Name[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Mostima[/border][/border][comment]
//. Age & Birth
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Age & Birth[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]210 (February 17, 670 EC)[/border][/border][comment]
//. Gender
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Gender[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Female[/border][/border][comment]
//. Race
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Race[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Undisclosed[/border][/border][comment]
//. Place of Origin
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Place of Origin[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Laterano[/border][/border][comment]
//. Residence
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Residence[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Penguin Logistics Dormitory[/border][/border][comment]
//. Height
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Height[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]170 cm[/border][/border][comment]
//. Relationship
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Relationship[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Single[/border][/border][comment]
//. Specialization
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Specialization[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Covert Ops, Payload Delivery[/border][/border][comment]
//. Alignment
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Alignment[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]True Neutral[/border][/border][comment]
//. Hierarchy
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Hierarchy[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Commoner[/border][/border][comment]
//. Occupation
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Occupation[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Contract Mercenary[/border][/border][comment]
//. Citizenship
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Citizenship[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Laterano[/border][/border][/border]{/slide}[comment]
//. Physical Examination ----------------------------------------------------------------- Second Accordion
[/comment]{slide=[border="0; padding: 4px 0 6px 38px; background: var(--themecolor); clip-path: var(--clip-path-ag); line-height: 1; font: normal 700 16px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px; z-index: 1; visibility: visible; line-height: 1; color: #fff"]Physical Examination[/border]}[border=0; padding: 1px 10px 5px 22px; margin: 0 auto; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 618px); line-height: 1; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; overflow-x: auto; color: #f8f8ff][comment]
//. Strength
[/comment][border=0; padding: 0; display: flex; flex-flow: nowrap][border=0; padding: 0; box-sizing: border-box; width: 110px]Strength[/border][border=0; padding: 5px 0 4px; box-sizing; height: fit-content; height: -moz-fit-content; box-sizing: border-box; width: 100%][border=0; padding: 0; box-sizing: border-box; width: 100%; background: rgba(60,60,60)][border=0; padding: 0; box-sizing: border-box; width: 40%; background: rgba(240, 195, 30); height: 3px][/border][/border][/border][/border][comment]
//. Mobility
[/comment][border=0; padding: 0; margin: 10px 0; display: flex; flex-flow: nowrap][border=0; padding: 0; box-sizing: border-box; width: 110px]Mobility[/border][border=0; padding: 5px 0 4px; box-sizing; height: fit-content; height: -moz-fit-content; box-sizing: border-box; width: 100%][border=0; padding: 0; box-sizing: border-box; width: 100%; background: rgba(60,60,60)][border=0; padding: 0; box-sizing: border-box; width: 60%; background: rgba(240, 195, 30); height: 3px][/border][/border][/border][/border][comment]
//. Endurance
[/comment][border=0; padding: 0; margin: 10px 0; display: flex; flex-flow: nowrap][border=0; padding: 0; box-sizing: border-box; width: 110px]Endurance[/border][border=0; padding: 5px 0 4px; box-sizing; height: fit-content; height: -moz-fit-content; box-sizing: border-box; width: 100%][border=0; padding: 0; box-sizing: border-box; width: 100%; background: rgba(60,60,60)][border=0; padding: 0; box-sizing: border-box; width: 45%; background: rgba(240, 195, 30); height: 3px][/border][/border][/border][/border][comment]
//. Tactical
[/comment][border=0; padding: 0; margin: 10px 0; display: flex; flex-flow: nowrap][border=0; padding: 0; box-sizing: border-box; width: 110px]Combat Skill[/border][border=0; padding: 5px 0 4px; box-sizing; height: fit-content; height: -moz-fit-content; box-sizing: border-box; width: 100%][border=0; padding: 0; box-sizing: border-box; width: 100%; background: rgba(60,60,60)][border=0; padding: 0; box-sizing: border-box; width: 80%; background: rgba(240, 195, 30); height: 3px][/border][/border][/border][/border][/border]{/slide}[comment]
//. Character Trivias ----------------------------------------------------------------- Third Accordion
[/comment]{slide=[border="0; padding: 4px 0 6px 38px; background: var(--themecolor); clip-path: var(--clip-path-ag); line-height: 1; font: normal 700 16px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px; z-index: 1; visibility: visible; line-height: 1; color: #fff"]Extra Trivia[/border]}[border=0; padding: 1px 10px 5px 22px; margin: 0 auto; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 618px); line-height: 1; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; overflow-x: auto; color: #f8f8ff][comment]
//. Trivia 1
[/comment][border=0; padding: 0; display: block][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block; vertical-align: top]Trivia 1[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: clamp(150px, 100%, 470px); line-height: 1.6]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/border][/border][comment]
//. Trivia 2
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block; vertical-align: top]Trivia 2[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: clamp(150px, 100%, 470px); line-height: 1.6]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/border][/border][comment]
//. Trivia 3
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block; vertical-align: top]Trivia 3[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: clamp(150px, 100%, 470px); line-height: 1.6]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/border][/border][comment]
//. Trivia 4
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block; vertical-align: top]Trivia 4[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: clamp(150px, 100%, 470px); line-height: 1.6]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/border][/border][/border]{/slide}[comment]
//. References ----------------------------------------------------------------- Fourth Accordion
[/comment]{slide=[border="0; padding: 4px 0 6px 38px; background: var(--themecolor); clip-path: var(--clip-path-ag); line-height: 1; font: normal 700 16px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px; z-index: 1; visibility: visible; line-height: 1; color: #fff"]References[/border]}[border=0; padding: 1px 10px 5px 22px; margin: 0 auto; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 618px); line-height: 1; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; overflow-x: auto; color: #f8f8ff; overflow-y: hidden][comment]
//. Image Source 1
[/comment][border=0; padding: 0; display: block][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Image Source 1[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content][url=https://www.pixiv.net/en/artworks/79543429][/url][/border][/border][comment]
//. Image Source 2
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Image Source 2[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content][url=https://www.pixiv.net/en/artworks/84706336][/url][/border][/border][comment]
//. Reference
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Reference[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Mostima (Arknights)[/border][/border][comment]
//. Character Rank
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Character Rank[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: -moz-fit-content]Protagonist[/border][/border][comment]
//. Theme Song
[/comment][border=0; padding: 0; display: block; margin-top: 10px][border=0; padding: 0; box-sizing: border-box; width: 110px; display: inline-block]Theme Song[/border][border=0; padding: 0; display: inline-block; color: #b3b3b3; box-sizing: border-box; width: fit-content; width: 400px][MEDIA=youtube]J5KFSdG0eyQ[/MEDIA][/border][/border][/border]{/slide}[/accordion][/border][/border][comment]
//. Ability List -----------------------------------------------------------------
[/comment][border=0; border-bottom: 1px solid rgba(120 120 120 / 90%); padding: 0 0 3px; margin-top: 10px; font: normal 300 20px Jost; color: rgba(240 240 250); text-transform: uppercase]Weapons & Skills[/border][comment]
//. Ability 1 - Permanent Cloak
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; margin-top: 18px][border=0; padding: 0; box-sizing: border-box; width: 65px; height: 65px; background: var(--skill-01); position: relative; margin-left: 2px][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; left: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; left: -2px; width: 14px; height: 14px][/border][/border][border=0; padding: 0; margin-left: 20px; box-sizing: border-box; width: clamp(250px, 100%, 565px); font-family: 'Roboto',sans-serif; font-size: 13px; color: #c2c2c8; line-height: 1.6][border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Permanent Cloak[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][comment]
//. Ability 2 - Lock of Shattered Time
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 65px; height: 65px; background: var(--skill-02); position: relative; margin-left: 2px][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; left: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; left: -2px; width: 14px; height: 14px][/border][/border][border=0; padding: 0; margin-left: 20px; box-sizing: border-box; width: clamp(250px, 100%, 565px); font-family: 'Roboto',sans-serif; font-size: 13px; color: #c2c2c8; line-height: 1.6][border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Lock of Shattered Time[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][comment]
//. Ability 3 - Key of Chronology
[/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; margin-top: 20px][border=0; padding: 0; box-sizing: border-box; width: 65px; height: 65px; background: var(--skill-03); position: relative; margin-left: 2px][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-right: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; right: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; bottom: -2px; left: -2px; width: 14px; height: 14px][/border][border=0; padding: 0; position: absolute; border-left: 2px solid #d9d9d9; border-top: 2px solid #d9d9d9; top: -2px; left: -2px; width: 14px; height: 14px][/border][/border][border=0; padding: 0; margin-left: 20px; box-sizing: border-box; width: clamp(250px, 100%, 565px); font-family: 'Roboto',sans-serif; font-size: 13px; color: #c2c2c8; line-height: 1.6][border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Key of Chronology[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][comment]
//. Background
[/comment][border=0; border-bottom: 1px solid rgba(120 120 120 / 90%); padding: 0 0 3px; margin-top: 28px; font: normal 300 20px Jost; color: rgba(240 240 250); text-transform: uppercase; margin-bottom: 10px]Historical Biography[/border][comment]
//. Origin (Birth)
[/comment][border=0; padding: 0; font-family: 'Roboto',sans-serif; font-size: 13px; color: #c2c2c8; line-height: 1.6][border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Year 000[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula felis, pharetra vel nunc varius, congue maximus urna. Sed faucibus, dolor vitae volutpat viverra, tellus libero tristique dui, ut pulvinar arcu ipsum eget elit. Vestibulum at dui in tortor scelerisque laoreet.
[border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Year 010[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula felis, pharetra vel nunc varius, congue maximus urna. Sed faucibus, dolor vitae volutpat viverra, tellus libero tristique dui, ut pulvinar arcu ipsum eget elit. Vestibulum at dui in tortor scelerisque laoreet. Etiam nisi ipsum, bibendum at magna eget, consequat bibendum tortor. Nullam nunc leo, gravida nec risus non, feugiat ultrices turpis. Curabitur pretium et neque a laoreet. Praesent ac magna ullamcorper tellus consequat scelerisque. Proin sollicitudin nibh lorem, eu dignissim sapien iaculis in. Nunc vitae fringilla odio. Nulla vitae venenatis neque, vitae fringilla neque.
[border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Year 020[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula felis, pharetra vel nunc varius, congue maximus urna. Sed faucibus, dolor vitae volutpat viverra, tellus libero tristique dui, ut pulvinar arcu ipsum eget elit. Vestibulum at dui in tortor scelerisque laoreet. Etiam nisi ipsum, bibendum at magna eget, consequat bibendum tortor. Nullam nunc leo, gravida nec risus non, feugiat ultrices turpis. Curabitur pretium et neque a laoreet. Praesent ac magna ullamcorper tellus consequat scelerisque. Proin sollicitudin nibh lorem, eu dignissim sapien iaculis in. Nunc vitae fringilla odio. Nulla vitae venenatis neque, vitae fringilla neque.
[border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Year 030[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula felis, pharetra vel nunc varius, congue maximus urna. Sed faucibus, dolor vitae volutpat viverra, tellus libero tristique dui, ut pulvinar arcu ipsum eget elit. Vestibulum at dui in tortor scelerisque laoreet. Etiam nisi ipsum, bibendum at magna eget, consequat bibendum tortor. Nullam nunc leo, gravida nec risus non, feugiat ultrices turpis. Curabitur pretium et neque a laoreet. Praesent ac magna ullamcorper tellus consequat scelerisque. Proin sollicitudin nibh lorem, eu dignissim sapien iaculis in. Nunc vitae fringilla odio. Nulla vitae venenatis neque, vitae fringilla neque.
[border=0; padding: 0; color: #fff; display: inline-block; margin-right: 5px]Year 040[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula felis, pharetra vel nunc varius, congue maximus urna. Sed faucibus, dolor vitae volutpat viverra, tellus libero tristique dui, ut pulvinar arcu ipsum eget elit. Vestibulum at dui in tortor scelerisque laoreet. Etiam nisi ipsum, bibendum at magna eget, consequat bibendum tortor. Nullam nunc leo, gravida nec risus non, feugiat ultrices turpis. Curabitur pretium et neque a laoreet. Praesent ac magna ullamcorper tellus consequat scelerisque. Proin sollicitudin nibh lorem, eu dignissim sapien iaculis in. Nunc vitae fringilla odio. Nulla vitae venenatis neque, vitae fringilla neque.
[/border][/border][/border][/border][/border][/border]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment