Код:
<!--HTML--><link href="https://fonts.googleapis.com/css?family=Lato:400,700i,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<div id="can">
<div id="can-pic" style="background-image: url(https://i.imgur.com/5LLEW5R.jpg)"></div>
<div id="can-line-text">Игры для взрослых - это те игры, которые заканчиваются плохо.
</div>
</div>
<style>
#can {
height: 400px;
width: 600px;
background: #fff;
margin: auto;
position: relative;
}
#can-pic {
height: 400px;
width: 300px;
background-size: cover;
background-position: center;
position: absolute;
}
#can-line-a,
#can-line-b {
height: 30px;
text-align: right;
background: #fff;
position: absolute;
right: 300px;
line-height: 30px;
text-align: center;
padding: 0 8px;
font-family: lato;
font-weight: 900;
text-transform: uppercase;
font-style: italic;
font-size: 10px;
letter-spacing: 4px;
}
#can-line-a {
top: 280px;
color: #40706F
}
#can-line-b {
top: 320px;
color: #A1584F
}
#can-line-text {
height: 300px;
width: 200px;
background: none;
top: 50px;
right: 50px;
position: absolute;
overflow: auto;
font-family: lora;
text-align: justify;
font-size: 11px;
line-height: 14px;
color: #333;
padding-right: 6px;
}
#can-line-text b {
color: #40706F
}
#can-line-text::-webkit-scrollbar {
width: 5px;
border: 0px solid transparent;
background: #fff
}
#can-line-text::-webkit-scrollbar-thumb {
background: #A1584F;
border: 2px solid #fff;
}
#can-line-text::-webkit-scrollbar-track {
background: #fff;
}
</style>Отредактировано Ayden Kane (2020-05-16 22:44:54)
