RI.a
"愛を知りたいのです."
Please help. Idk why there's a bunch of space below. Trying to make this mobile friendly as well, so if I define the height value for the container, it won't be flexible?? ;___;
Code:
[nobr]
[class=container]
display:flex;
max-width:900px;
background-color: #f7f7f7;
border:1px solid #ddd;
margin:auto;center;
padding:2em;
flex-wrap:wrap;
align-items:flex-start;
overflow:hidden;
[/class]
[class=leftside]
height:70vh;
background:url('https://i.imgur.com/ofk3RK1.jpg?1') no-repeat;
background-size:130%;
background-position:center;
[/class]
[class=leftsideparent]
width:100%;
height:100%;
background:url('https://i.imgur.com/3gUtYek.png') no-repeat;
background-size:100%;
opacity:0;
transition:all 0.75s ease;
[/class]
[class name=leftsideparent state=hover]
opacity:1;
[/class]
[class=rightside]
height:70vh;
overflow:hidden;
[/class]
[class=scrollbox]
height:70vh;
overflow-y:scroll;
[/class]
[class=text]
font-family:Unica One, display;
font-size:1em;
color:#222;
[/class]
[class=title]
float:left;
padding:.2em;
background:#bababa;
font-family:Unica One, display;
font-size:1em;
color:#f7f7f7;
margin-top:-.2em;
[/class]
[class=tabs]
display:inline-block;
width:75px;
background:#f7f7f7;
padding:.2em;
text-align:center;
font-size:.8em;
color:#aaa;
font-family:Unica One, display;
cursor:pointer;
transition: all 0.3s ease-in-out;
[/class]
[class name=tabs state=hover]
letter-spacing:.3em;
[/class]
[script class=tabbasic on=click]
removeClass select tabs
addClass select tabbasic
hide scrollbox
show pagebasic
[/script]
[script class=tabbasic]
addClass select tabbasic
[/script]
[script class=tabperson on=click]
removeClass select tabs
addClass select tabperson
hide scrollbox
show pageperson
[/script]
[script class=tabhistory on=click]
removeClass select tabs
addClass select tabhistory
hide scrollbox
show pagehistory
[/script]
[script class=tabother on=click]
removeClass select tabs
addClass select tabother
hide scrollbox
show pageother
[/script]
[/nobr]
[div class=container][row][column=span3][border=1px solid #ddd][div class=leftside][div class=leftsideparent][div=position:relative;left:calc(10%+10px);width:10%;line-height:1em;text-shadow:2px 1px 0px #5684c9;font-size:2.5em;][font=Kaushan Script]宮本 [/font][/div][div=position:relative;top:5%;left:(10%+10px);width:10%;line-height:1em;text-shadow:2px 1px 0px #5684c9;font-size:2.5em;][font=Kaushan Script]和美[/font][/div][/div][/div][/border][/column][column=span5][border=1px solid #ddd][div class=rightside][div=min-width:300px;width:560px;background:#f7f7f7;][div class="tabs tabbasic"][u]basic[/u][/div][div class="tabs tabperson"][u]persona[/u][/div][div class="tabs tabhistory"][u]history[/u][/div][div class="tabs tabother"][u]other[/u][/div][/div][div class="scrollbox pagebasic"]
[div class=text][div class=title]Name[/div] Miyamoto Kazumi
[div class=title]Age[/div] Seventeen
[div class=title]Gender[/div] Female
[div class=title]Race[/div] Human
[div class=title]Occupation[/div] Student
[div class=title]Year[/div] Third[/div][/div]
[div class="scrollbox pageperson"][div class=text][div class=title]Personality[/div]
[div class=title]Weaknesses[/div] Technically challenged,
[div class=title]Talents[/div]
[div class=title]Likes[/div] Vintage items, traditional snacks,
[div class=title]Dislikes[/div] [/div][/div][div class="scrollbox pagehistory"][div class=text][div class=title]Backstory[/div]
[div class=title]Relationships[/div] Shinshi - ???
Yokai - ???
Human - ???[/div][/div][div class="scrollbox pageother"][div class=text][div class=title]Theme[/div]
[MEDIA=youtube]BfZUU8N_vSY[/MEDIA][/div][/div][/border][/column][/row][/div]
[div=display:block;max-width:900px;margin:auto;center;opacity:0.5;font:Heebo;font-size:9px;text-align:right;]code [USER=55064]@RI.a[/USER] faceclaim [url=https://www.pixiv.net/member.php?id=3878890]42[/url][/div]
