Daddy Dream
Creation becomes Destruction
Click Stars and Scroll
- Artist — vikisighLore“”Welcome to Cybernetic Rebirth!
The year is 3035, society has crumbled under their endless greed and hyper advancement. Their latest creation, a human android capable of having a human conscious, has caused the fall of humanity to near extinction and is deemed every human as their mortal enemy. However, some androids have decided that the androids wouldn't be able to survive without the help of humans and have become traitorous towards the other androids. Most of humanity has taken up the aid of these androids turned traitor and have formed many factions across the lands. The story begins with a scavenging/hunting party heading into an abandon city to find supplies for their camp. The trip was proceeding like normal until the ground collapses out from under them and they fall deep into an underground laboratory rife with all sorts of tech. Climbing upwards only causes the hole they came from to crumble in, risking more party members to fall in. The only chance they have is to make their way through the abandon facility unto they are able to find a way out. Will they be able to do it safely? What discoveries await them in this facility?PlayersTeam Member 1Lorem ipsum id eros vitae augue ultricies efficitur. Tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.Team Member 2Vestibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.Team AndroidRestibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem.Traitor MemberVestibulum id eros vitae augue ultricies efficitur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Nullam dapibus nunc risus. Maecenas ac mollis ligula. Maecenas gravida eros dignissim fringilla hendrerit. Sed finibus lectus eget fermentum consectetur. Morbi ac commodo quam. Duis ut libero interdum, tempor massa ut, gravida lorem. - Places of InterestCharltonThe city of the remaining human race that rose up against the androids. They have walled themselves behind massive walls of metal and have begun to rebuild their city to the best of their abilities by going underground. The city above is mostly used as a decoy and a place where the human race does most of their outside trades and where their military guilds are. Below ground, however, is where Charlton comes to life in an expansive 15 floor pit. The first 5 floors are a mix of military and customs, where people who have come to trade and stay awhile reside or where androids who haven't turned are kept. The next 5 floors is where the true marketplaces are at, hosting many different things and sometimes sporting some black markets. The last five floors are the residential floors where everyone stays and helps run the city.
The PlainsArid, hot, and barren to all vegetation is what the plains are, which represents the state of most of the continent. There are ruined towns and cities scattered around the vast land from times past, most of which are still very much inhabited by roaming androids and some bandits. These places are gems when it comes to finding scraps or resources for the city of Charlton.
The LaboratoryA massive building tucked int the Forest of Life that holds tons of old and ancient tech, most of which is deactivated. Occasionally, there are some active androids protecting the lab, but they do not attack first like the more aggressive androids, and tend to want to stay peaceful and left alone in the lab. Some humans have even suggested that the laboratory is like a small home to androids that didn't join the uprising. These androids are also willing to trade with the humans, but only if they are treated kindly and are offered something worth their tech.
The HeapsA burning scape of trash, broken androids, and bodies of the condemned. The place has been on fire for years, and no one knows how or why it started to burn. the ear around the heaps is charred and covered in such a thick layer of soot that it would stain someone's clothes for months. The heaps is also a place of punishment to humans who have committed grave sins against humanity by siding with the rebellion androids, was caught doing immoral crimes, or was sold off to slavery.MapThis map shows only a fraction of what the world now looks like.
- Bits and BobblesCharacter Sheet Code -Cyber OOC/Character Apps -Use this as a skeleton for how I would like the code to look. Its mobile friendly so far and a sideways scrollerCode:
[comment]coded by uxie! [font=Roboto Condensed][font=Karla][font=Nunito]have a nice day![/font][/font][/font] [/comment] [comment]coded by uxie! fonts used: [font=Poppins]header[/font] [font=Crimson Pro]quote[/font] [font=Karla]subheader/body text[/font] [/comment][border="transparent; /*border colour -- make sure it's distinct from the other background*/ --bg-1: #6495ED; /*main background colour*/ --bg-2: #2B3856; /*main accent colour*/ --color-1: #87CEEB; /*secondary accent colour*/ --color-2: #48CCCD; /*header colour*/ --h1: var(--bg-2); /*quote colour*/ --subtitle: #48CCCD; /*text colour*/ --t-color: #48CCCD; /*fonts used*/ --header: 'Poppins', sans-serif; --quote: 'Crimson Pro', serif; --body: 'Karla', sans-serif; /*background image*/ --bg-img: url('https://i.pinimg.com/originals/23/20/80/2320800ae5e9ee1ce6ea318368066a0e.gif'); /*big image (left/top)*/ --img-1: url('https://i.pinimg.com/originals/99/d1/f6/99d1f69ab51459b161c92be780abfe2a.gif'); /*sidebar icon*/ --img-2: url('https://i.pinimg.com/originals/23/20/80/2320800ae5e9ee1ce6ea318368066a0e.gif'); /*appearance image*/ --img-3: url('https://i.pinimg.com/originals/23/20/80/2320800ae5e9ee1ce6ea318368066a0e.gif'); /*extra info image*/ --img-4: url('https://i.pinimg.com/originals/23/20/80/2320800ae5e9ee1ce6ea318368066a0e.gif'); /*gallery images*/ --gimg-1: url('https://i.imgur.com/Zirt7gw.png'); --gimg-2: url('https://i.imgur.com/Zirt7gw.png'); --gimg-3: url('https://i.imgur.com/Zirt7gw.png'); --gimg-4: url('https://i.imgur.com/Zirt7gw.png'); --gimg-5: url('https://i.imgur.com/Zirt7gw.png'); --gimg-6: url('https://i.imgur.com/Zirt7gw.png'); /*relationship images*/ --r1: url('https://i.imgur.com/umdCpUF.png'); --r2: url('https://i.imgur.com/umdCpUF.png'); --r3: url('https://i.imgur.com/umdCpUF.png'); --r4: url('https://i.imgur.com/umdCpUF.png'); height:auto; width:100%; max-width:600px; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-1); margin:auto; line-height:0; overflow:hidden; position:relative;"][border=transparent; height:auto; width:100%; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-2); overflow:hidden;][border=transparent; height:auto; min-height:400px; width:100%; padding:0; display:flex; flex-flow:row wrap; position:relative; overflow:hidden;] [comment]----left/top image----[/comment] [border=transparent; height:400px; flex:68; min-width:280px; max-width:340px; padding:0; background: var(--img-1); background-size:cover; box-sizing:border-box; position:relative; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; ][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][border=transparent; height:400px; flex:32; min-width:200px; padding:0; background: var(--bg-img); background-size:cover; background-position:center;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border] [comment]----right (main container----[/comment] [border=transparent; height:400px; width:100%; padding:0; position:absolute; bottom:0; left:0;] [comment]----filler stuff----[/comment] [border=transparent; height:400px; width:100%; padding:10px 15px 10px 0; box-sizing:border-box; position:absolute; top:-400px; left:0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; bottom:10px; right:5px; position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border][border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:0; box-sizing:border-box; border:1px solid var(--color-1);][/border][/border] [comment]----filler stuff end----[/comment] [border=transparent; height:400px; width:100%; padding:0; overflow:hidden;][border=transparent; height:417px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior: smooth;][border=transparent; height:400px; width:auto; padding:0; display:flex; flex-flow:row nowrap;] [comment]----most left----[/comment] [border=transparent; height:400px; width:clamp(0px, 65vw - 250px, 340px); padding:0; box-sizing:border-box; flex-shrink:0; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; overflow:hidden; position:relative; left:0.3px;] [comment]----instruction----[/comment] [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; top:5px; right:5px; position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa]Hold Shift + Scroll[/border] [comment]----box----[/comment] [border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:10px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap; justify-content:flex-end;] [comment]----quote----[/comment] [border=transparent; height:auto; height:fit-content; width:130px; position:relative; padding:0; opacity:0.8;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:15px; left:-15px; color: var(--color-1); font-size:125px; opacity:0.7; font-style:normal; font-weight:normal; z-index:-1; font-family: sans-serif; line-height:18px;]❝[/border][border=transparent; height:auto; height:fit-content; max-height:108px; width:100%; padding:0; color: var(--subtitle); font-size:11px; font-family: var(--quote); font-style:italic; line-height:18px; letter-spacing:1px; font-weight:bold; overflow:hidden;][comment] ----* * * quote here (keep it short)---- [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a.[/border] [/border] [comment]----quote end----[/comment] [comment]----quote credit----[/comment] [border=transparent; height:auto; height:fit-content; width:120px; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:center; opacity:0.75;][border=transparent; height:0; width:30px; border-top:1px solid var(--subtitle); padding:0; flex-shrink:0; margin:2px 8px 0 0;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--subtitle); font-size:12px; font-family: var(--quote); font-style:oblique; line-height:18px; letter-spacing:0.5px; font-weight:bold; text-align:right;][comment] ----* * * quote credit here---- [/comment]credit[/border][/border] [/border] [/border][/border] [comment]----most left end----[/comment] [comment]----left (sidebar)----[/comment] [border=transparent; height:400px; width:calc(100vw - 30px); max-width:215px; padding:0; border:8px solid var(--bg-2); border-top:0; border-bottom:0; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap;] [comment]----sidebar container----[/comment] [border=transparent; height:calc(100% - 55px); width:100%; padding:0 10px; box-sizing:border-box; background:var(--bg-2);][border=transparent; height:100%; width:100%; padding:10px 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; position:relative;] [comment]----sidebar image----[/comment] [border=transparent; height:132px; width:132px; padding:8px; border:1px solid var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:auto; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; background-position:50% 50%; position:relative; overflow:hidden; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border] [comment]----role----[/comment] [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:68px; padding:0; position:absolute; top:82px; right:4px;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:2px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right;][comment] ----* * * role here---- [/comment]ENTER APPLIED FOR ROLE[/border][/border] [comment]----name----[/comment] [border=transparent; height:auto; min-height:30px; max-height:56px; width:100%; padding:0; color: var(--color-1); text-shadow:1px 1px var(--color-2); letter-spacing:2px; font-weight:bold; font-family: var(--header); font-size:34px; line-height:28px; margin-top:14px; flex-shrink:0; overflow:hidden;][comment] ----* * * character first name/nickname here---- [/comment]NAME[/border] [comment]----basics----[/comment] [border=transparent; height:60%; width:174px; padding:0; margin:20px 0 26px 1px; overflow:hidden;][border=transparent; height:100%; width:191px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:174px; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]FULL NAME[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]AGE[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]HOMETOWN[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]RACE[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [/border][/border][/border] [comment]----basics end----[/comment] [/border][/border] [comment]----sidebar container end----[/comment] [comment]----music player----[/comment][comment]--If you want a music player, change the background color from bg-2 to color-1--[/comment] [border=transparent; height:55px; width:100%; padding:0; position:relative; flex-shrink:0; border-left:13px solid var(--bg-2); border-right:13px solid var(--bg-2); box-sizing:border-box;][border=transparent; height:55.5px; width:calc(100% + 1.5px); padding:1px 0 0 0; background: var(--bg-2); position:absolute; top:-0.5px; left:-1px;][/border][border=transparent; height:100%; width:100%; padding:10px 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;] [comment]----play button----[/comment] [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; position:relative; overflow:hidden; pointer-events:auto;] [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--h1); font-size:16px; flex-shrink:0;][fa]fas fa-play[/fa][/border] [comment]----actual media player----[/comment] [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; opacity:0.01%;] [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment] [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;] [media=soundcloud]https://soundcloud.com/green-thumb-431624934/phobiafirst-ver[/media] [/border] [comment]----google drive (replace the google file code within media tag with your own)----[/comment] [border=transparent; height:500px; width:500px; margin-top:-313px; margin-left:-103px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;] [media=googledrive]google file code here[/MEDIA] [/border] [/border] [comment]----actual media player end----[/comment] [/border] [comment]----music info----[/comment] [border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap; margin-left:25px;] [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:12px; letter-spacing:1.5px; font-style:oblique; font-weight:bold;][comment] ----* * * song title here---- [/comment]song name[/border] [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--Inter); line-height:100%; font-size:8px; letter-spacing:2px; text-transform:uppercase; margin-top:3px; font-weight:bold;][comment] ----* * * song artist here---- [/comment]artist[/border] [/border] [comment]----music info end---[/comment] [/border][/border] [comment]----music player end----[/comment] [/border] [comment]----left end----[/comment] [comment]----right (main contents)----[/comment] [border=transparent; height:400px; width:calc(100vw - 61px); max-width:340px; padding:0; border:clamp(0px, 25px - 3vw, 20px) solid var(--bg-2); border-bottom:clamp(0px, 15px - 1vw, 6px) solid var(--bg-2); border-right:0; border-left:clamp(0px, 0.8vw, 8px) solid var(--bg-2); box-sizing:border-box; flex-shrink:0; scroll-snap-align:end; display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-23px;][/border] [comment]----section 1 (appearance)----[/comment] [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;] [comment]----section title container----[/comment] [border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;] [border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border] [border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border] [comment]----section number----[/comment] [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment] ----* * * section number here---- [/comment]01.[/border][/border] [comment]----section title----[/comment] [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment] ----* * * section title here---- [/comment]LOOKS[/border][/border] [/border] [comment]----section title container end----[/comment] [comment]----section contents----[/comment] [border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;] [comment]----row one----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;] [comment]----icon----[/comment] [border=transparent; width:clamp(85px, 10vw, 110px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;][border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;] [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border] [comment]----appearance contents----[/comment] [border=transparent; height:110px; flex:1; margin-left:15px; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]HEIGHT[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]answer[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]WEIGHT[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]answer[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]BODY TYPE[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]answer[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]SEXUALITY[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]answer[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]SCARS/MARKS[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]answer[/border] [/border] [comment]----copy me too!----[/comment] [/border][/border][/border] [comment]----appearance contents end----[/comment] [/border] [comment]----row one end----[/comment] [/border] [comment]----section contents end----[/comment] [/border] [comment]----section 1 end----[/comment] [comment]----section 2 (history)----[/comment] [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:start; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;] [comment]----section title container----[/comment] [border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;] [border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border] [border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.1px; left:0;][/border] [border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border] [comment]----section number----[/comment] [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment] ----* * * section number here---- [/comment]02.[/border][/border] [comment]----section title----[/comment] [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment] ----* * * section title here---- [/comment]history[/border][/border] [/border] [comment]----section title container end----[/comment] [comment]----section contents----[/comment] [border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border] [comment]----copy this whole thing to make another bit of info (text)----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;] [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment] ----* * * text starts here here---- [/comment]this scrolls if you add enough content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed. Praesent sed eros pulvinar, fringilla dui a, vestibulum nisi. Cras blandit enim laoreet orci porta ultrices. Cras purus erat, commodo a rhoncus ac, dapibus quis mauris. Ut rhoncus libero eu fermentum bibendum. Nullam ac ipsum augue. Donec commodo dui efficitur iaculis venenatis. Mauris a neque pellentesque, faucibus urna vel, dapibus nulla. Sed tincidunt dui sed dictum vestibulum. Ut venenatis urna in elit hendrerit, eu molestie massa efficitur. Nullam sit amet sem ut ligula gravida ultricies. Etiam gravida quis diam at elementum. In dignissim eros ut sapien fringilla, vel lobortis nibh auctor. Sed ut nibh bibendum, tincidunt ex in, mattis odio. Donec egestas facilisis dapibus. Proin varius ornare sapien, at auctor sem lacinia non. [/border] [/border] [comment]----copy me too!----[/comment] [/border][/border][/border][/border] [comment]----section contents end----[/comment] [/border] [comment]----section 2 end----[/comment] [comment]----section 3 (extra information)----[/comment] [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;] [comment]----section title container----[/comment] [border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;] [border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border] [border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.1px; left:0;][/border] [border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border] [comment]----section number----[/comment] [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment] ----* * * section number here---- [/comment]03.[/border][/border] [comment]----section title----[/comment] [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment] ----* * * section title here---- [/comment]COMBAT[/border][/border] [/border] [comment]----section title container end----[/comment] [comment]----section contents----[/comment] [border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;] [comment]----row one----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;] [comment]----image----[/comment] [border=transparent; height:auto; min-height:100%; width:clamp(85px, 10vw, 115px); flex-shrink:0; border:1px solid var(--color-1); padding:8px; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-4); background-size:cover; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;] [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border] [comment]----misc contents----[/comment] [border=transparent; height:auto; min-height:clamp(85px, 10vw, 115px); max-height:260px; flex:1; margin:0 10px 0 1px; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]WEAPON[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [comment]----copy this whole thing to make another bit of info----[/comment] [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;] [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment] ----* * * info title here---- [/comment]COMBAT TYPE[/border] [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment] ----* * * info contents here---- [/comment]hello[/border] [/border] [comment]----copy me too!----[/comment] [/border][/border][/border] [comment]----misc contents end----[/comment] [/border] [comment]----row one end----[/comment] [/border] [comment]----section contents end----[/comment] [/border] [comment]----section 6 end----[/comment] [/border][/border] [comment]----right end----[/comment] [/border][/border][/border][/border] [comment]----main container end----[/comment] [/border][/border][comment] ----signature! do not remove [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--bg-1); font-size:10px;text-align:center; top:13px; right:15px; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]Cyber Roleplay -I just made it super simple hereNone yet people!ExtrasI'm just not able to delete this section of the thread without it messing up.
Last edited:
