연습장:Sakura 문서 원본 보기

<html>
<div class="kiminokoe border-radius">
<div class="main">
<p><big><big><span style="font-weight: 900">너의 목소리</span></big></big><br></p>
</div></div>
<style>
.kiminokoe {
    position: relative;
    width: 100%;
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    text-align: center;
    color: white;
    line-height: 200%;
}
.kiminokoe::before {
    content: "";
    position: absolute;
    top: 0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url(../images/a/a0/The_Place_Promised_in_Our_Early_Days.jpg);
    background-repeat: no-repeat;
    background-position: center 90%;
    background-size: cover;
    filter: saturate(180%);
    z-index: 1;
}
.kiminokoe .main{
    position: relative;
    display: inline-block;
    z-index: 2;
}
.border-radius { border-radius: 1rem; overflow: hidden; }
.main { font-size: 1rem; }

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

</style>
</html>
-------
<html>
<div class="onemoretimeonemorechance border-radius">
<div class="main">
<p><big><big><span style="font-weight: 900">One More Time, One More Chance</span></big></big><br></p>
</div></div>
<style>
.onemoretimeonemorechance {
    position: relative;
    width: 100%;
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    text-align: center;
    font-size: 10pt;
    color: white;
    line-height: 200%;
}
.onemoretimeonemorechance::before {
    content: "";
    position: absolute;
    top: 0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url(../images/4/41/5_Centimeters_per_Second.jpg);
    background-repeat: no-repeat;
    background-position: center 25%;
    background-size: cover;
    filter: saturate(180%);
    z-index: 1;
}
.onemoretimeonemorechance .main{
    position: relative;
    display: inline-block;
    z-index: 2;
}
.border-radius { border-radius: 1rem; overflow: hidden; }
.main { font-size: 1rem; }

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

</style>
</html>
-------
<html>
<div class="Rain border-radius">
<div class="main">
<p><big><big><span style="font-weight: 900">Rain</span></big></big><br></p>
</div></div>
<style>
.Rain {
    position: relative;
    width: 100%;
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    text-align: center;
    font-size: 10pt;
    color: white;
    line-height: 200%;
}
.Rain::before {
    content: "";
    position: absolute;
    top: 0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url(../images/1/1f/The_Garden_of_Words.png);
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: cover;
    filter: saturate(180%);
    z-index: 1;
}
.Rain .main{
    position: relative;
    display: inline-block;
    z-index: 2;
}
.border-radius { border-radius: 1rem; overflow: hidden; }
.main { font-size: 1rem; }

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

</style>
</html>