scoups page

<!---

tumblr page by nemurou

february 2018

TERMS OF USE: https://nemurou.tumblr.com/tou

--->

<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

<style type="text/css">

/*tumblr controls by cyantists*/
iframe.tmblr-iframe {
    z-index: 99999999999999!important;
    top: 0!important;
    right: 0!important;
    opacity: 0.4;
    filter: invert(1) contrast(150%);
    -webkit-filter: invert(1) contrast(150%);
    -o-filter: invert(1) contrast(150%);
    -moz-filter: invert(1) contrast(150%);
    -ms-filter: invert(1) contrast(150%);
    transform: scale(0.5);
    transform-origin: 100% 0;
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 100% 0;
    -o-transform: scale(.7);
    -o-transform-origin: 100% 0;
    -moz-transform: scale(.7);
    -moz-transform-origin: 100% 0;
    -ms-transform: scale(.7);
    -ms-transform-origin: 100% 0;
}

#s-m-t-tooltip {
    max-width:150px;
    background:#eee;
    padding:1px 6px 2px 6px;
    z-index:999;
    margin:20px;
}

body {
    background:#fff;
    font-family: 'Lato', sans-serif;
    font-size:12px;
    line-height:180%;
    color:#474747;
    margin:0;
    padding:0;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
}

a {
    text-decoration:none;
    color:#474747;
}

#content {
    height:100vw;
    width:100%;
    position:fixed;
}

#left {
    width:50vw;
    position:absolute;
    left:0px;
    height:100vh;
    background:#fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:flex;
    justify-content:center;
    align-items:center;

}

#right {
    width:50vw;
    margin-left:50vw;
    height:100vh;
    background:#EDEDED;
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:flex;
    justify-content:center;
    align-items:center;
}

#right-txt {
    width:30vw;
}

#tagline, #title, #subtitle {
    text-transform:uppercase;
}

#tagline {
    font-weight:700;
    font-size:16px;
    letter-spacing:4px;
}

#title {
    margin-top:25px;
    font-weight:900;
    font-size:35px;
    letter-spacing:6px;
}

#line {
    margin-top:40px;
    width:50px;
    height:5px;
    background:#474747;
}

#short-descript {
    font-size:16px;
    margin-top:25px;
    line-height:200%;
    text-align:justify;
	max-height:200px;
	overflow:auto;
}

#subtitle {
    font-weight:700;
    letter-spacing:4px;
    font-size:23px;
    margin-top:50px;
}

#about {
    font-size:16px;
    margin-top:15px;
    line-height:200%;
    text-align:justify;
    max-height:300px;
    overflow:auto;
}

::-webkit-scrollbar {
    width:17px;
    height:17px;
    background-color:rgb(255,255,255);
}

::-webkit-scrollbar-track {
    border:8px solid #EDEDED;
    background-color:#aaa;
}

::-webkit-scrollbar-thumb {
    border:8px solid #EDEDED;
    background-color:#000;
    min-height:24px;
    min-width:24px;
}

#icon {
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:300px;
}

#icontxt {
    font-size:16px;
    margin:25px 0px 40px 0px;
    line-height:200%;
    width:300px;
	max-height:300px;
	overflow:auto;
    text-align:center;
}

#bar {
    width:200px;
    height:1px;
    background:#474747;
    margin:auto;
}

#bar #links {
    position:absolute;
    display:flex;
    flex-direction:row;
    background:#fff;
    margin-top:-6px;
}

.circle {
    margin-right:10px;
    width:10px;
    height:10px;
    border:1px solid #474747;
    border-radius:50%;
    -webkit-border-radius:50%:
    -moz-border-radius:50%;
}

#button {
    background:#EDEDED;
    margin:50px auto 0px auto;
    text-align:center;
    width:100px;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:4px;
    padding:10px 1px 10px 5px;
    border-radius:40px;
    -webkit-border-radius:40px:
    -moz-border-radius:40px;
}

.phc a{
    text-align:center;
    background:#fff;
    position:fixed;
    left:25px;
    bottom:25px;
    font-size:11px;
    font-family:calibri;
    color:#000;
    line-height:100%;
    z-index:999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    padding:5px 8px 6px 8px;
}

</style> </head> <body>


<div id="content">
<div id="content-txt">
<div id="left">
<div id="left-txt">
<img id="icon" src="https://static.tumblr.com/grynaut/qNxp4h7r1/scoupsicon.png">
<div id="icontxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada commodo arcu, id imperdiet velit pretium id.</div>
<div id="bar">
<div id="links">
<div style="background:#474747;" class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<!---end of links-->
</div>
<!---end of bar--->
</div>
<div id="button"><a href="/">return</a></div>
<!---end of left text--->
</div>
<!---end of left--->
</div>
<div id="right">
<div id="right-txt">
<div id="tagline">Choi Seung Cheol</div>
<div id="title">seventeen</div>
<div id="line"></div>
<div id="short-descript">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada commodo arcu, id imperdiet.</div>

<div id="subtitle">hip hop unit</div>

<div id="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada commodo arcu, id imperdiet velit pretium id. Proin lacinia pretium est id vestibulum. Etiam mattis non odio vitae bibendum. Fusce eros ex, faucibus non ex placerat, tempor ultrices urna.</div>
<!---end of right text--->
</div>
<!---end of right--->
</div>
<!---end of content txt--->
</div>
<!---end of content--->
</div>


</html>

<span class="phc"><a href="https://nemurou.tumblr.com/">theme by<br><b>nemurou</b></a></span>