• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource This and That — ✧ stellar's workshop (closed)

Stellar Nursery

in the meantime
[class=container] height: 400px; width: 600px; margin: auto; display: flex; flex-flow: row; [/class] [class=picture] height: 180px; width: 180px; background: url(https://vignette.wikia.nocookie.net/moomin/images/1/14/39dcc7913da941ee3006c6d8b673e10d.jpg/revision/latest?cb=20180402230100); background-size: cover; background-position: 50% 60%; border-radius: 200px; align-self: center; margin-top: 25px; [/class] [class=divider] height: 360px; width: 2px; background: #DBCDEF; margin-top: 20px; margin-left: 70px; [/class] [class=wrapper] display: flex; flex-flow: column; [/class] [class=header] line-height:20px; margin-top:40px; [/class] [class=box] height: 400px; width: 340px; margin-left: 10px; padding-top: 25px; padding-bottom: 25px; padding-left: 10px; padding-right: 10px; [/class] [div class=container] [div class=wrapper] [div class=header]
THIS
and
THAT

[/div] [div class=picture][/div] [/div] [div class=divider][/div] [div class=box] hello everyone! stellar here. welcome to my workshop. i've been teaching myself bbcode for a couple of months now and i thought it was time to put some of my codes out into the world.

i tend to spend 500 years tweaking one code so posts will probably be infrequent.

my codes are definitely not mobile friendly. in the future i might work on that though.

constructive criticism is always welcome! praise is also welcome! if you compliment me i will probably love you forever.
[/div] [/div]
 
[class=container2] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=pic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 50px; [/class] [class=box2] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=scroll2] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=container2] [div class=pic][/div] [div class=divider][/div] [div class=box2][div class=scroll2] > the pink bars are tabs
> scrolls
> if you notice any problems, please tell me!
i tried to p much bully the elements into position, but it all backfired in my face so i had to re-position everything using flexbox (´;ω;`)
half the time i spent on this was trying to decide on the font for the headers but in the end i just decided this was good enough lol
[/div][/div] [/div] [class=container] height: 600px; width: 1100px; background: #F5F2F3; display: flex; flex-flow: column wrap; overflow: hidden; margin:auto; [/class] [class=credit] margin-left: 1000px; font-size: 10px; height: 20px; width: 200px; [/class] [class=wrapper] display: flex; flex-flow: row; [/class] [class=piccontainer] height: 600px; width: 450px; background: url(https://i.pinimg.com/564x/a5/d6/6e/a5d66ef9fed652226e4f54ea96357e38.jpg) no-repeat; background-size: cover; background-position: 0% 80%; clip-path: polygon(76% 0, 99% 100%, 1% 100%, 0% 0%); [/class] [class=tabscontainer] height: 600px; width: 15px; background: #F1A5B0; transform: skew(10deg); margin-left: -55px; [/class] [class name=tab] height: calc(100% / 3); width: 100%; background: #F1A5B0; border-bottom: 1px solid #F5F2F3; [/class] [class name=tab state=hover] background: #516BBF; transition: 0.5s; cursor: pointer; [/class] [class name=tabclick] background: #516BBF; transition: 0.5s; [/class] [class name=header] height: 50px; font-size: 80px; font-weight: 700; color: #516BBF; [/class] [class name=textbox] height: 590px; width: 720px; overflow-y: scroll; padding-right: 17px; margin-left: 40px; [/class] [class name=scroll] height: 90px; width: 450px; overflow-y: scroll; padding-right: 15px; padding-top: 5px; padding-left: 5px; [/class] [class name=box] width: 600px; background: rgb(255, 255, 255, 0.7); border: 1px solid #D2CFD0; margin-top: 15px; padding: 10px; display: block; [/class] [class name=relbox] height: 100px; background: rgb(255, 255, 255, 0.7); border: 1px solid #D2CFD0; border-radius: 0px 20px 20px 20px; margin-top: 80px; margin-left:10px; width: 450px; overflow: hidden; [/class] [script class=container] hide basicstext hide historytext hide relationshipstext [/script] [script class=basics on=click] addClass tabclick removeClass tabclick personality removeClass tabclick history removeClass tabclick relationships fadeIn 500 basicstext fadeOut 500 historytext fadeOut 500 relationshipstext [/script] [script class=history on=click] addClass tabclick removeClass tabclick basics removeClass tabclick relationships fadeOut 500 basicstext fadeIn 500 historytext fadeOut 500 relationshipstext [/script] [script class=relationships on=click] addClass tabclick removeClass tabclick basics removeClass tabclick history fadeOut 500 basicstext fadeOut 500 historytext fadeIn 500 relationshipstext [/script] [class name=basics] height: 100%; width: 100%; [/class] [class name=history] height: 100%; width: 100%; [/class] [class name=relationships] height: 100%; width: 100%; [/class] [class name=basicstext] height: 100%; width: 100%; [/class] [class name=historytext][/class] [class name=relationshipstext][/class] [div class=credit]code by Stellar Nursery Stellar Nursery [/div] [div class=container] [div class=wrapper] [div class=piccontainer][/div] [div class=tabscontainer] [div class=tab] [div class=basics] [/div] [/div] [div class=tab] [div class=history][/div] [/div] [div class=tab] [div class=relationships][/div] [/div] [/div] [/div] [div class=basicstext] [div class=textbox] [div class=header]Na Jae-min[/div]

[div class=box] 18 | male | august 13th | korean [/div] [div class=box] 177cm | 5'10 | 60kg | 132lbs | pink hair | brown eyes [/div] [div class=box] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div] [/div] [/div] [div class=historytext] [div class=textbox] [div class=header]Personality[/div]

[div class=box] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div] [div class=box]
likes
blaslmdslf
dislikes
bandsdflkf
[/div] [div class=box]misc[/div]
[/div][/div] [div class=relationshipstext] [div class=textbox] [div class=header]Relationships[/div]

Lee Je-no
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div]
Lee Mark
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div]
Lee Dong-hyuck
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div]
Huang Renjun
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div]
Zhong Chenle
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div]
Ji-sung Pwark
[div class=wrapper]
[div class=relbox] [div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Elementum sagittis vitae et leo. Scelerisque felis imperdiet proin fermentum leo vel orci. Purus sit amet volutpat consequat mauris nunc. Mus mauris vitae ultricies leo integer. A lacus vestibulum sed arcu non odio euismod lacinia at. Diam ut venenatis tellus in. Diam maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra.[/div] [/div] [/div] [/div] [/div] [/div]
 
Last edited:
[class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=pic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=box] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=pic][/div] [div class=divider][/div] [div class=box][div class=comscroll] > scrolls
> code
just a little code that's been sitting around in my workshop for a while. i thought i might as well let it out into the world. i hope you like it!
[/div][/div] [/div]

[class=container] height: 450px; width: 900px; background: url(https://static.vecteezy.com/system/resources/previews/000/125/950/original/vector-wood-texture.jpg); margin: auto; display: flex; flex-flow: column; [/class] [class=overlay] height: 100%; width: 100%; display: flex; flex-flow: column; background: rgb(193,154,107,0.8); [/class] [class=textcontainer] height: 372px; width: 729px; background: white; margin-top: 40px; margin-left: 10px; overflow: hidden; [/class] [class=wrapper] display: flex; flex-flow: row; [/class] [class=wrapperc] display: flex; flex-flow: column; [/class] [class=boxes] height: 20px; width: 20px; background: white; margin-left: 15px; margin-top: 10px; [/class] [class=basics] width: 138px; height: 371.64px; background: #FFD1DC; border-right: 2px solid #C19A6B; [/class] [class=profilepic] height: 100px; width: 102px; background: url(https://66.media.tumblr.com/c8f8f16d29b4c85e8639c07e80432c0c/tumblr_pl8q2n4RQ91wwe1ie_1280.jpg); background-size: contain; position: relative; top: 40px; margin-left: 20.75px; border: 2px solid #FFCEDA; overflow: hidden; [/class] [class=basicbox] height: 256px; width: 105px; background: white; margin-top: 52px; margin-left: 20.75px; [/class] [class=basictext] margin-top: 5px; [/class] [class=scroll] height: 99%; width: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class=righttext] height: 372px; width: 742px; background: white; display: flex; margin-top: 40px; margin-left: 15px; flex-flow: column; overflow: hidden; [/class] [class=header] color: #F88BA6; font-size: 33px; font-weight: 700; margin-left: 10px; margin-top: 0px; [/class] [class=ptext] height: 138px; width: 711px; margin-left: 10px; margin-top: 0px; font-size: 13px; overflow: hidden; [/class] [class=ldtext] height: 34px; width: 258px; margin-left: 10px; font-size: 13px; overflow: hidden; margin-top: -5px; [/class] [class=pic2] height: 70px; width: 70px; background: url(https://i-h1.pinimg.com/564x/4a/c6/47/4ac647863c374eee0d81c66916430beb.jpg); background-size: contain; margin-left: 20px; margin-top: 30px; border: 1px solid #ffd1dc; [/class] [div class=container] [div class=overlay] [div class=wrapper] [div class=wrapperc] [div class=profilepic][/div] [div class=basicbox] [div class=basictext]
Kim Jungwoo

20
male
february 19th
pisces
180cm
58kg
[/div] [/div] [/div] [div class=righttext] [div class=wrapperc] [div class=scroll] [div class=header]Personality[/div] [div class=ptext] [div class=scroll] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum. Pellentesque id nibh tortor id aliquet lectus proin nibh. Neque volutpat ac tincidunt vitae semper quis lectus. Morbi quis commodo odio aenean sed adipiscing diam donec. Purus sit amet volutpat consequat. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Quisque egestas diam in arcu cursus euismod. Tempus urna et pharetra pharetra. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Fermentum et sollicitudin ac orci phasellus egestas tellus. Sit amet tellus cras adipiscing enim eu. Posuere urna nec tincidunt praesent semper. Vitae congue eu consequat ac felis donec. Et malesuada fames ac turpis egestas sed tempus urna. Sit amet porttitor eget dolor morbi non. Tellus integer feugiat scelerisque varius. Viverra tellus in hac habitasse platea. Sed risus ultricies tristique nulla aliquet enim. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Faucibus interdum posuere lorem ipsum dolor sit. Pulvinar sapien et ligula ullamcorper malesuada. Faucibus et molestie ac feugiat sed lectus vestibulum. Orci a scelerisque purus semper eget. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Semper feugiat nibh sed pulvinar proin. Morbi tempus iaculis urna id. Sit amet mauris commodo quis imperdiet. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Orci dapibus ultrices in iaculis nunc sed augue. Massa enim nec dui nunc mattis. Elementum nisi quis eleifend quam adipiscing. Malesuada fames ac turpis egestas. Ligula ullamcorper malesuada proin libero nunc. Elit ullamcorper dignissim cras tincidunt. Amet porttitor eget dolor morbi non arcu. Risus at ultrices mi tempus imperdiet. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Leo vel orci porta non pulvinar. Tortor dignissim convallis aenean et. Et netus et malesuada fames ac. Nisl tincidunt eget nullam non nisi est sit amet. Amet tellus cras adipiscing enim eu turpis egestas. Lectus magna fringilla urna porttitor. Massa sed elementum tempus egestas sed sed risus.[/div][/div] [div class=wrapper] [div class=wrapperc] [div class=header]Likes[/div] [div class=ldtext][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum. Pellentesque id nibh tortor id aliquet lectus proin nibh.[/div][/div] [/div]
[div class=header]Dislikes
[div class=ldtext][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum. Pellentesque id nibh tortor id aliquet lectus proin nibh.[/div][/div] [/div][/div] [div class=wrapper]
[div class=pic2][/div][div class=pic2][/div][div class=pic2][/div][div class=pic2][/div][div class=pic2][/div][div class=pic2][/div][div class=pic2][/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div]
 
[class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=pic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=box] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=pic][/div] [div class=divider][/div] [div class=box][div class=comscroll] > each 'section' of the image is a tab
> as usual, everything scrolls
> code
why does eunwoo have to be so damn cute. i love my boy :c stan astro kids.
[/div][/div] [/div]
[class=container] height: 395px; width: 800px; margin: auto; background: rgb(192, 216, 103); display: flex; flex-flow: row; border: 2px solid #a3c132 ; [/class] [class=wrapper] display: flex; flex-flow: column; [/class] [class name=tabbox] height: 30px; width: 290px; background: rgb(217,232,164,0.9); color: #699DA7; margin-left: 30px; margin-top: 20px; text-align: center; font-size: 20px; font-weight: 700; [/class] [class=tab1] height: 100%; width: 100%; [/class] [class=tab2] height: 100%; width: 100%; [/class] [class=tab3] height: 100%; width: 100%; [/class] [class=tab4] height: 100%; width: 100%; [/class] [class=tab5] height: 100%; width: 100%; [/class] [class name=pic1] height: 70px; width: 350px; margin-top: 20px; margin-left: 20px; background: url(https://66.media.tumblr.com/83db8f5c707e727f1bfb921cd915317f/tumblr_ozoov4drGE1vzj2y5o1_400.png); background-position: 0px 0px; border-top: 5px solid #699DA7; border-left: 5px solid #699DA7; border-right: 5px solid #699DA7; box-sizing: border-box; [/class] [class name=pic1 state=hover] filter: none; transition: 0.5s; cursor: pointer; [/class] [class name=pic2] height: 70px; width: 350px; margin-top: 1px; margin-left: 20px; background: url(https://66.media.tumblr.com/83db8f5c707e727f1bfb921cd915317f/tumblr_ozoov4drGE1vzj2y5o1_400.png); background-position: 0% 23%; border-left: 5px solid #699DA7; border-right: 5px solid #699DA7; box-sizing: border-box; [/class] [class name=pic2 state=hover] filter: none; transition: 0.5s; cursor: pointer; [/class] [class name=pic3] height: 70px; width: 350px; margin-top: 1px; margin-left: 20px; background: url(https://66.media.tumblr.com/83db8f5c707e727f1bfb921cd915317f/tumblr_ozoov4drGE1vzj2y5o1_400.png); background-position: 0% 48%; border-left: 5px solid #699DA7; border-right: 5px solid #699DA7; box-sizing: border-box; [/class] [class name=pic3 state=hover] filter: none; transition: 0.5s; cursor: pointer; [/class] [class name=pic4] height: 70px; width: 350px; margin-top: 1px; margin-left: 20px; background: url(https://66.media.tumblr.com/83db8f5c707e727f1bfb921cd915317f/tumblr_ozoov4drGE1vzj2y5o1_400.png); background-position: 0% 73%; border-left: 5px solid #699DA7; border-right: 5px solid #699DA7; box-sizing: border-box; [/class] [class name=pic4 state=hover] filter: none; transition: 0.5s; cursor: pointer; [/class] [class name=pic5] height: 70px; width: 350px; margin-top: 1px; margin-left: 20px; background: url(https://66.media.tumblr.com/83db8f5c707e727f1bfb921cd915317f/tumblr_ozoov4drGE1vzj2y5o1_400.png); background-position: 0% 95%; border-left: 5px solid #699DA7; border-right: 5px solid #699DA7; border-bottom: 5px solid #699DA7; box-sizing: border-box; [/class] [class name=pic5 state=hover] filter: none; transition: 0.5s; cursor: pointer; [/class] [class name=header] width: 390px; margin-top: 5px; margin-left: 20px; font-size: 45px; text-align: center; box-sizing: border-box; color: #003D03; [/class] [class name=textbox] height: 299px; width: 420px; margin-left: 20px; overflow: hidden; border: 1px solid black; [/class] [class=scroll] height: 97%; width: 100%; padding-left: 10px; padding-top: 10px; padding-right: 17px; overflow-y: scroll; [/class] [class=btext] height: 299px; width: 420px; overflow: hidden; margin-left: 5px; font-size: 1em; [/class] [class=ptext] height: 299px; width: 420px; margin-left: 5px; overflow: hidden; font-size: 0.9em; [/class] [class=htext] height: 299px; width: 420px; margin-left: 5px; overflow: hidden; font-size: 0.9em; [/class] [class=rtext] height: 299px; width: 420px; margin-left: 5px; overflow: hidden; font-size: 0.9em; [/class] [class=gtext] height: 299px; width: 420px; margin-left: 5px; overflow: hidden; [/class] [class name=sample] display: inline; [/class] [class name=sample state=hover] cursor: pointer; color: white; transition: 0.5s; [/class] [class=sampletext] display: inline; [/class] [class=quote] width: 95%; position: relative; top: 30px; left: 7px; background: #699DA7; color: #002302; border-radius: 10px; padding: 5px; text-align: center; [/class] [script class=container] hide tab1 hide tab2 hide tab3 hide tab4 hide tab5 hide btext hide ptext hide htext hide rtext hide gtext [/script] [script class=pic1 on=click] fadeIn 300 tab1 fadeOut 300 tab2 fadeOut 300 tab3 fadeOut 300 tab4 fadeOut 300 tab5 fadeIn 500 btext hide ptext hide htext hide rtext hide gtext [/script] [script class=pic2 on=click] fadeOut 300 tab1 fadeIn 300 tab2 fadeOut 300 tab3 fadeOut 300 tab4 fadeOut 300 tab5 hide btext fadeIn 500 ptext hide htext hide rtext hide gtext [/script] [script class=pic3 on=click] fadeOut 300 tab1 fadeOut 300 tab2 fadeIn 300 tab3 fadeOut 300 tab4 fadeOut 300 tab5 hide btext hide ptext fadeIn 500 htext hide rtext hide gtext [/script] [script class=pic4 on=click] fadeOut 300 tab1 fadeOut 300 tab2 fadeOut 300 tab3 fadeIn 300 tab4 fadeOut 300 tab5 hide btext hide ptext hide htext fadeIn 500 rtext hide gtext [/script] [script class=pic5 on=click] fadeOut 300 tab1 fadeOut 300 tab2 fadeOut 300 tab3 fadeOut 300 tab4 fadeIn 300 tab5 hide btext hide ptext hide htext hide rtext fadeIn 500 gtext [/script] [div class=container] [div class=wrapper] [div class=pic1] [div class=tab1] [div class=tabbox]Basics[/div] [/div] [/div] [div class=pic2] [div class=tab2] [div class=tabbox]Personality[/div] [/div] [/div] [div class=pic3] [div class=tab3] [div class=tabbox]History[/div] [/div] [/div] [div class=pic4] [div class=tab4] [div class=tabbox]Writing Sample[/div] [/div] [/div] [div class=pic5] [div class=tab5] [div class=tabbox]Gallery[/div] [/div] [/div] [/div] [div class=wrapper] [div class=header]Cha Eun-woo[/div] [div class=btext] [div class=scroll]
name Cha Eun-woo
age 21
ethnicity south korean
height 183cm / 6ft
eye colour dark brown
gender male
birthday march 30th
occupation idol
weight 64kg
hair colour black
[div class=quote]"Just because two people are good friends doesn't mean they'd make a good couple, honey."[/div] [/div] [/div] [div class=ptext] [div class=scroll] likes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

dislikes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

charms
something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

neutral traits
something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

flaws
something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

something
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis vel eros donec ac odio tempor orci dapibus. Placerat in egestas erat imperdiet sed euismod. Cursus in hac habitasse platea dictumst quisque sagittis purus.

[/div] [/div] [div class=htext] [div class=scroll] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas sed enim ut sem viverra aliquet. Metus vulputate eu scelerisque felis imperdiet proin. Tincidunt id aliquet risus feugiat in ante metus dictum at. Volutpat sed cras ornare arcu dui vivamus. Morbi tristique senectus et netus. Sed cras ornare arcu dui vivamus. Lorem ipsum dolor sit amet consectetur adipiscing. Scelerisque in dictum non consectetur a erat nam at lectus. Elementum integer enim neque volutpat ac. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Faucibus pulvinar elementum integer enim neque volutpat. Tortor id aliquet lectus proin nibh. Morbi tempus iaculis urna id volutpat lacus laoreet. Proin libero nunc consequat interdum varius sit amet mattis vulputate. A scelerisque purus semper eget duis at. Est velit egestas dui id ornare arcu odio ut. In hac habitasse platea dictumst vestibulum. Varius quam quisque id diam vel quam. Nullam vehicula ipsum a arcu cursus. Consequat semper viverra nam libero justo laoreet sit amet. Eget duis at tellus at urna condimentum mattis pellentesque id. Quisque id diam vel quam elementum pulvinar etiam non. Nulla aliquet enim tortor at auctor urna nunc id cursus. Aliquam ut porttitor leo a. Feugiat pretium nibh ipsum consequat nisl vel. Tellus in metus vulputate eu scelerisque felis imperdiet. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper. Donec et odio pellentesque diam volutpat. Tellus mauris a diam maecenas sed. Malesuada fames ac turpis egestas integer eget aliquet. Et malesuada fames ac turpis egestas sed tempus. Nulla pellentesque dignissim enim sit amet. Quam id leo in vitae turpis. Non enim praesent elementum facilisis leo vel fringilla. Integer enim neque volutpat ac tincidunt vitae semper quis. Nulla facilisi morbi tempus iaculis urna id volutpat. Eu feugiat pretium nibh ipsum consequat nisl. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Malesuada proin libero nunc consequat interdum varius sit amet. Nisi vitae suscipit tellus mauris a. Proin sed libero enim sed. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Nisi lacus sed viverra tellus in hac habitasse platea. Cras adipiscing enim eu turpis. Enim nunc faucibus a pellentesque. Non sodales neque sodales ut etiam sit amet nisl. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Non nisi est sit amet facilisis magna. [/div] [/div] [div class=rtext] [div class=scroll] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas sed enim ut sem viverra aliquet. Metus vulputate eu scelerisque felis imperdiet proin. Tincidunt id aliquet risus feugiat in ante metus dictum at. Volutpat sed cras ornare arcu dui vivamus. Morbi tristique senectus et netus. Sed cras ornare arcu dui vivamus. Lorem ipsum dolor sit amet consectetur adipiscing. Scelerisque in dictum non consectetur a erat nam at lectus. Elementum integer enim neque volutpat ac. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Faucibus pulvinar elementum integer enim neque volutpat. Tortor id aliquet lectus proin nibh. Morbi tempus iaculis urna id volutpat lacus laoreet. Proin libero nunc consequat interdum varius sit amet mattis vulputate. A scelerisque purus semper eget duis at. Est velit egestas dui id ornare arcu odio ut. In hac habitasse platea dictumst vestibulum. Varius quam quisque id diam vel quam. Nullam vehicula ipsum a arcu cursus. Consequat semper viverra nam libero justo laoreet sit amet. Eget duis at tellus at urna condimentum mattis pellentesque id. Quisque id diam vel quam elementum pulvinar etiam non. Nulla aliquet enim tortor at auctor urna nunc id cursus. Aliquam ut porttitor leo a. Feugiat pretium nibh ipsum consequat nisl vel. Tellus in metus vulputate eu scelerisque felis imperdiet. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper. Donec et odio pellentesque diam volutpat. Tellus mauris a diam maecenas sed. Malesuada fames ac turpis egestas integer eget aliquet. Et malesuada fames ac turpis egestas sed tempus. Nulla pellentesque dignissim enim sit amet. Quam id leo in vitae turpis. Non enim praesent elementum facilisis leo vel fringilla. Integer enim neque volutpat ac tincidunt vitae semper quis. Nulla facilisi morbi tempus iaculis urna id volutpat. Eu feugiat pretium nibh ipsum consequat nisl. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Malesuada proin libero nunc consequat interdum varius sit amet. Nisi vitae suscipit tellus mauris a. Proin sed libero enim sed. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Nisi lacus sed viverra tellus in hac habitasse platea. Cras adipiscing enim eu turpis. Enim nunc faucibus a pellentesque. Non sodales neque sodales ut etiam sit amet nisl. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Non nisi est sit amet facilisis magna. [/div] [/div] [div class=gtext] [div class=scroll]
560802eab14f946a2e24fb7aa5c728b6.jpg
avatar_857259f46e8b_128.pnj
f8fc6de1eb18b5cb479b0735b49c8baf44e12f36_128.jpg
e070684f657d00c6ae8356292931d92a2b6e634e_128.jpg



5e0138cd542fd0479d95d3875ced9cfb2ea72ba7r1-736-1104v2_128.jpg
avatar_22734571a01b_128.png


32a5d8cda5c0087d5d9d2dc367ed8d5d876a9f46_128.jpg
avatar_d5f306b0adba_128.pnj


[/div] [/div] [/div] [/div]
 
[class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=pic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=box] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=pic][/div] [div class=divider][/div] [div class=box][div class=comscroll] > menu bar with tabs
> code
a cs code i made for a krp i'm in. i hope you like it!
[/div][/div] [/div]

[class=credit] font-size: 8px; color: black; [/class] [class name=containercont] height: 470px; width: 450px; margin: auto; [/class] [class name=container] height: 450px; width: 450px; background: black; margin-top: 20px; padding-top: 1px; [/class] [class name=img1] height: 370px; width: 370px; background: url(https://i.pinimg.com/originals/23/bf/47/23bf4759720841358b6a8f3ff7722e01.jpg); background-size: cover; background-position: 0% 55%; position: relative; left: 40px; top: 40px; [/class] [class name=textbox] height: 185px; width: 370px; font-size: 12px; color: white; margin-top: 40px; margin-left: 40px; overflow: hidden; [/class] [class name=scroll] height: 98%; width: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class name=img2] height: 185px; width: 370px; background: url(https://i0.wp.com/www.koreanesia.com/wp-content/uploads/2018/07/65-7.jpg?fit=1000%2C500&ssl=1); background-size: cover; margin-left: 40px; [/class] [class name=img3] height: 185px; width: 370px; background: url(https://i.pinimg.com/originals/c1/3b/97/c13b9708db67b9167d83f3fc30260202.jpg); background-size: cover; background-position: 0% 50%; margin-left: 40px; [/class] [class name=img4] height: 185px; width: 370px; background: url(https://www.allkpop.com/upload/2018/04/af_org/25201130/sf9-rowoon.jpg); background-size: cover; background-position: 0% 50%; margin-left: 40px; [/class] [class name=img5] height: 185px; width: 370px; background: url(https://pm1.narvii.com/6252/3156c60d50822d0eee6266e634471c160b4b65eb_hq.jpg); background-size: cover; background-position: 0% 0%; margin-left: 40px; [/class] [class name=header] font-size: 45px; color: white; -webkit-text-stroke: 2px black; position: relative; margin-left: 8px; z-index: 0; [/class] [class name=tabpic] float: left; position: relative; left: 5px; z-index: 2; cursor: pointer; color: white; [/class] [class name=tabpicclick] color: black; [/class] [class name=tabbar] height: 449px; width: 0px; background: white; float: right; margin-top: -1px; margin-left: 1px; position: absolute; transition: 0.8s; z-index: 1; border-top: 1px solid black; border-bottom: 1px solid black; [/class] [class name=tabscontainer] height: 220px; width: 150px; margin-top: 15px; display: flex; flex-flow: column; align-items: center; [/class] [class name=tabbarclick] width: 150px; [/class] [class name=tabs] font-size: 15px; color: grey; margin: auto; display: inline; transition: color 0.5s; [/class] [class name=tabs state=hover] color: black; cursor: pointer; [/class] [class name=intabpic] height: 60px; width: 60px; background: url(https://66.media.tumblr.com/937cefd4e63dad50dbb4ae0c3f0db2bf/tumblr_pcn4q3itKQ1vj5w4mo3_400.jpg); background-size: cover; margin: auto; margin-top: 15px; border: 1px solid grey; [/class] [class name=relpic] height: 60px; width: 60px; padding: 5px; float: left; [/class] [script class=container] hide tabs hide textbox hide intabpic hide basicsheader hide personaheader hide relationshipsheader hide historyheader hide img2 hide img3 hide img4 hide img5 set tabon 1 [/script] [script class=tabpic on=click] if (eq ${tabon} 1) (fadeIn 1000 intabpic) (fadeOut 200 intabpic) if (eq ${tabon} 1) (fadeIn 1000 tabs) (fadeOut 200 tabs) if (eq ${tabon} 1) (addClass tabbarclick tabbar) (removeClass tabbarclick tabbar) if (eq ${tabon} 1) (addClass tabpicclick tabpic) (removeClass tabpicclick tabpic) if (eq ${tabon} 1) (set tabon 0) (set tabon 1) [/script] [script class=home on=click] fadeIn 500 img1 fadeIn 500 frontpage hide img2 hide img3 hide img4 hide img5 hide textb hide textp hide texth hide textr hide basicsheader hide personaheader hide relationshipsheader hide historyheader [/script] [script class=basics on=click] hide img1 hide img3 hide img4 hide img5 hide frontpage hide personaheader hide relationshipsheader hide historyheader hide textp hide texth hide textr fadeIn 500 img2 fadeIn 500 textb fadeIn 500 basicsheader [/script] [script class=persona on=click] hide img1 hide img2 fadeIn 500 img3 hide img4 hide img5 hide frontpage hide basicsheader fadeIn 500 personaheader hide historyheader hide relationshipsheader hide textb fadeIn 500 textp hide texth hide textr [/script] [script class=history on=click] hide img1 hide img2 hide img3 hide img4 fadeIn 500 img5 hide frontpage hide basicsheader hide personaheader fadeIn 500 historyheader hide relationshipsheader hide textb hide textp fadeIn 500 texth hide textr [/script] [script class=relationships on=click] hide img1 hide img2 hide img3 fadeIn 500 img4 hide img5 hide frontpage hide basicsheader hide personaheader hide historyheader fadeIn 500 relationshipsheader hide textb hide textp hide texth fadeIn 500 textr [/script] [div class="containercont"] [div class="container"] [div class="tabpic"][/div] [div class="tabbar"] [div class="intabpic"][/div] [div class="tabscontainer"] [div class="tabs home"]Home[/div] [div class="tabs basics"]Basics[/div] [div class="tabs persona"]Persona[/div] [div class="tabs history"]History[/div] [div class="tabs relationships"]Relationships[/div][/div] [/div] [div class="textbox textb"][div class="scroll"]
name kang ji-sung

age 20

occupation student / waiter

height 192cm / 6' 3

ethnicity south korean

gender male

sexuality bisexual

birthday december 10th

weight 73kg

face claim sf9 rowoon

[/div][/div] [div class="textbox textp"][div class="scroll"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus feugiat in ante metus dictum. Malesuada bibendum arcu vitae elementum curabitur. Nunc sed blandit libero volutpat sed cras ornare. Non diam phasellus vestibulum lorem sed risus ultricies. Turpis egestas integer eget aliquet nibh praesent tristique. Phasellus vestibulum lorem sed risus ultricies tristique. Semper viverra nam libero justo laoreet sit amet cursus. Quis vel eros donec ac odio tempor. Porttitor leo a diam sollicitudin tempor. Blandit turpis cursus in hac habitasse. Magna fermentum iaculis eu non. Quis auctor elit sed vulputate mi sit amet mauris. Blandit aliquam etiam erat velit. Diam quam nulla porttitor massa id. Vivamus at augue eget arcu dictum varius. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Tristique et egestas quis ipsum suspendisse ultrices gravida.

Purus in massa tempor nec. Sagittis vitae et leo duis ut diam. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Pretium aenean pharetra magna ac placerat vestibulum lectus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Sed viverra tellus in hac habitasse. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Sed vulputate mi sit amet mauris commodo quis. Facilisis mauris sit amet massa vitae tortor condimentum. Est placerat in egestas erat imperdiet sed euismod nisi. In tellus integer feugiat scelerisque.


likes
- money
- swimming
- soft beds
- food
- cats
- soju
dislikes
- studying
- spoilt brats
- snow
- people who don't stand up for themselves
- skinship

hobbies
- swimming
- learning mandarin
- trying new foods
- watching animal documentaries
quirks
- sleeps curled up in a ball
- will eat anything
- has a resting bitch face
- terrible driver, never get in a car with him

[/div][/div] [div class="textbox texth"][div class="scroll"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus feugiat in ante metus dictum. Malesuada bibendum arcu vitae elementum curabitur. Nunc sed blandit libero volutpat sed cras ornare. Non diam phasellus vestibulum lorem sed risus ultricies. Turpis egestas integer eget aliquet nibh praesent tristique. Phasellus vestibulum lorem sed risus ultricies tristique. Semper viverra nam libero justo laoreet sit amet cursus. Quis vel eros donec ac odio tempor. Porttitor leo a diam sollicitudin tempor. Blandit turpis cursus in hac habitasse. Magna fermentum iaculis eu non. Quis auctor elit sed vulputate mi sit amet mauris. Blandit aliquam etiam erat velit. Diam quam nulla porttitor massa id. Vivamus at augue eget arcu dictum varius. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Tristique et egestas quis ipsum suspendisse ultrices gravida.

Purus in massa tempor nec. Sagittis vitae et leo duis ut diam. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Pretium aenean pharetra magna ac placerat vestibulum lectus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Sed viverra tellus in hac habitasse. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Sed vulputate mi sit amet mauris commodo quis. Facilisis mauris sit amet massa vitae tortor condimentum. Est placerat in egestas erat imperdiet sed euismod nisi. In tellus integer feugiat scelerisque.
[/div][/div] [div class="textbox textr"][div class="scroll"][div class="relpic"]
stray-kids-bang-chan.jpg
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
45nDZc.jpg
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
dowoon-day6-01.jpg
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
WJSN-Yeoreum-WJ-STAY-Cover.png
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
l1tV7n0i_400x400.jpg
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
tumblr_penhnpisQq1wrzi0lo4_250.png
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[div class="relpic"]
Dm266TGX4AIbQ-Z.jpg
[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Malesuada bibendum arcu vitae elementum curabitur vitae nunc.
[/div][/div] [div class="img1"][/div] [div class="img2"][/div] [div class="img3"][/div] [div class="img4"][/div] [div class="img5"][/div] [div class="header frontpage"]Kang Ji-sung[/div] [div class="header basicsheader" style=margin-top:-40px;]Basics[/div] [div class="header personaheader" style=margin-top:-40px;]Personality[/div] [div class="header relationshipsheader" style=margin-top:-40px;]Relationships[/div] [div class="header historyheader" style=margin-top:-40px;]History[/div] [/div] [div class="credit"]code by Stellar Nursery Stellar Nursery [/div] [/div]
 
[class=credit] font-size: 8px; color: black; [/class] [class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=compic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=box] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=compic][/div] [div class=divider][/div] [div class=box][div class=comscroll] > hover over the image for tabs
i think this code turned out pretty well so i decided i might as well put it up.
heejin is so pretty though these pictures had me shook
code
[/div][/div] [/div]

[class name=bigcontainer] height: 445px; width: 600px; margin: auto; padding: 1px; [/class] [class name=container] height: 400px; width: 600px; background: #EFEDE7; border: 2px solid #CAB8B9; margin-top: 21px; padding-top: 1px; [/class] [class name=pic] height: 445px; width: 251px; background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg); background-size: cover; float: right; margin-top: -1px; margin-right: 20px; box-shadow: 3px 3px 2px rgb(0,0,0,0.2); transition: opacity 0.8s; display: flex; flex-flow: column; justify-content: space-evenly; overflow: hidden; [/class] [class name=basicsbackground] background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg); background-size: cover; [/class] [class name=personalitybackground] background: url(https://pbs.twimg.com/media/DbO_Q76U0AAJszl.jpg); background-size: cover; [/class] [class name=likesdislikesbackground] background: url(https://pbs.twimg.com/media/DbO_Q76UwAAKgJy.jpg); background-size: cover; [/class] [class name=historybackground] background: url(https://pbs.twimg.com/media/DbPAlJJV4AEOZNZ.jpg); background-size: cover; background-position: 60% 0%; [/class] [class name=gallerybackground] background: url(https://pbs.twimg.com/media/DbPAlJDVQAAFV0S.jpg); background-position: 57% 0%; background-size: cover; [/class] [class name=pic state=hover] opacity: 0.7; [/class] [class name=picbox] height: 30px; width: 211px; background: white; margin-left: -231px; opacity: 0.7; text-align: center; font-weight: 700; transition: 0.5s; display: flex; justify-content: center; align-items: center; cursor: pointer; [/class] [class name=picboxhover] transform: translateX(251px); [/class] [class name=textbox] height: 250px; width: 250px; margin-left: 40px; margin-top: 74px; overflow: hidden; color: black; font-size: 12px; [/class] [class name=gallerypic] height: 100%; width: 100%; margin-top: 20px; [/class] [class name=scroll] height: 100%; width: 100%; padding-right: 17px; overflow-y: scroll; padding-top: 5px; [/class] [class name=header] font-size: 35px; transform: rotate(-4deg); color:#3F3736; float: left; margin-top: 23px; margin-left: 20px; [/class] [script class=container] hide basicsbackground hide personalitybackground hide likesdislikesbackground hide historybackground hide gallerybackground hide header hide textbox show basicsheader show basicsbox [/script] [script class=pic on=mouseenter] addClass picboxhover picbox [/script] [script class=pic on=mouseleave] removeClass picboxhover picbox [/script] [script class=basicstab on=click] addClass basicsbackground removeClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic fadeIn 500 basicsheader hide personalityheader hide likesdislikesheader hide historyheader hide galleryheader fadeIn 500 basicsbox hide personalitybox hide likesdislikesbox hide historybox hide gallerybox [/script] [script class=personalitytab on=click] removeClass basicsbackground pic addClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic hide basicsheader fadeIn 500 personalityheader hide likesdislikesheader hide historyheader hide galleryheader hide basicsbox fadeIn 500 personalitybox hide likesdislikesbox hide historybox hide gallerybox [/script] [script class=likesdislikestab on=click] removeClass basicsbackground pic removeClass personalitybackground pic addClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic hide basicsheader hide personalityheader fadeIn 500 likesdislikesheader hide historyheader hide galleryheader hide basicsbox hide personalitybox fadeIn 500 likesdislikesbox hide historybox hide gallerybox [/script] [script class=historytab on=click] removeClass basicsbackground pic removeClass personalitybackground pic removeClass likesdislikesbackground pic addClass historybackground pic removeClass gallerybackground pic hide basicsheader hide personalityheader hide likesdislikesheader fadeIn 500 historyheader hide galleryheader hide basicsbox hide personalitybox hide likesdislikesbox fadeIn 500 historybox hide gallerybox [/script] [script class=gallerytab on=click] removeClass basicsbackground pic removeClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic addClass gallerybackground pic hide basicsheader hide personalityheader hide likesdislikesheader hide historyheader fadeIn 500 galleryheader hide basicsbox hide personalitybox hide likesdislikesbox hide historybox fadeIn 500 gallerybox [/script] [div class="bigcontainer"] [div class="pic"] [div class="basicsbackground"][/div] [div class="personalitybackground"][/div] [div class="likesdislikesbackground"][/div] [div class="historybackground"][/div] [div class="gallerybackground"][/div] [div class="picbox basicstab"]basics.[/div] [div class="picbox personalitytab" style=transition-delay:0.1s;]personality.[/div] [div class="picbox likesdislikestab" style=transition-delay:0.2s;]traits.[/div] [div class="picbox historytab" style=transition-delay:0.3s;]history.[/div] [div class="picbox gallerytab" style=transition-delay:0.4s;]gallery.[/div] [/div] [div class="container"] [div class="header basicsheader"]Basics[/div] [div class="textbox basicsbox" style=line-height:25px;][div class="scroll" style=display:flex;align-items:center;]
name
age
year
gender
sexuality
birthday
programme
rank
min seol-bi
18
3
female
bisexual
17th april
group
N/A​
[/div][/div] [div class="header personalityheader"]Personality[/div] [div class="textbox personalitybox"][div class="scroll"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/div][/div] [div class="header likesdislikesheader"]Traits[/div] [div class="textbox likesdislikesbox" style=line-height:25px][div class="scroll"]
height
weight
hair
eyes
mods
scars
best features
160cm
46kg
black
brown
none
none
her eyes​


likes
something
something
something
something
something
something​
dislikes
something
something
something
something
something
something​


talents
something
something
something
something
something
something​
habits
something
something
something
something
something
something​


hobbies
something
something
something
something
something
something​
fears
something
something
something
something
something
something​

[/div][/div] [div class="header historyheader"]History[/div] [div class="textbox historybox"][div class="scroll" style=height:94%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/div][/div] [div class="header galleryheader"]Gallery[/div] [div class="textbox gallerybox"][div class="scroll" style=vertical-align:middle;] [div class="gallerypic pic1" style=background:url(https://66.media.tumblr.com/818223680f99c16e5784eac1d3b52554/tumblr_oxmvqiPQLB1wayxevo2_250.png);background-size:cover;margin-top:0px;][/div] [div class="gallerypic pic2" style=background:url(https://66.media.tumblr.com/1d654c410907a0ea17598e3b960b24c1/tumblr_ppalx9mGR41tn4mojo1_400.jpg);background-size:cover;][/div] [div class="gallerypic pic3" style=background:url(https://66.media.tumblr.com/c74b43782369ce67fbdc2967f264e06a/tumblr_ppalx9mGR41tn4mojo4_400.jpg);background-size:cover;][/div] [div class="gallerypic pic4" style=background:url(https://66.media.tumblr.com/72f64d5ff06021c7623bd57b13d2cb0d/tumblr_ppalx9mGR41tn4mojo2_400.jpg);background-size:cover;][/div] [div class="gallerypic pic5" style=background:url(https://66.media.tumblr.com/3ce532602d6a1131aaabefbd1a04f3aa/tumblr_ppalx9mGR41tn4mojo3_400.jpg);background-size:cover;][/div] [div class="gallerypic pic6" style=background:url(https://data.whicdn.com/images/320653470/large.jpg);background-size:cover;][/div] [div class="gallerypic pic7" style=background:url(https://i-h1.pinimg.com/345x/14/c7/d2/14c7d218de895faa999c448e46896a04.jpg);background-size:cover;][/div] [div class="gallerypic pic8" style=background:url(https://66.media.tumblr.com/fc9f17d0173a6e9e9dc520f7413aaa2e/tumblr_ppalx9mGR41tn4mojo5_400.jpg);background-size:cover;][/div] [/div][/div] [/div] [div class="credit"]code by Stellar Nursery[/div] [/div]
 
Last edited:
[class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=compic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=box] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=compic][/div] [div class=divider][/div] [div class=box][div class=comscroll] > hover over the image for tabs
i think this code turned out pretty well so i decided i might as well put it up.
heejin is so pretty though these pictures had me shook
code
[/div][/div] [/div]

[class name=bigcontainer] height: 445px; width: 600px; margin: auto; padding: 1px; [/class] [class name=container] height: 400px; width: 600px; background: #EFEDE7; border: 2px solid #CAB8B9; margin-top: 21px; padding-top: 1px; [/class] [class name=pic] height: 445px; width: 251px; background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg); background-size: cover; float: right; margin-top: -1px; margin-right: 20px; box-shadow: 3px 3px 2px rgb(0,0,0,0.2); transition: opacity 0.8s; display: flex; flex-flow: column; justify-content: space-evenly; overflow: hidden; [/class] [class name=basicsbackground] background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg); background-size: cover; [/class] [class name=personalitybackground] background: url(https://pbs.twimg.com/media/DbO_Q76U0AAJszl.jpg); background-size: cover; [/class] [class name=likesdislikesbackground] background: url(https://pbs.twimg.com/media/DbO_Q76UwAAKgJy.jpg); background-size: cover; [/class] [class name=historybackground] background: url(https://pbs.twimg.com/media/DbPAlJJV4AEOZNZ.jpg); background-size: cover; background-position: 60% 0%; [/class] [class name=gallerybackground] background: url(https://pbs.twimg.com/media/DbPAlJDVQAAFV0S.jpg); background-position: 57% 0%; background-size: cover; [/class] [class name=pic state=hover] opacity: 0.7; [/class] [class name=picbox] height: 30px; width: 211px; background: white; margin-left: -231px; opacity: 0.7; text-align: center; font-weight: 700; transition: 0.5s; display: flex; justify-content: center; align-items: center; cursor: pointer; [/class] [class name=picboxhover] transform: translateX(251px); [/class] [class name=textbox] height: 250px; width: 250px; margin-left: 40px; margin-top: 74px; overflow: hidden; color: black; font-size: 12px; [/class] [class name=gallerypic] height: 100%; width: 100%; margin-top: 20px; [/class] [class name=scroll] height: 100%; width: 100%; padding-right: 17px; overflow-y: scroll; padding-top: 5px; [/class] [class name=header] font-size: 35px; transform: rotate(-4deg); color:#3F3736; float: left; margin-top: 23px; margin-left: 20px; [/class] [script class=container] hide basicsbackground hide personalitybackground hide likesdislikesbackground hide historybackground hide gallerybackground hide header hide textbox show basicsheader show basicsbox [/script] [script class=pic on=mouseenter] addClass picboxhover picbox [/script] [script class=pic on=mouseleave] removeClass picboxhover picbox [/script] [script class=basicstab on=click] addClass basicsbackground removeClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic fadeIn 500 basicsheader hide personalityheader hide likesdislikesheader hide historyheader hide galleryheader fadeIn 500 basicsbox hide personalitybox hide likesdislikesbox hide historybox hide gallerybox [/script] [script class=personalitytab on=click] removeClass basicsbackground pic addClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic hide basicsheader fadeIn 500 personalityheader hide likesdislikesheader hide historyheader hide galleryheader hide basicsbox fadeIn 500 personalitybox hide likesdislikesbox hide historybox hide gallerybox [/script] [script class=likesdislikestab on=click] removeClass basicsbackground pic removeClass personalitybackground pic addClass likesdislikesbackground pic removeClass historybackground pic removeClass gallerybackground pic hide basicsheader hide personalityheader fadeIn 500 likesdislikesheader hide historyheader hide galleryheader hide basicsbox hide personalitybox fadeIn 500 likesdislikesbox hide historybox hide gallerybox [/script] [script class=historytab on=click] removeClass basicsbackground pic removeClass personalitybackground pic removeClass likesdislikesbackground pic addClass historybackground pic removeClass gallerybackground pic hide basicsheader hide personalityheader hide likesdislikesheader fadeIn 500 historyheader hide galleryheader hide basicsbox hide personalitybox hide likesdislikesbox fadeIn 500 historybox hide gallerybox [/script] [script class=gallerytab on=click] removeClass basicsbackground pic removeClass personalitybackground pic removeClass likesdislikesbackground pic removeClass historybackground pic addClass gallerybackground pic hide basicsheader hide personalityheader hide likesdislikesheader hide historyheader fadeIn 500 galleryheader hide basicsbox hide personalitybox hide likesdislikesbox hide historybox fadeIn 500 gallerybox [/script] [div class="bigcontainer"] [div class="pic"] [div class="basicsbackground"][/div] [div class="personalitybackground"][/div] [div class="likesdislikesbackground"][/div] [div class="historybackground"][/div] [div class="gallerybackground"][/div] [div class="picbox basicstab"]basics.[/div] [div class="picbox personalitytab" style=transition-delay:0.1s;]personality.[/div] [div class="picbox likesdislikestab" style=transition-delay:0.2s;]traits.[/div] [div class="picbox historytab" style=transition-delay:0.3s;]history.[/div] [div class="picbox gallerytab" style=transition-delay:0.4s;]gallery.[/div] [/div] [div class="container"] [div class="header basicsheader"]Basics[/div] [div class="textbox basicsbox" style=line-height:25px;][div class="scroll" style=display:flex;align-items:center;]
name
age
year
gender
sexuality
birthday
programme
rank
min seol-bi
18
3
female
bisexual
17th april
group
N/A​
[/div][/div] [div class="header personalityheader"]Personality[/div] [div class="textbox personalitybox"][div class="scroll"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/div][/div] [div class="header likesdislikesheader"]Traits[/div] [div class="textbox likesdislikesbox" style=line-height:25px][div class="scroll"]
height
weight
hair
eyes
mods
scars
best features
160cm
46kg
black
brown
none
none
her eyes​


likes
something
something
something
something
something
something​
dislikes
something
something
something
something
something
something​


talents
something
something
something
something
something
something​
habits
something
something
something
something
something
something​


hobbies
something
something
something
something
something
something​
fears
something
something
something
something
something
something​

[/div][/div] [div class="header historyheader"]History[/div] [div class="textbox historybox"][div class="scroll" style=height:94%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/div][/div] [div class="header galleryheader"]Gallery[/div] [div class="textbox gallerybox"][div class="scroll" style=vertical-align:middle;] [div class="gallerypic pic1" style=background:url(https://66.media.tumblr.com/818223680f99c16e5784eac1d3b52554/tumblr_oxmvqiPQLB1wayxevo2_250.png);background-size:cover;margin-top:0px;][/div] [div class="gallerypic pic2" style=background:url(https://66.media.tumblr.com/1d654c410907a0ea17598e3b960b24c1/tumblr_ppalx9mGR41tn4mojo1_400.jpg);background-size:cover;][/div] [div class="gallerypic pic3" style=background:url(https://66.media.tumblr.com/c74b43782369ce67fbdc2967f264e06a/tumblr_ppalx9mGR41tn4mojo4_400.jpg);background-size:cover;][/div] [div class="gallerypic pic4" style=background:url(https://66.media.tumblr.com/72f64d5ff06021c7623bd57b13d2cb0d/tumblr_ppalx9mGR41tn4mojo2_400.jpg);background-size:cover;][/div] [div class="gallerypic pic5" style=background:url(https://66.media.tumblr.com/3ce532602d6a1131aaabefbd1a04f3aa/tumblr_ppalx9mGR41tn4mojo3_400.jpg);background-size:cover;][/div] [div class="gallerypic pic6" style=background:url(https://data.whicdn.com/images/320653470/large.jpg);background-size:cover;][/div] [div class="gallerypic pic7" style=background:url(https://i-h1.pinimg.com/345x/14/c7/d2/14c7d218de895faa999c448e46896a04.jpg);background-size:cover;][/div] [div class="gallerypic pic8" style=background:url(https://66.media.tumblr.com/fc9f17d0173a6e9e9dc520f7413aaa2e/tumblr_ppalx9mGR41tn4mojo5_400.jpg);background-size:cover;][/div] [/div][/div] [/div] [/div]

So much love for this one! Thanks for sharing. <3
 
[class=comcontainer] height: 150px; width: 800px; margin: auto; display: flex; flex-flow: row; [/class] [class=compic] height: 100px; width: 100px; background: url(https://i.pinimg.com/originals/53/d9/2f/53d92f73d9dd4e2b9a04ece5a35cc566.jpg); background-size: cover; background-position: 50% 60%; border-radius: 100px; align-self: center; margin-left: 100px; [/class] [class=divider] height: 130px; width: 2px; background: #DBCDEF; margin-top: 10px; margin-left: 70px; [/class] [class=combox] height: 130px; width: 400px; margin-left: 20px; overflow: hidden; margin-top: 15px; [/class] [class=comscroll] height: 90%; width: 100%; padding-left: 5px; padding-right: 17px; overflow-y: scroll; [/class] [div class=comcontainer] [div class=compic][/div] [div class=divider][/div] [div class=combox][div class=comscroll] > click on the letters for tabs
> click on home to go home (obviously lol)
> code
so i made this code in a couple hours when i was bored. it's actually pretty simple. idk i kind of just felt like making a big code. also i cut off the letters as a stylistic choice, which i think turned out quite well. i was going for a more modern look here which i hope i achieved.
[/div][/div] [/div]

[class name=container] height: 850px; width: 100%; background: #1E1E1E; display: flex; align-items: center; [/class] [class name=flexcontainer] height: 617px; width: 747px; display: flex; margin: auto; flex-flow: column wrap; position:relative; [/class] [class name=basicsimg] height: 581px; width: 387px; background:url(https://i.pinimg.com/564x/1e/88/6a/1e886af460f8a634f47aff6650de94bb.jpg); background-size: cover; margin-left: 9px; margin-top: 30px; overflow: hidden; [/class] [class name=persimg] height: 266px; width: 286px; background: url(https://i.pinimg.com/564x/ff/96/57/ff9657569f2cae856ea418feb45be8cc.jpg); background-size: cover; margin-top: 30px; margin-left: 65px; overflow: hidden; [/class] [class name=histimg] height: 266px; width: 286px; background: url(https://i.pinimg.com/564x/47/f2/3f/47f23f1cd6805093eacd4517ee04109f.jpg); background-size: cover; margin-top: 49px; margin-left: 65px; background-position: 0% 50%; overflow: hidden; [/class] [class name=flexrow] display: flex; flex-flow: row; [/class] [class name=title] font-size: 100px; color: #FF6464; margin-top: -68px; cursor: pointer; opacity: 0.7; transition: 0.5s; position: relative; [/class] [class name=title state=hover] opacity: 1; [/class] [class name=textbox] width: 406px; height: 422px; color: white; overflow: hidden; position: relative; font-size: 13px; [/class] [class name=scroll] height: 100%; width: 100%; padding-right: 50px; overflow-y: scroll; [/class] [class name=tabimg] width: 388px; height: 422px; background: url(https://i.pinimg.com/564x/57/ba/28/57ba28c2665076665077d8dcfa359032.jpg); background-size: cover; margin-left: 100px; overflow: hidden; position: relative; [/class] [class name=home] font-size: 100px; color: #FF6464; cursor: pointer; position: relative; left: 110px; top: 330px; opacity: 0.7; transition: 0.5s; [/class] [class name=home state=hover] opacity: 1; [/class] [class name=fadeout] animation-name:{post_id}FADEOUT; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; [/class] [animation=FADEOUT] [keyframe=0]top:0px;[/keyframe] [keyframe=100]top:450px;[/keyframe] [/animation] [script class=container] hide textbox hide tabimg hide tabflex [/script] [script class=tabi on=click version=2] (addClass "fadeout" "flexcontainer") (fadeOut 500 "flexcontainer") (setTimeout 1 (fadeIn 600 "basicsbox")) (setTimeout 1 (fadeIn 600 "basicstabpic")) (setTimeout 1 (show "tabflex")) (removeClass "fadeout" "basicsbox") (removeClass "fadeout" "basicstabpic") (removeClass "fadeout" "tabflex") [/script] [script class=basicshome on=click version=2] (addClass "fadeout" "basicsbox") (addClass "fadeout" "basicstabpic") (addClass "fadeout" "tabflex") (fadeOut 500 "basicsbox") (fadeOut 500 "basicstabpic") (fadeOut 500 "tabflex") (setTimeout 1 (fadeIn 500 "flexcontainer")) (removeClass "fadeout" "flexcontainer") [/script] [script class=tabii on=click version=2] (addClass "fadeout" "flexcontainer") (fadeOut 500 "flexcontainer") (setTimeout 1 (fadeIn 500 "persbox")) (setTimeout 1 (fadeIn 500 "perstabpic")) (setTimeout 1 (show "tabflex")) (removeClass "fadeout" "persbox") (removeClass "fadeout" "perstabpic") (removeClass "fadeout" "tabflex") [/script] [script class=pershome on=click version=2] (addClass "fadeout" "persbox") (addClass "fadeout" "perstabpic") (addClass "fadeout" "tabflex") (fadeOut 500 "persbox") (fadeOut 500 "perstabpic") (fadeOut 500 "tabflex") (setTimeout 1 (fadeIn 500 "flexcontainer")) (removeClass "fadeout" "flexcontainer") [/script] [script class=tabiii on=click version=2] (addClass "fadeout" "flexcontainer") (fadeOut 500 "flexcontainer") (setTimeout 1 (fadeIn 500 "histbox")) (setTimeout 1 (fadeIn 500 "histtabpic")) (setTimeout 1 (show "tabflex")) (removeClass "fadeout" "histbox") (removeClass "fadeout" "histtabpic") (removeClass "fadeout" "tabflex") [/script] [script class=histhome on=click version=2] (addClass "fadeout" "histbox") (addClass "fadeout" "histtabpic") (addClass "fadeout" "tabflex") (fadeOut 500 "histbox") (fadeOut 500 "histtabpic") (fadeOut 500 "tabflex") (setTimeout 1 (fadeIn 500 "flexcontainer")) (removeClass "fadeout" "flexcontainer") [/script] [div class="container"] [div class="flexcontainer"] [div class="basicsimg"] [div class="flexrow"] [div class="title tabi" style=margin-left:-10px;]N[/div] [div class="title tabii"]J[/div] [div class="title tabiii"]H[/div] [/div] [/div] [div class="persimg"] [/div] [div class="histimg"] [div class="title creditlink" style=margin-top:162px;left:170px;]CR[/div] [/div] [/div] [div class="flexrow tabflex" style=height:100%;width:100%;margin:auto;justify-content:center;overflow:hidden;align-items:center;] [div class="textbox basicsbox"][div class="scroll basicsscroll"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed.

Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.
[/div][/div] [div class="tabimg basicstabpic"] [div class="home basicshome"]HOME[/div] [/div] [div class="textbox persbox"][div class="scroll persscroll"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed.

Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.
[/div][/div] [div class="tabimg perstabpic" style=background:url(https://i.pinimg.com/564x/b6/02/a5/b602a56ce007c26a447cb1883699587d.jpg);background-size:cover;] [div class="home pershome"]HOME[/div] [/div] [div class="textbox histbox"][div class="scroll histscroll"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed.

Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Proin sagittis nisl rhoncus mattis rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Nulla pharetra diam sit amet. Fames ac turpis egestas integer eget aliquet nibh. Morbi blandit cursus risus at ultrices mi tempus. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Accumsan tortor posuere ac ut consequat. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.
[/div][/div] [div class="tabimg histtabpic" style=background:url(https://post-phinf.pstatic.net/MjAxODAyMjFfNTgg/MDAxNTE5MTg5NDc1MTIz.IUw-YwcAwxs0AJSw_xINrlLlbJPwAExwNxkyO26z_Sog.NnYBPQo1OszmqR5Cp80LENbL7L1TU0abEougwgkKc2kg.JPEG/NO4_1927.jpg?type=w1200);background-size:cover;] [div class="home histhome"]HOME[/div] [/div] [/div] [/div]
 

Users who are viewing this thread

Back
Top