Thank you for checking out Cyberpunk: Archangel! Please read all threads to ensure guidelines are kept.
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
[comment][font=Chakra Petch]
Code by Serobliss
[/font][/comment][border=0; padding: 8px 15px 10px; background: #111; text-align: center; font: 14px Iceland; color: rgba(200 200 210); line-height: 1]CYBERPUNK: ARCHANGEL[/border][border="0; padding: 65px 0;
--character: url('https://i.imgur.com/phXy3hh.jpg') no-repeat 50% 50%/cover;
--character-banner: url('https://i.imgur.com/hqynrS2.png') no-repeat 50% 50%/cover;
--bg: url('https://i.imgur.com/ePrKt4c.jpg') no-repeat 50% 50%/cover;
--thingy: url('https://i.imgur.com/b6eRgsG.png') no-repeat 50% 50%/cover;
--theme: #ac1430;
//. colors;
--question: #FF6158;
--answer: #FCEE0A;
background: var(--bg)"][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 1080px); margin: auto; display: flex; flex-flow: row wrap; justify-content: center][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 360px); transform: perspective(1500px) rotateY(17deg)][border=0; padding: 0; margin-bottom: 7px; display: flex; flex-flow: row nowrap][border=0; padding: 4px 8px 0; background: #FF1430; box-shadow: 0 0 3px #FF1430; color: black; text-transform: uppercase; font-weight: 700; border-radius: 3px][font=Orbitron]Identity[/font][/border][border=1px solid var(--theme); padding: 3px 8px; background: rgba(0 0 0 / 60%); color: white; text-transform: uppercase; font-weight: 700; flex: 1; margin-left: 5px; border-radius: 3px][font=Orbitron][comment]
[/comment]NAME HERE[comment]
[/comment][/font][/border][/border][border=1px solid var(--theme); padding: 5px; box-shadow: -10px 10px 8px rgba(85 0 0 / 20%); background: rgba(65 0 0 / 42%); box-sizing: border-box; height: 600px; position: relative][border=0; padding: 3px 3px 2px 2px; position: absolute; left: -4px; top: -4px; background: #FF1430; transform: rotate(45deg)][/border][border=0; padding: 3px 3px 2px 2px; position: absolute; right: -4px; top: -4px; background: #FF1430; transform: rotate(45deg)][/border][border=0; padding: 3px 3px 2px 2px; position: absolute; left: -4px; bottom: -4px; background: #FF1430; transform: rotate(45deg)][/border][border=0; padding: 3px 3px 2px 2px; position: absolute; right: -4px; bottom: -4px; background: #FF1430; transform: rotate(45deg)][/border][border=0; padding: 0; box-sizing: border-box; height: 100%; background: var(--character); position: relative; box-shadow: 0 0 45px rgba(255 0 0 / 35%) inset; overflow: hidden][border="0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: url('https://i.imgur.com/kVPolBD.png') repeat 10%; opacity: 25%"][/border][border=1px solid var(--theme); padding: 10px 15px 5px; position: absolute; bottom: 0%; background: rgba(179 0 21 / 55%); font: normal 300 21px Orbitron; line-height: 100%; color: rgba(248,248,255); text-transform: uppercase; font-weight: 700; left: 0; right: 0; text-align: center; text-shadow: 0 0 5px rgba(0 0 0 / 60%); color: #FCEE0A][comment]
[/comment]ALIAS HERE[comment]
[/comment][border=0; padding: 0; color: rgba(220 225 230); font-size: 12px; margin-top: 3px; text-shadow: 0 0 2px rgba(0 0 0 / 40%)][comment]
[/comment]AFFILIATION HERE[comment]
[/comment][/border][/border][/border][/border][/border][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 600px); transform: perspective(1500px) rotateY(-17deg)][border=1px solid var(--theme); padding: 5px; box-sizing: border-box; height: 120px; background: rgba(65 0 0 / 42%); margin-bottom: 6px; position: relative; background-origin: content-box; box-shadow: 10px 10px 8px rgba(0 0 0 / 22%)][border=0; padding: 0; background: var(--character-banner); box-sizing: border-box; height: 100%][/border][/border][border=2px solid var(--theme); border-right: 0; border-left: 0; border-bottom: 5px solid #eb2332; padding: 0 25px 5px; background: rgba(0 0 0 / 45%); box-shadow: 10px 10px 8px rgba(0 0 0 / 20%); background: rgba(0 0 0 / 30%); box-shadow: inset 0 -11px 10px -10px rgba(235 35 50 / 92%),10px 10px 8px rgba(0 0 0 / 22%); display: flex; flex-flow: row wrap; align-items: center][border=0; padding: 0; box-sizing: border-box; width: clamp(250px, 100%, 420px)][border=0; padding: 0; color: #b61533; text-transform: uppercase; font: normal 700 14px Orbitron; text-shadow: 0 0 2px #c30a15; margin-top: 5px; letter-spacing: 1px; margin-right: auto]Occupation[/border][border=0; padding: 0; color: white; text-transform: uppercase; font: normal 300 22px Orbitron; text-shadow: 0 0 2px #fff; line-height: 1; margin: 1px 0 5px; margin-right: auto]Edgerunner[/border][/border][border=0; padding: 0; margin-left: auto; color: #cd1839; font: normal 300 34px Orbitron; text-shadow: 0 0 5px red; line-height: 1]100%[/border][/border][comment]
----------------------------------------------------------------- 1
[/comment][border=0; margin: 10px 0 0; padding: 0; font-size: 0px; visibility: hidden][accordion=100%]{slide=[border=1px solid var(--theme); border-radius: 2px; padding: 10px 15px 12px; background: rgba(25 25 25 / 83%); line-height: 1; font: normal 300 18px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px -2px 2px; z-index: 1; visibility: visible; line-height: 1; color: #fff; position: relative; box-shadow: 3px 3px 5px rgba(179 30 50 / 62%)]Section 01. Registry[border=0; padding: 0; top: 0; position: absolute; bottom: 0; width: 8px; height: 40px; left: -11px; background: var(--thingy)][/border][/border]}[border=0; padding: 0; margin: -8px auto 0; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 700px); background: rgba(0 0 0 / 51%); height: 225px; overflow: hidden][border=0; padding: 0 20px 0 0; box-sizing: content-box; width: 100%; overflow-x: hidden; overflow-y: scroll; height: 225px][border=0; padding: 15px 10px 15px 28px; margin: 0 auto; box-sizing: border-box; width: clamp(250px, 100%, 700px); text-align: justify; text-shadow: 0 0 2px rgba(0 0 0 / 32%); font-size: 14px; color: #69cae2; text-shadow: 0 0 2px rgba(105 202 226 / 51%)][border=0; padding: 0; display: flex; flex-flow: row wrap; text-transform: uppercase][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]AGE[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]AGE HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]DATE OF BIRTH[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]DATE OF BIRTH HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]HEIGHT[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]HEIGHT HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]GENDER[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]GENDER HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]RACE/ETHNICITY[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]RACE/ETHNICITY HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]NATIONALITY[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]NATIONALITY HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]PLACE OF BIRTH[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]PLACE OF BIRTH HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]PLACE OF RESIDENCE[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]PLACE OF RESIDENCE HERE[comment]
[/comment][/border][/border][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question); margin-top: 8px]OCCUPATION[border=0; padding: 0; font: 20px Chakra Petch; color: var(--answer)][comment]
[/comment]OCCUPATION HERE[comment]
[/comment][/border][/border][/border]
[font=Inter Tight][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]IDENTIFYING CHARACTERISTICS[/border][comment]
[/comment]Mention any defining traits your character would easily be recognizable by here if any. These should be physical traits or otherwise traits that are present regardless of clothing.[comment]
[/comment][/font][/border][/border][/border]{/slide}[comment]
----------------------------------------------------------------- 2
[/comment]{slide=[border=1px solid var(--theme); border-radius: 2px; padding: 10px 15px 12px; background: rgba(25 25 25 / 83%); line-height: 1; font: normal 300 18px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px -2px 2px; z-index: 1; visibility: visible; line-height: 1; color: #fff; position: relative; box-shadow: 3px 3px 5px rgba(179 30 50 / 62%)]Section 02. Statistics[border=0; padding: 0; top: 0; position: absolute; bottom: 0; width: 8px; height: 40px; left: -11px; background: var(--thingy)][/border][/border]}[border=0; padding: 0; margin: -8px auto 0; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 700px); font-size: 14px; color: #e2e4e9; background: rgba(0 0 0 / 51%); height: 225px; overflow: hidden][border=0; padding: 0 20px 0 0; box-sizing: content-box; width: 100%; overflow-x: hidden; overflow-y: scroll; height: 225px][border=0; padding: 15px 10px 15px 28px; margin: 0 auto; box-sizing: border-box; width: clamp(250px, 100%, 700px); text-align: justify; text-shadow: 0 0 2px rgba(0 0 0 / 32%); font-size: 14px; color: #69cae2; text-shadow: 0 0 2px rgba(105 202 226 / 51%)][comment]
-----------------------------------------------------------------
For this section, make certain to adjust both the width percentage for the bar and the actual physical number in text. Regarding percentages, you can do the math. You got this. :)
-----------------------------------------------------------------
COOL
[/comment][border=1px solid var(--theme); padding: 6px 16px; background: #0f0505; position: relative; z-index: 1; margin: auto][border=0; padding: 0; position: absolute; left: 12px; right: 12px; top: -1px; bottom: -1px; background: #0f0505; z-index: 2][/border][border=0; padding: 0; position: relative; z-index: 3; background: #6E131B; box-sizing: border-box; height: 6px; border-radius: 2px][border=0; padding: 3px 0; background: #FF1E38; box-sizing: border-box; position: relative; z-index: 5; width: 15%][/border][/border][border=0; padding: 0; margin-top: 3px; color: white; font: 15px Chakra Petch; text-transform: uppercase; position: relative; z-index: 5]STATISTIC 01: COOL[border=0; padding: 0; display: inline-block; float: right; color: #FF1E38; text-shadow: 0 0 3px #FF1E38]15%[/border][/border][/border][comment]
REFLEXES
[/comment][border=1px solid var(--theme); padding: 6px 16px; background: #0f0505; position: relative; z-index: 1; margin: 8px auto 0][border=0; padding: 0; position: absolute; left: 12px; right: 12px; top: -1px; bottom: -1px; background: #0f0505; z-index: 2][/border][border=0; padding: 0; position: relative; z-index: 3; background: #6E131B; box-sizing: border-box; height: 6px; border-radius: 2px][border=0; padding: 3px 0; background: #FF1E38; box-sizing: border-box; position: relative; z-index: 5; width: 15%][/border][/border][border=0; padding: 0; margin-top: 3px; color: white; font: 15px Chakra Petch; text-transform: uppercase; position: relative; z-index: 5]STATISTIC 02: REFLEXES[border=0; padding: 0; display: inline-block; float: right; color: #FF1E38; text-shadow: 0 0 3px #FF1E38]15%[/border][/border][/border][comment]
INTELLIGENCE
[/comment][border=1px solid var(--theme); padding: 6px 16px; background: #0f0505; position: relative; z-index: 1; margin: 8px auto 0][border=0; padding: 0; position: absolute; left: 12px; right: 12px; top: -1px; bottom: -1px; background: #0f0505; z-index: 2][/border][border=0; padding: 0; position: relative; z-index: 3; background: #6E131B; box-sizing: border-box; height: 6px; border-radius: 2px][border=0; padding: 3px 0; background: #FF1E38; box-sizing: border-box; position: relative; z-index: 5; width: 15%][/border][/border][border=0; padding: 0; margin-top: 3px; color: white; font: 15px Chakra Petch; text-transform: uppercase; position: relative; z-index: 5]STATISTIC 03: INTELLIGENCE[border=0; padding: 0; display: inline-block; float: right; color: #FF1E38; text-shadow: 0 0 3px #FF1E38]15%[/border][/border][/border][comment]
TECHNICAL
[/comment][border=1px solid var(--theme); padding: 6px 16px; background: #0f0505; position: relative; z-index: 1; margin: 8px auto 0][border=0; padding: 0; position: absolute; left: 12px; right: 12px; top: -1px; bottom: -1px; background: #0f0505; z-index: 2][/border][border=0; padding: 0; position: relative; z-index: 3; background: #6E131B; box-sizing: border-box; height: 6px; border-radius: 2px][border=0; padding: 3px 0; background: #FF1E38; box-sizing: border-box; position: relative; z-index: 5; width: 15%][/border][/border][border=0; padding: 0; margin-top: 3px; color: white; font: 15px Chakra Petch; text-transform: uppercase; position: relative; z-index: 5]STATISTIC 04: TECHNICAL[border=0; padding: 0; display: inline-block; float: right; color: #FF1E38; text-shadow: 0 0 3px #FF1E38]15%[/border][/border][/border][comment]
STRENGTH
[/comment][border=1px solid var(--theme); padding: 6px 16px; background: #0f0505; position: relative; z-index: 1; margin: 8px auto 0][border=0; padding: 0; position: absolute; left: 12px; right: 12px; top: -1px; bottom: -1px; background: #0f0505; z-index: 2][/border][border=0; padding: 0; position: relative; z-index: 3; background: #6E131B; box-sizing: border-box; height: 6px; border-radius: 2px][border=0; padding: 3px 0; background: #FF1E38; box-sizing: border-box; position: relative; z-index: 5; width: 15%][/border][/border][border=0; padding: 0; margin-top: 3px; color: white; font: 15px Chakra Petch; text-transform: uppercase; position: relative; z-index: 5]STATISTIC 05: STRENGTH[border=0; padding: 0; display: inline-block; float: right; color: #FF1E38; text-shadow: 0 0 3px #FF1E38]15%[/border][/border][/border]
[border=0; padding: 0; font: 12px Orbitron; color: var(--question)]SYSTEMS//CYBERWARE
OPERATING [font=Inter Tight][size=14px][color=#69cae2]Operating system here[/color][/size][/font]
NEURAL [font=Inter Tight][size=14px][color=#69cae2]Neural system here[/color][/size][/font]
OPTICAL [font=Inter Tight][size=14px][color=#69cae2]Optical system here[/color][/size][/font]
RESPIRATORY [font=Inter Tight][size=14px][color=#69cae2]Respiratory system here[/color][/size][/font]
IMMUNE [font=Inter Tight][size=14px][color=#69cae2]Immune system here[/color][/size][/font]
CIRCULATORY [font=Inter Tight][size=14px][color=#69cae2]Circulatory system here[/color][/size][/font]
NERVOUS [font=Inter Tight][size=14px][color=#69cae2]Nervous system here[/color][/size][/font]
SKELETAL [font=Inter Tight][size=14px][color=#69cae2]Skeletal system here[/color][/size][/font]
HANDS [font=Inter Tight][size=14px][color=#69cae2]Cyberware in hands here[/color][/size][/font]
ARMS [font=Inter Tight][size=14px][color=#69cae2]Cyberware in arms here[/color][/size][/font]
LEGS [font=Inter Tight][size=14px][color=#69cae2]Cyberware in legs here[/color][/size][/font]
FEET [font=Inter Tight][size=14px][color=#69cae2]Cyberware in feet here[/color][/size][/font]
EQUIPMENT[/border][font=Inter Tight][size=14px][color=#69cae2]Mention any and all equipment your character has, including weaons, vehicles, and other miscellaneous tools.[/color][/size][/font][/border][/border][/border]{/slide}[comment]
----------------------------------------------------------------- 3
[/comment]{slide=[border=1px solid var(--theme); border-radius: 2px; padding: 10px 15px 12px; background: rgba(25 25 25 / 83%); line-height: 1; font: normal 300 18px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px -2px 2px; z-index: 1; visibility: visible; line-height: 1; color: #fff; position: relative; box-shadow: 3px 3px 5px rgba(179 30 50 / 62%)]Section 03. Background[border=0; padding: 0; top: 0; position: absolute; bottom: 0; width: 8px; height: 40px; left: -11px; background: var(--thingy)][/border][/border]}[border=0; padding: 0; margin: -8px auto 0; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 700px); font-size: 14px; background: rgba(0 0 0 / 51%); height: 225px; overflow: hidden][border=0; padding: 0 20px 0 0; box-sizing: content-box; width: 100%; overflow-x: hidden; overflow-y: scroll; height: 225px][border=0; padding: 15px 10px 15px 28px; margin: 0 auto; box-sizing: border-box; width: clamp(250px, 100%, 700px); text-align: justify; text-shadow: 0 0 2px rgba(0 0 0 / 32%); font-size: 14px; color: #69cae2; text-shadow: 0 0 2px rgba(105 202 226 / 51%)][font=Inter Tight][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]EARLY LIFE[/border][comment]
[/comment]Describe character's early life here.[comment]
[/comment][/font]
[border=0; padding: 0; font: 12px Orbitron; color: var(--question)]SIGNIFICANT EVENTS
DATE [font=Inter Tight][size=14px][color=#69cae2]Significant event here. Add more events as necessary.[/color][/size][/font]
DATE [font=Inter Tight][size=14px][color=#69cae2]Significant event here. Add more events as necessary.[/color][/size][/font]
DATE [font=Inter Tight][size=14px][color=#69cae2]Significant event here. Add more events as necessary.[/color][/size][/font][/border][/border][/border][/border]{/slide}[comment]
----------------------------------------------------------------- 4
[/comment]{slide=[border=1px solid var(--theme); border-radius: 2px; padding: 10px 15px 12px; background: rgba(25 25 25 / 83%); line-height: 1; font: normal 300 18px Orbitron; text-transform: uppercase; text-shadow: 0 0 3px rgba(0 0 0 / 65%); font-variant: normal; margin: -2px -6px -2px 2px; z-index: 1; visibility: visible; line-height: 1; color: #fff; position: relative; box-shadow: 3px 3px 5px rgba(179 30 50 / 62%)]Section 04. Extra[border=0; padding: 0; top: 0; position: absolute; bottom: 0; width: 8px; height: 40px; left: -11px; background: var(--thingy)][/border][/border]}[border=0; padding: 0; margin: -8px auto 0; visibility: visible; box-sizing: border-box; width: clamp(250px, 100%, 700px); font-size: 14px; background: rgba(0 0 0 / 51%); height: 225px; overflow: hidden][border=0; padding: 0 20px 0 0; box-sizing: content-box; width: 100%; overflow-x: hidden; overflow-y: scroll; height: 225px][border=0; padding: 15px 10px 15px 28px; margin: 0 auto; box-sizing: border-box; width: clamp(250px, 100%, 700px); text-align: justify; text-shadow: 0 0 2px rgba(0 0 0 / 32%); font-size: 14px; color: #69cae2; text-shadow: 0 0 2px rgba(105 202 226 / 51%)][font=Inter Tight][border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]FACECLAIM CREDIT[/border]ARTIST OR LINK HERE
[border=0; padding: 0; box-sizing: border-box; width: 260px; font: 12px Orbitron; color: var(--question)]THEME SONG[/border]EMBED HERE[/font][/border][/border][/border]{/slide}[/accordion][/border][/border][/border][/border][border=0; padding: 8px 15px 10px; background: #111; text-align: center; font-size: 14px; color: rgba(200 200 210); line-height: 1][font=Iceland]CODE BY SEROBLISS[/font][/border]