nam joo hyuk code

[nobr]

[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;][url=https://www.rpnation.com/threads/this-and-that-%E2%80%94-%E2%9C%A7-stellars-workshop.429011/][color=#FF6464]CR[/color][/url][/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"]
[font=Open Sans]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. [br][/br][br][/br]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.[/font]
    [/div][/div]
    [div class="tabimg basicstabpic"]
      [div class="home basicshome"]HOME[/div]
    [/div]

    [div class="textbox persbox"][div class="scroll persscroll"]
[font=Open Sans]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. [br][/br][br][/br]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.[/font]
    [/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"]
[font=Open Sans]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. [br][/br][br][/br]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.[/font]
    [/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]





[/nobr]