|
|
| 1번째 줄: |
1번째 줄: |
| <html>
| |
| <div class="kiminokoe border-radius">
| |
| <div class="main">
| |
| <big><big><span style="font-weight: 900">너의 목소리</span></big></big>
| |
| </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.75) 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">
| |
| <big><big><span style="font-weight: 900">One More Time, One More Chance</span></big></big>
| |
| </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.75) 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">
| |
| <big><big><span style="font-weight: 900">Rain</span></big></big
| |
| </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.75) 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>
| |