[comment]coded by xayah.ღ -- feel free to message me if you have any problems ![/comment] [border=2px solid white; /*PICTURE VARIABLES -- change x% y% to change what part of the picture you see*/ --mainbg: url('https://i.pinimg.com/564x/73/a9/22/73a92243df7974018f12ec04a7b495ce.jpg') 50% 50%; --sidebg1: url('https://i.pinimg.com/564x/07/c3/88/07c388045ee897187092ebda9626a0fb.jpg') 10% 0%; --quotebg: url('https://i.pinimg.com/736x/84/5a/32/845a32a794ac33d526301441f81a7a2d.jpg') 50% 30%; --sidebg2: url('https://i.pinimg.com/564x/07/c3/88/07c388045ee897187092ebda9626a0fb.jpg') 10% 0%; --pic1: url('https://i.pinimg.com/236x/7e/60/c8/7e60c8416784f5a89be8cb21429a4e61.jpg') 50% 0%; --pic2: url('https://pbs.twimg.com/media/Ddo3ZqCU0AAbZAf.jpg') 50% 0%; --pic3: url('https://pbs.twimg.com/media/D1_OXWBUkAAHD8q.jpg') 50% 10%; --pic4: url('http://qqpublic.qpic.cn/qq_public/0/0-2761969187-3E086432FF40F9E330066AE6D67AC708/0?fmt=jpg&size=287&h=1600&w=900&ppv=1') 50% 10%; --pic5: url('https://image11.m1905.cn/uploadfile/2021/0420/20210420051848696715.jpg') 50% 0%; --pic6: url('https://p3-tt.byteimg.com/origin/pgc-image/ecca7ed6942f4ff69ed9652bddb482b6.jpg') 50% 0%; --pic7: url('https://p3-tt-ipv6.byteimg.com/origin/pgc-image/488d4e3e2a0846ce8283424bd62ca88e.jpg') 50% 0%; --history1: url('https://i.pinimg.com/474x/c7/d8/15/c7d815ac9cff9ae88e3f603151c4cdb5.jpg'); 50% 50%; --history2: url('https://i.pinimg.com/736x/2b/14/2f/2b142f8096dad2e6fb9aa746b7647e88.jpg') 50% 50%; --history3: url('in case you add a third section to history, insert url here'); --extra: url('https://i.pinimg.com/236x/97/b2/f2/97b2f20ee42c916f15a4702d188ea52d.jpg'); --extra2: url('https://i.pinimg.com/474x/ec/6f/95/ec6f95b2f5a3720c0890cc21f5140c46.jpg') 50% 80%; /*TAB COVER SHAPE*/ --p1: polygon(25% 0, 75% 0, 75% 60%, 50% 100%, 25% 60%); --p2: polygon(25% 0%, 75% 0, 75% 100%, 0% 100%); --p3: polygon(25% 0%, 100% 0%, 75% 100%, 25% 100%); /*COLOR -- most borders are 0 or #bac5e2 - ctrl+F to find them and replace them!*/ --main: #bac5e2; --text: black; --some_borders: #D3D3D3; --sub: #D3D3D3; /*FONTS*/ --big_letters: Playfair Display; --personality_traits: Lora; --tab_hearts: Size 3pt; height: 450px; max-width: 700px; margin: auto; padding: 0; line-height: 0; display: flex; align-items: center; justify-content: center; position: relative; background: var(--mainbg); background-size: cover;] [comment]CONTENT BOX[/comment] [border=0; height: 80%; width: clamp(75%, 50%, 95%); background: rgba(0, 0, 0, 0.5); padding: 0;] [border=0; height: 80%; width: 85%; margin: auto; margin-top: 25px; background: white; padding: 2px 0px 6px 5px;] [comment]TAB CONTAINER[/comment] [border=0; height: 40%; width: 30px; background: transparent; overflow: hidden; padding: 0; margin: 0 0 0 -50px; display: block; pointer-events: auto;] [tabs] [tab=a.] [comment]TAB 1 CONTENT[/comment] [border=0; height: 64%; width: 18%; position: absolute; border-radius: 0 0 0 70px; margin: -141px 0 0 30px; overflow: hidden; padding: 0; display: inline; background: white; float: left;] [border=0; height: 100%; width: 105%; background: var(--sidebg1); background-size: cover; pointer-events: auto; overflow-y: scroll; overflow-x: hidden; padding: 0 25px 0 0; border-radius: 0;] [comment]SIDE BG OVERLAY--adjust how high you want the overlay to be by fidgeting with the height values! 40%-100%--[/comment] [border=0; height: 50%; width: 112%; padding: 0; background: rgba(256, 256, 256, 0.5); margin: 291px 0 0 0; pointer-events: auto; border-radius: 0; overflow: hidden;] [border=0; height: 101%; width: 99%; overflow: hidden; border-radius: 0; padding: 0;] [border=0; height: 90%; width: 113.8%; overflow-y: scroll; overflow-x: hidden; border-radius: 0; color: black; line-height: 1.1em; word-spacing: 1px; font-size: 10px; padding: 2px 32px 0 0px; box-sizing: border-box; text-align: left; margin-left: 10px;][font=Lora][B]name.[/B][/font] answer [font=Lora][B]age.[/B][/font] answer [font=Lora][B]gender.[/B][/font] answer [font=Lora][B]sexuality.[/B][/font] answer [font=Lora][B]job[B].[/B][/B][/font] answer [font=Lora][B]ethnicity.[/B][/font] answer [font=Lora][B]role.[/B][/font] answer [comment]keep this spacing! so important for readability![/comment] [/border][/border][/border][/border][/border] [comment]BASIC & VISAGE SECTION[/comment] [border=1px solid transparent; height: 62%; width: 42%; position: absolute; right: 18.5%; top: 17.1%; display: flex; padding: 0 0 5px 0; line-height: 0; display: block;] [comment]FIRST NAME ONLY -- 10 LETTERS MAX[/comment] [border=2px solid #bac5e2; width: 100%; height: 10%; background: transparent; color: var(--main); font-size: clamp(20px, 2%, 1.5em); padding: 0; text-align: center; text-transform: uppercase; font-weight: bolder; font-style: oblique; line-height: 25px; box-sizing: border-box;][font=Playfair Display]first name[/font][/border] [border=2px solid #bac5e2; width: 100%; height: 66%; background: transparent; box-sizing: border-box; padding: 0; margin-top: 2px;][border=1px solid transparent; width: 100%; height: 100%; overflow: hidden; padding: 0;][border=0; height: 100%; width: 105%; overflow-y: scroll; color: var(--text); font-size: 12px; line-height: 12px; text-transform: lowercase; text-align: justify; padding: 10px 10px 5px 5px; box-sizing: border-box;][border=0; height: 15%; width: 15%; font-size: 3em; text-align: center; padding: 0 10px 0 0; color: var(--main); text-transform: uppercase; float: left; line-height: 8px; font-style: italic; font-weight: bold; margin-top: -5px; margin-left: -5px;][comment] --VISAGE DESCRIPTION--[/comment] [font=Playfair Display]h[/font][/border]elp Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/border][/border][/border] [border=0; width: 100%; height: 26%; background: transparent; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 10px 0 0; box-sizing: content-box; align-items: center; justify-content: flex-start;] [comment]FACTS & TIDBITS--short answers only! ~10-15 letters[/comment] [comment]--copy this for two more tidbits--[/comment] [border=0; height: 100%; width: clamp(90%, 50%, 100%); padding: 0; line-height: 0; display: flex; flex-flow: row wrap; margin: auto;] [comment]--HEIGHT--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: left; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px; margin-top: -1px;]height[/border] here[/border] [comment]--WEIGHT--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: right; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px; margin-top: -1px;]weight[/border] here[/border] [/border] [comment]--copy this too--[/comment] [comment]--copy this for two more tidbits--[/comment] [border=0; height: 100%; width: clamp(90%, 50%, 100%); padding: 0; line-height: 0; display: flex; flex-flow: row wrap; margin: auto;] [comment]--HAIR--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: left; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px;]hair[/border] here[/border] [comment]--EYES--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: right; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px;]eyes[/border] here[/border] [/border] [comment]--copy this too--[/comment] [comment]--copy this for two more tidbits--[/comment] [border=0; height: 100%; width: clamp(90%, 50%, 100%); padding: 0; line-height: 0; display: flex; flex-flow: row wrap; margin: auto;] [comment]--SKIN--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: left; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px;]skin[/border] here[/border] [comment]--FACE CLAIM?--[/comment] [border=2px outset #bac5e2; height: 60%; width: 30.5%; float: right; margin: auto; padding: 0; color: var(--text); font-size: 10px; text-transform: lowercase; text-align: center; line-height: 5px; flex: 2 1 0;][border=1px solid #bac5e2; height: 27%; width: 99%; box-sizing: border-box; background: var(--main); line-height: 2px;]faceclaim[/border] here[/border] [/border] [comment]--copy this too--[/comment] [/border][/border] [/border] [comment]SCROLL NOTIF[/comment] [border=0; height: 90px; width: 50px; color: var(--main); font-size: 20px; position: absolute; bottom: 2%; margin-left: 20px;][fa]fas fa-arrow-circle-up[/fa][/border] [comment]TAB COVER[/comment] [border=0; height: 150px; width: 30px; clip-path: var(--p1); background: var(--main); position: absolute; top: 10%; pointer-events: none; color: var(--text); font-size: 15px; line-height: 25px; text-align: center; margin-left: -20px;] [fa]fas fa-chess-king[/fa] [SIZE=3][fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa][/SIZE][/border] [/tab] [tab=b.] [border=0; height: 68%; width: 66.5%; position: absolute; margin: auto; display: flex; line-height: 0; padding: 0; align-items: center; justify-content: center; margin-left: 20px; top: 15.5%;] [border=0; height: 5%; width: 245px; margin: auto; margin-top: 40px; overflow: hidden; padding: 0; line-height: 0; display: block;] [tabs][tab=a.] [comment]--A CUTE QUOTE OR SOMETHING HERE--can only be as long as this one!--[/comment] [border=4px double #bac5e2; height: 65%; width: 70%; background: var(--quotebg); position: absolute; pointer-events: none; background-size: cover; left: 12%; margin-top: -20px; padding: 5px; display: flex; justify-content: center; align-items: center; justify-content: center;][border=0; height: 100%; width: 100%; color: white; text-align: center; font-size: 12px; line-height: 1.1em; font-weight: bolder; text-transform: uppercase; padding: 0; flex: 1 4 0; margin: auto;] [border=0; height: 5px; width: 10px; color: white; font-weight: bolder; line-height: 5px; font-size: 2em;]❝[/border] THEY TOLD ME TO POUR MY HEART INTO EVERYTHING I DO. SO THAT’S WHAT I DID, I POURED AND POURED AND POURED. [CENTER]NOW THEY ASK ME WHY I’M SO [I]EMPTY[/I]. [/CENTER] [RIGHT][border=0; height: 5px; width: 10px; color: white; font-weight: bolder; float: right; line-height: 5px; font-size: 2em;]❞[/border][/RIGHT] [/border] [RIGHT][/RIGHT] [comment]TAB COVER[/comment] [border=2px solid white; height: 17px; width: 190px; background: white; color: var(--main); font-size: 17px; text-align: left; pointer-events: none; padding: 0 7px 0 9.5px; word-spacing: 3.5em; margin: auto; position: absolute; top: 0%; margin-left: -102px; left: 50%; margin-top: -31px; box-sizing: content-box;][fa]fas fa-star[/fa] [fa]fas fa-diamond[/fa] [fa]fas fa-diamond[/fa][/border] [/border] [/tab] [RIGHT][/RIGHT] [tab=b.] [comment]PERSONALITY TRAITS[/comment] [comment]--VIRTUES--[/comment] [border=3px double #bac5e2; height: 28%; width: 38%; position: absolute; left: 2%; margin-top: -20px; line-height: 0; border-radius: 5px; box-shadow: 1px 1px 4px #bebebe;][border=2px solid #d3d3d3; height: 100%; width: 100%; margin: auto; overflow: hidden; padding: 0; background: #bac5e2;][border=0; height: 100%; width: 121%; padding:0 10px 0 5px; line-height: 0; overflow-y: scroll; overflow-x: hidden; box-sizing: border-box; scroll-snap-type: y mandatory;] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; margin-top: 5px; padding: 5px 0 0 0;][font=Lora]VIRTUE:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/ˈvərCHo͞o/ - [I]noun[/I] 1. a quality considered morally good or desirable in a person 2. a good or useful quality of a thing 3. behavior showing high moral standards[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; margin-top: 5px; padding: 5px 0 0 0;][font=Lora]VIRTUE:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/ˈvərCHo͞o/ - [I]noun[/I] 1. a quality considered morally good or desirable in a person 2. a good or useful quality of a thing 3. behavior showing high moral standards[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; padding: 5px 0 0 0;][font=Lora]VIRTUE:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/ˈvərCHo͞o/ - [I]noun[/I] 1. a quality considered morally good or desirable in a person 2. a good or useful quality of a thing 3. behavior showing high moral standards[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [/border][/border][/border] [comment]--VICES--[/comment] [border=3px double #bac5e2; height: 28%; width: 38%; position: absolute; left: 2%; top: 60%; line-height: 0; border-radius: 5px; box-shadow: 1px 1px 4px #bebebe;][border=2px solid #d3d3d3; height: 100%; width: 100%; background: var(--main); margin: auto; overflow: hidden; padding: 0;][border=0; height: 100%; width: 121%; padding: 0 10px 0 5px; line-height: 0; overflow-y: scroll; overflow-x: hidden; box-sizing: border-box; scroll-snap-type: y mandatory;] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; padding: 5px 0 0 0;][font=Lora]vice:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/vīs/ - [I]noun[/I] 1. immoral or wicked behavior 2. an immoral or wicked personal characteristic 3. a weakness of character or behavior; a bad habit[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; padding: 5px 0 0 0;][font=Lora]vice:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/vīs/ - [I]noun[/I] 1. immoral or wicked behavior 2. an immoral or wicked personal characteristic 3. a weakness of character or behavior; a bad habit[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [comment]~~copy and paste this for more traits~~[/comment] [border=0; height: 100%; width: 90%; margin: auto; padding: 0; line-height: 0; scroll-snap-align: start;][border=0; height: 10%; width: 100%; text-align: center; font-size: 15px; color: var(--text); font-weight: bold; text-transform: lowercase; padding: 5px 0 0 0;][font=Lora]vice:[/font][/border][border=0; height: 80%; width: 100%; font-size: 12px; color: var(--text); line-height: 15px; text-align: justify; overflow: hidden; padding: 0 10px 0 0; box-sizing: border-box;][border=0; height: 100%; width: 105%; overflow-y: scroll; overflow-x: hidden; padding: 0 18px 15px 0; box-sizing: content-box;][font=Lora]/vīs/ - [I]noun[/I] 1. immoral or wicked behavior 2. an immoral or wicked personal characteristic 3. a weakness of character or behavior; a bad habit[/font] [/border][/border][/border] [comment]~~copy this too~~[/comment] [/border][/border] [/border] [border=0; height: 75%; width: 49%; position: absolute; right: 1%; line-height: 0; padding: 0; display: flex; overflow: hidden; margin-top: -20px; box-sizing: border-box;] [comment]--PERSONA DESCRIPTION--[/comment] [border=4px double #bac5e2; height: 100%; width: 90%; padding: 0; line-height: 0; box-sizing: border-box; margin-left: 2.5px; overflow: hidden;][border=0; height: 100%; width: 110%; overflow-y: scroll; padding: 2px 10px 2px 4px; color: var(--text); line-height: 12px; font-size: 12px; text-align: justify; text-transform: lowercase; box-sizing: border-box;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/border][/border][/border] [comment]TAB TITLE[/comment] [border=4px double #bac5e2; height: 17px; width: 190px; background: white; color: var(--main); font-size: 17px; text-align: center; pointer-events: none; padding: 0 7px 0 9.5px; line-height: 1rem; margin: auto; position: absolute; top: 11%; margin-left: -107px; left: 50%; margin-top: -25px; box-sizing: content-box; text-transform: uppercase; font-weight: bold; letter-spacing: 3px;][font=Playfair Display]persona[/font][/border] [comment]TAB COVER[/comment] [border=2px solid white; height: 17px; width: 190px; background: white; color: var(--main); font-size: 17px; text-align: left; pointer-events: none; padding: 0 7px 0 9.5px; word-spacing: 3.5em; margin: auto; position: absolute; top: 11.8%; margin-left: -105px; left: 50%; box-sizing: content-box;][fa]fas fa-diamond[/fa] [fa]fas fa-star[/fa] [fa]fas fa-diamond[/fa][/border] [/tab] [tab=c.] [comment]GALLERY[/comment] [border=0; height: 72%; width: 90%; line-height: 0; padding: 3px 3px 0 3px; box-sizing: border-box; position: absolute; left: 5%; margin-top: -22px;][border=4px double #bac5e2; height: 98.5%; width: 7%; text-transform: uppercase; color: var(--main); font-size: 1.8em; font-weight: bold; text-align: center; line-height: 30px; padding: 5px 5px 0 0; float: left; margin-left: -8px;][font=Lora]gallery[/font][/border][border=0; height: 100%; width: 89%; line-height: 0; padding: 0; float: right;][border=0; height: 100%; width: 75%; padding: 0; float: left;][border=0; height: 50%; width: 100%; padding: 0 5px 0 0; box-sizing: border-box;] [border=2px solid #bac5e2; height: 100%; width: 47%; padding: 0; float: left; background: var(--pic1); margin-left: -3px; background-size: cover;][/border] [border=2px solid #bac5e2; height: 100%; width: 47%; padding: 0; float: right; background: var(--pic2); background-size: cover;][/border][/border] [border=0; height: 50%; width: 100%; padding: 0 5px 0 0; box-sizing: border-box;][border=2px solid #bac5e2; height: 100%; width: 47%; padding: 0; float: left; margin-top: 2.3px; margin-left: -3px; background: var(--pic3); background-size: cover;][/border] [border=2px solid #bac5e2; height: 100%; width: 47%; padding: 0; float: right; margin-top: 2.3px; background: var(--pic4); background-size: cover;][/border][/border][/border] [border=0; height: 71.5%; width: 18%; padding: 0; float: left; line-height: 2px;][border=2px solid #bac5e2; height: 33%; width: 100%; margin-left: 2px; background: var(--pic5); background-size: cover;][/border] [border=2px solid #bac5e2; height: 33%; width: 100%; margin-left: 2px; background: var(--pic6); background-size: cover;][/border] [border=2px solid #bac5e2; height: 33%; width: 100%; margin-left: 2px; background: var(--pic7); background-size: cover;][/border][/border][/border][/border] [comment]TAB COVER[/comment] [border=2px solid white; height: 17px; width: 190px; background: white; color: var(--main); font-size: 17px; text-align: left; pointer-events: none; padding: 0 7px 0 9.5px; word-spacing: 3.5em; margin: auto; position: absolute; top: 11.8%; margin-left: -105px; left: 50%; box-sizing: content-box;][fa]fas fa-diamond[/fa] [fa]fas fa-diamond[/fa] [fa]fas fa-star[/fa][/border] [/tab] [/tabs] [/border] [/border] [comment]TAB COVER[/comment] [border=0; height: 150px; width: 30px; clip-path: var(--p1); background: var(--main); position: absolute; top: 10%; pointer-events: none; color: var(--text); font-size: 15px; line-height: 25px; text-align: center; margin-left: -20px;] [SIZE=3][fa]fas fa-heart[/fa][/SIZE] [fa]fas fa-chess-king[/fa] [SIZE=3][fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa][/SIZE][/border] [/tab] [tab=c.] [border=0; height: 68.4%; width: 66.5%; position: absolute; top: 15.5%; left: 16.8%; line-height: 0; padding: 0; display: flex; justify-content: center; align-items: center; overflow: hidden;][border=4px double #bac5e2; height: 90%; width: 95%; padding: 0; overflow: hidden;] [border=0; width: 105%; height: 100%; padding: 0; margin: auto; overflow-x: hidden; overflow-y: scroll; box-sizing: border-box; scroll-snap-type: y mandatory;] [comment]SECTION HEADER--copy for another biography section[/comment] [border=1px solid #D3D3D3; height: 30%; width: 20%; padding: 5px; float: left; box-sizing: content-box; display: flex; justify-content: center; scroll-snap-align: start;][border=1px solid #d3d3d3; height: 75%; width: 90%; margin: auto; background: var(--history1); background-size: cover; text-align: center; color: var(--main); font-size: 2em; line-height: calc(1em + 14px); font-style: italic; text-transform: uppercase; text-shadow: 1px 1px 1px black;][font=Playfair Display]T[comment]FIRST LETTER OF TITLE[/comment][/font][/border][/border][border=0; height: 30%; width: clamp(60%, 70%, 76%); float: left; color: var(--sub); font-size: 1.5em; line-height: 22px; font-style: italic; text-transform: uppercase; padding: 10px 0 0 0; text-shadow: 1px 1px 1px black;][comment]REST OF THE TITLE GOES HERE[/comment] [font=Playfair Display]itle[/font][comment] SECTION SUBTITLE [/comment][border=0; height: 10%; width: 100%; line-height: 0; padding: 0 0 10px 0; font-size: 12px; box-sizing: border-box; margin-top: 5px; color: var(--sub);]—childhood[/border][/border][border=0; height: 55%; width: 100%; padding: 0; line-height: 0; float: left; overflow: hidden;][border=0; height: 100%; width: 103%; padding: 5px 20px 5px 5px; line-height: 15px; overflow-y: scroll; overflow-x: hidden; color: black; font-size: 12px; text-align: justify; box-sizing: border-box; border-top: 2px solid #bac5e2;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. [/border][/border] [comment]--end of copying--[/comment] [comment]SECTION HEADER--copy for another biography section[/comment] [border=1px solid #D3D3D3; height: 30%; width: 20%; padding: 5px; float: left; box-sizing: content-box; display: flex; justify-content: center; scroll-snap-align: start;][border=1px solid #d3d3d3; height: 75%; width: 90%; margin: auto; background: var(--history2); background-size: cover; text-align: center; color: var(--main); font-size: 2em; line-height: calc(1em + 14px); font-style: italic; text-transform: uppercase; text-shadow: 1px 1px 1px black;][font=Playfair Display]t[comment]FIRST LETTER OF TITLE[/comment][/font][/border][/border][border=0; height: 30%; width: clamp(60%, 70%, 76%); float: left; color: var(--sub); font-size: 1.5em; line-height: 22px; font-style: italic; text-transform: uppercase; padding: 10px 0 0 0; text-shadow: 1px 1px 1px black;][comment]REST OF THE TITLE GOES HERE[/comment] [font=Playfair Display]itle[/font][comment] SECTION SUBTITLE [/comment][border=0; height: 10%; width: 100%; line-height: 0; padding: 0 0 10px 0; font-size: 12px; box-sizing: border-box; margin-top: 5px; color: var(--sub);]—childhood[/border][/border][border=0; height: 55%; width: 100%; padding: 0; line-height: 0; float: left; overflow: hidden;][border=0; height: 100%; width: 103%; padding: 5px 20px 5px 5px; line-height: 15px; overflow-y: scroll; overflow-x: hidden; color: black; font-size: 12px; text-align: justify; box-sizing: border-box; border-top: 2px solid #bac5e2;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. [/border][/border] [comment]--end of copying--[/comment] [border=2px solid transparent; height: 10%; width: 100%; padding: 0; line-height: 0; float: left;][/border][/border] [border=0; height: 8%; width: 95%; padding: 0; position: absolute; margin: auto; margin-left: 0; bottom: 5%; border-top: 2px solid #bac5e2; text-align: center; font-size: 1rem; color: var(--main); text-transform: uppercase; line-height: 20px; font-weight: bold; letter-spacing: 3px; overflow: hidden; background: white;][font=Playfair Display]BIOGRAPHY[/font][/border] [/border] [/border] [comment]TAB COVER[/comment] [border=0; height: 150px; width: 30px; clip-path: var(--p1); background: var(--main); position: absolute; top: 10%; pointer-events: none; color: var(--text); font-size: 15px; line-height: 25px; text-align: center; margin-left: -20px;] [SIZE=3][fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa][/SIZE] [fa]fas fa-chess-king[/fa] [SIZE=3][fa]fas fa-heart[/fa][/SIZE][/border] [/tab] [tab=d.] [comment]TAB COVER[/comment] [border=0; height: 150px; width: 30px; clip-path: var(--p1); background: var(--main); position: absolute; top: 10%; pointer-events: none; color: var(--text); font-size: 15px; line-height: 25px; text-align: center; margin-left: -20px;] [SIZE=3][fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa] [fa]fas fa-heart[/fa][/SIZE] [fa]fas fa-chess-king[/fa][/border] [comment]MISCELLANEOUS INFO[/comment] [border=0; height: 30px; width: 30%; padding: 0 5px 0 0; line-height: calc(2rem + 15px); position: absolute; top: 17%; left: 17.8%; border-radius: 0px 0px 20px 0; background: var(--extra); font-size: clamp(1.5rem, 1.9rem, 2rem); text-transform: uppercase; text-align: right; color: var(--main); text-shadow: 1px 1px 1px black; font-style: oblique; letter-spacing: 3px; display: flex;][font=Playfair Display]extra[/font][/border] [border=4px double #bac5e2; width: 28%; height: 52%; padding: 0; position: absolute; top: 26.5%; left: 19%; overflow: hidden; line-height: 0;] [border=1px solid #bac5e2; width: 112%; height: 100%; padding: 0; overflow-y: scroll; overflow-x: hidden; box-sizing: border-box;] [comment]INFO TITLE--copy from here for another piece of info--[/comment] [border=0; height: 30px; width: 100%; padding: 0; color: var(--main); font-size: 18px; line-height: 10px; font-style: normal; margin-left: 1px; border-bottom: 1px solid #bac5e2; text-transform: uppercase; font-weight: bold; text-align: center; letter-spacing: 1px; display: flex-block;] [font=Lora]fear[/font] [/border] [border=0; height: auto; width: 100%; padding: 0; line-height: 0;][border=1px solid #bac5e2; height: 100%; width: 100%; color: var(--text); line-height: 12px; font-size: 12px; text-transform: lowercase; text-align: justify; padding: 2px 10px 0 1px; box-sizing: border-box;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/border][/border] [comment]--copy to here for another section--[/comment] [comment]INFO TITLE--copy from here for another piece of info--[/comment] [border=0; height: 30px; width: 100%; padding: 0; color: var(--main); font-size: 18px; line-height: 10px; font-style: normal; margin-left: 1px; border-bottom: 1px solid #bac5e2; text-transform: uppercase; font-weight: bold; text-align: center; letter-spacing: 1px; display: flex-block;] [font=Lora]like[/font] [/border] [border=0; height: auto; width: 100%; padding: 0; line-height: 0;][border=1px solid #bac5e2; height: 100%; width: 100%; color: var(--text); line-height: 12px; font-size: 12px; text-transform: lowercase; text-align: justify; padding: 2px 10px 0 1px; box-sizing: border-box;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et [/border][/border] [comment]--copy to here for another section--[/comment] [comment]INFO TITLE--copy from here for another piece of info--[/comment] [border=0; height: 30px; width: 100%; padding: 0; color: var(--main); font-size: 18px; line-height: 10px; font-style: normal; margin-left: 1px; border-bottom: 1px solid #bac5e2; text-transform: uppercase; font-weight: bold; text-align: center; letter-spacing: 1px; display: flex-block;] [font=Lora]dislike[/font] [/border] [border=0; height: auto; width: 100%; padding: 0; line-height: 0;][border=1px solid #bac5e2; height: 100%; width: 100%; color: var(--text); line-height: 12px; font-size: 12px; text-transform: lowercase; text-align: justify; padding: 2px 10px 0 1px; box-sizing: border-box;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem[/border][/border] [comment]--copy to here for another section--[/comment] [comment]INFO TITLE--copy from here for another piece of info--[/comment] [border=0; height: 30px; width: 100%; padding: 0; color: var(--main); font-size: 18px; line-height: 10px; font-style: normal; margin-left: 1px; border-bottom: 1px solid #bac5e2; text-transform: uppercase; font-weight: bold; text-align: center; letter-spacing: 1px; display: flex-block;] [font=Lora]rep.[/font] [/border] [border=0; height: auto; width: 100%; padding: 0; line-height: 0;][border=1px solid #bac5e2; height: 100%; width: 100%; color: var(--text); line-height: 12px; font-size: 12px; text-transform: lowercase; text-align: justify; padding: 2px 10px 0 1px; box-sizing: border-box;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem[/border][/border] [comment]--copy to here for another section--[/comment] [/border] [/border] [comment]RELATIONSHIPS[/comment] [border=0; height: 30px; width: 30%; padding: 0 5px 0 5px; line-height: 5px; position: absolute; bottom: 20%; right: 17.8%; border-radius: 20px 0px 0px 0; background: var(--extra2); font-size: clamp(1.5rem, 1.9rem, 2rem); text-transform: uppercase; text-align: left; color: var(--main); text-shadow: 1px 1px 1px black; font-style: oblique; letter-spacing: 3px; display: flex;][font=Playfair Display]bonds[/font][/border] [border=4px double #bac5e2; width: 28%; height: 52%; padding: 0; position: absolute; top: 17.5%; right: 19%; overflow: hidden;][border=0; height: 100%; width: 110%; overflow-y: scroll; overflow-x: hidden; padding: 0; line-height: 12px; scroll-snap-type: y mandatory;][comment]--copy for another relationship--[/comment][border=0; height: 100%; width: 100%; padding: 0; line-height: 0; scroll-snap-align: start;] [comment]RELATIONSHIP NAME/BASIC INFO[/comment] [border=0; height: auto; width: 100%; padding: 0;][border=0; height: 100%; width: 100%; padding: 0;] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]name[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]age[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]relation[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]gender[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]status[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]status[/font][/border] [comment]--copy to here!--[/comment] [/border][/border] [comment]DESCRIPTION OF RELATIONSHIP[/comment] [border=0; height: 68%; width: 100%; padding: 0; overflow: hidden; border-top: 1px solid #bac5e2;][border=0; height: 100%; width: 105%; overflow-y: scroll; line-height: 12px; font-size: 12px; color: var(--text); text-transform: lowercase; padding: 2px 20px 2px 0px; box-sizing: border-box; text-align: justify;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/border][/border] [/border] [comment]--copy to here for new relationship--[/comment] [comment]--copy for another relationship--[/comment][border=0; height: 100%; width: 100%; padding: 0; line-height: 0; scroll-snap-align: start;] [comment]RELATIONSHIP NAME/BASIC INFO[/comment] [border=0; height: auto; width: 100%; padding: 0;][border=0; height: 100%; width: 100%; padding: 0;] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]name[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]age[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]relation[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]gender[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]status[/font][/border] [comment]--copy to here!--[/comment] [comment]--copy for another box of info!--[/comment] [border=2px outset #fff; height: auto; width: fit-content; padding: 3px 5px; line-height: 10px; text-transform: uppercase; color: #fff; background: var(--main); font-size: 14px; float: left; margin: 2px;][font=Lora]status[/font][/border] [comment]--copy to here!--[/comment] [/border][/border] [comment]DESCRIPTION OF RELATIONSHIP[/comment] [border=0; height: 68%; width: 100%; padding: 0; overflow: hidden; border-top: 1px solid #bac5e2;][border=0; height: 100%; width: 105%; overflow-y: scroll; line-height: 12px; font-size: 12px; color: var(--text); text-transform: lowercase; padding: 2px 20px 2px 0px; box-sizing: border-box; text-align: justify;]Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/border][/border] [/border] [comment]--copy to here for new relationship--[/comment] [/border][/border] [/tab][/tabs][/border][/border][/border][/border] [border=0; height: 30px; width: 100px; color: #d4d4d4; font-size: 10px; margin: auto; margin-top: -30px;]coded by xayah.ღ[/border]