Eunwoo Code

[nobr]



[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][font=Poiret One]Basics[/font][/div]

[/div]



[/div]



[div class=pic2]



[div class=tab2]

[div class=tabbox][font=Poiret One]Personality[/font][/div]

[/div]



[/div]





[div class=pic3]



[div class=tab3]

[div class=tabbox][font=Poiret One]History[/font][/div]

[/div]



[/div]





[div class=pic4]



[div class=tab4]

[div class=tabbox][font=Poiret One]Writing Sample[/font][/div]

[/div]



[/div]





[div class=pic5]



[div class=tab5]

[div class=tabbox][font=Poiret One]Gallery[/font][/div]

[/div]



[/div]







[/div]



[div class=wrapper]

[div class=header][font=Poiret One]Cha Eun-woo[/font][/div]



[div class=btext]

[div class=scroll]



[div=margin-left: 40px;margin-top:-20px;line-height:30px;][font=Lato][row][column=span4]name Cha Eun-woo[br][/br]

age 21[br][/br]

ethnicity south korean[br][/br]

height 183cm / 6ft[br][/br]

eye colour dark brown[/column]



[column=span4]gender male[br][/br]

birthday march 30th[br][/br]

occupation idol[br][/br]

weight 64kg[br][/br]

hair colour black[br][/br][/column]

[/row][/font][/div][font=Lato]





[div class=quote]"Just because two people are good friends doesn't mean they'd make a good couple, honey."[/div][/font]



[/div]

[/div]





[div class=ptext]

[div class=scroll][font=Lato]

likes[br][/br]

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



dislikes[br][/br]

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



charms[br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]



neutral traits[br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]



flaws[br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]

something[br][/br]

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.[br][/br][br][/br]





[/font][/div]

[/div]



[div class=htext]

[div class=scroll][font=Lato]

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.



[/font][/div]

[/div]



[div class=rtext]

[div class=scroll][font=Lato]

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.

[/font]









[/div]

[/div]



[div class=gtext]

[div class=scroll]



[div=pointer-events:none;margin-left:60px;margin-top:10px;]







[br][/br][br][/br][br][/br]

[div=height:128px;width:128px;display:inline-block;background:url(https://pm1.narvii.com/6254/02b89b2f683a11e2474120fded4d3833b077a174_hq.jpg);background-size:contain;][/div]



[div=height:128px;width:128px;display:inline-block;background:url(https://cdn140.picsart.com/253567751029202.jpg?c256x256);background-size:contain;][/div]

[br][/br][br][/br][div=margin-top:2px;][/div]



[div=height:128px;width:128px;display:inline-block;background:url(https://pbs.twimg.com/profile_images/851512741001011200/sRk1VwRG.jpg);background-size:contain;][/div]

[div=height:128px;width:128px;display:inline-block;background:url(http://pm1.narvii.com/6800/8ac33cdd0e82c2c29e904e4645421dae21953684v2_00.jpg);background-size:contain;][/div]



[br][/br][br][/br]

[/div]

[/div]

[/div]

[/div]

[/div]













[/nobr]