[html]<link href="https://fonts.googleapis.com/css?family=Istok+Web:400,700|Source+Code+Pro|Libre+Baskerville:400i" rel="stylesheet">
<style>
#masks {
position: relative;
margin: 20px auto 0px;
width: 350px;
background: black;
overflow: hidden;
padding: 50px;
padding-bottom: 250px;
}
#masks img {
position: absolute;
object-fit: cover;
height: 200px;
width: 450px;
bottom: 0px;
overflow: hidden;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
left: 0px;
}
.mimgover {
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(229,229,229,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(229,229,229,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(229,229,229,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00e5e5e5',GradientType=0 );
position: absolute;
height: 200px;
width: 450px;
bottom: 0px;
left: 0px;
}
.mline1 {
height:200px;
width: 1px;
background: #ff0000;
position: absolute;
right: 25px;
bottom: 0px;
}
#masks quote {
display: block;
font-family: istok web;
position: absolute;
color: #ff0000;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 10px;
width: 300px;
text-align: right;
bottom: 0px;
right: 35px;
line-height: 140%;
font-weight: 700;
z-index: 1;
height: 200px;
}
.mabox {
width: 450px;
height: 200px;
mix-blend-mode: screen;
position: absolute;
bottom: 0px;
right: 0px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(159,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(159,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(159,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#9f0000',GradientType=0 );
}
#masks quote2 {
color: #fff;
font-size: 8px;
text-transform: lowercase;
text-align: right;
line-height: 230%;
letter-spacing: 4px;
opacity: 0.5;
display: block;
font-style: italic;
}
#masks text {
position: relative;
color: #727272;
width: 350px;
height: auto;
font-size: 11px;
font-family: istok web;
line-height: 180%;
text-align: justify;
display: block;
}
#masks b {
color: white;
opacity: 0.6;
}
#masks text::-webkit-scrollbar{width:1px}
#masks text::-webkit-scrollbar-track{background:#000!important;border:none!important}
#masks text::-webkit-scrollbar-thumb{background: rgba(114, 114, 114,0.3)}
</style>
<div id="masks">
<img src="https://ic.pics.livejournal.com/shakko_kitsune/2710882/1684465/1684465_original.jpg">
<div class="mimgover"></div>
<div class="mline1"></div><div class="mabox"></div>
<quote>it is all about choices
<quote2>Eren Yeager - Levi Ackerman</quote2>
</quote>
<text>
В жизни каждого из нас каждый день происходит сотня выборов и не бывает их хороших или плохих. Просто каждый из выборов создает другую жизнь, другой неповторимый мир. Но каждая жизнь заслуживает того, чтобы ее прожить, каждая тропа — чтобы быть пройденной.
</text>
</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]
Отредактировано Levi Ackerman (2021-04-01 00:49:12)
