TextBin - Online Text and Code Sharing

New Paste Browse

[comment]coded by uxie!

fonts used:
[font=Poppins]header[/font]
[font=Crimson Pro]quote[/font]
[font=Karla]subheader/body text[/font]

to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border=transparent;
/*border colour -- make sure it's distinct from the other background*/
--bg-1: #f2f2f2;
/*main background colour*/
--bg-2: #fff;

/*main accent colour*/
--color-1: #f4d977;
/*secondary accent colour*/
--color-2: #f7b885;

/*header colour*/
--h1: var(--bg-2);
/*quote colour*/
--subtitle: #6d4e41;
/*text colour*/
--t-color: #332f2d;

/*fonts used*/
--header: 'Poppins', sans-serif;
--quote: 'Crimson Pro', serif;
--body: 'Karla', sans-serif;

/*background image*/
--bg-img: url('https://i.imgur.com/TWyEAzk.png');
/*big image (left/top)*/
--img-1: url('https://i.imgur.com/B9pGtdT.png');
/*sidebar icon*/
--img-2: url('https://i.imgur.com/3i3rQHZ.png');
/*appearance image*/
--img-3: url('https://i.imgur.com/oJZX872.png');
/*extra info image*/
--img-4: url('https://i.imgur.com/yo1kqq3.png');

/*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; justify-content:center;]
   [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:clamp(5px, 30px - 3.5vw, 10px); 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 - 280px, 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] 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;

/*increase this value if the text is too light on your image*/ 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]role role role[/border][/border]

[comment]----name----[/comment]
[border=transparent; height:auto; min-height:36px; 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]

----* * * info title here----

[/comment]nicknames[/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]

----* * * 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]

----* * * info title here----

[/comment]d.o.b.[/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]

----* * * info title here----

[/comment]ethnicity[/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]

----* * * 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]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]
         [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(--color-1); opacity:0.65; 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:-177px; 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; 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]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]visage[/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]hair c.[/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]eye c.[/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]faceclaim[/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 (psyche)----[/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;]

----* * * section number here----

[/comment]02.[/border][/border]

----* * * section title here----

[/comment]psyche[/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]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor purus a lacus iaculis accumsan. Integer justo justo, ultrices interdum feugiat et, pharetra vitae felis. Ut at arcu quis ante vehicula imperdiet. Etiam aliquam dui id commodo faucibus. Ut semper, ipsum et rhoncus mollis, sem sapien consequat turpis, vitae mollis erat eros quis diam. Curabitur feugiat, ligula id feugiat pulvinar, augue nunc blandit nisl, sit amet aliquam lectus turpis non nunc. Suspendisse elementum nisi eget varius aliquet. Quisque non nibh fermentum, efficitur arcu quis, feugiat turpis. Morbi cursus non lacus sed tempus.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

----* * * info title here----

[/comment]likes[/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]

----* * * info title here----

[/comment]dislikes[/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]

----* * * info title here----

[/comment]fears[/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][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 2 end----[/comment]

[comment]----section 3 (history)----[/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;]

----* * * section number here----

[/comment]03.[/border][/border]

----* * * section title here----

[/comment]history[/border][/border]
[/border]
[comment]----section title container end----[/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 3 end----[/comment]

[comment]----section 4 (gallery)----[/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;]

----* * * section number here----

[/comment]04.[/border][/border]

----* * * section title here----

[/comment]gallery[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; --imgwidth: 70px; --margin: 4px; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; width:100%; padding:12px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:row wrap;]

[comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]

[/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 4 end----[/comment]

[comment]----section 5 (relationships)----[/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.05px; 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]05.[/border][/border]

----* * * section title here----

[/comment]connections[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

[comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r1);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

[comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

[comment]----character name----[/comment]
         [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:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

----* * * character name here----

[/comment]character name[/border]

[comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

----* * * text starts here----

[/comment]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.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

/*edit the number in rX to match the number in the variables*/ background: var(--r2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

----* * * character name here----

[/comment]character name[/border]

----* * * text starts here----

/*edit the number in rX to match the number in the variables*/ background: var(--r3);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

----* * * character name here----

[/comment]character name[/border]

----* * * text starts here----

/*edit the number in rX to match the number in the variables*/ background: var(--r4);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

[comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

----* * * character name here----

[/comment]character name[/border]

----* * * text starts here----

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 5 end----[/comment]

[comment]----section 6 (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;]

----* * * section number here----

[/comment]06.[/border][/border]

----* * * section title here----

[/comment]miscellaneous[/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;

[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]whatever[/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----

----* * * 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]

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Paste Settings

Site Languages