<!--HTML-->
<style type='text/css'>
.sp-app ::-webkit-scrollbar { width: 5px; }
.sp-app ::-webkit-scrollbar-track { background-color: #a29385; }
.sp-app ::-webkit-scrollbar-thumb { background-color: #a56c5a; }
.sp-app {
width: 450px;
height: 400px;
margin: 10px auto;
border: 1px solid #a3998e;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.12), 0px 0px 5px -40px rgba(0, 0, 0, 0.25);
background-image: url("https://image.ibb.co/nJTVkq/image.png");
padding: 10px 10px 13px 10px;
position: relative;
overflow: hidden; }
.sp-app input[type=checkbox] {
position: absolute;
left: -9999px;
top: -9999px;
display: none; }
.sp-app label {
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
background-color: #a56c5a;
padding: 20px 10px;
outline: 1px solid #c1b6ac;
color: #c1b6ac;
font-family: Playfair Display;
font-family: 12px;
outline-offset: -5px;
display: block;
cursor: crosshair; }
.sp-app .top {
width: 450px;
padding: 30px;
box-sizing: border-box;
background-image : url("http://funkyimg.com/i/2MBpD.png");
background-repeat: no-repeat;}
.sp-app .imgcon {
overflow: hidden;
position: absolute;
top: 124px;
left: 10px;
z-index: 3;
height: 288px;
width: 450px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.sp-app .imgcon img {
width: 450px;
height: 288px;
object-fit: cover;
z-index: 3;
position: absolute;
border: 1px solid #a4988c;
top: 0px;
left: 0px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.sp-app input[type=checkbox]:checked ~ .imgcon img {
top: 500px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease; }
.sp-app input[type=checkbox]:checked ~ .imgcon {
z-index: -3; }
.sp-app .insides {
width: 448px;
border: 1px solid #a3998e;
height: 286px;
display: flex;
z-index: 3; }
.sp-app .insides .side {
width: 150px;
display: flex;
align-items: center;
align-content: center;
flex-flow: column nowrap;
margin: 10px;}
.sp-app .insides .side img {
width: 150px;
height: 100px;
top: 0;
left: 0;
z-index: 1;
position: relative;
object-fit: cover;
border: 1px solid #a3998e;}
.sp-app .insides .side .info {
width: 140px;
border: 1px solid #a3998e;
padding: 5px;
text-align: center;
line-height: 120%;
font-family: Spectral;
font-family: 9px; }
.sp-app .insides .right {
width: 245px;
border: 1px solid #a3998e;
height: 245px;
padding: 10px;
margin-top: 10px;
font-size: 12px'
color: #080805;
text-align: justify;
font-family: Playfair Display;
overflow: auto; }
.sp-app .insides .right b,
.sp-app .insides .right i,
.sp-app .insides .right u { color: #88503e; }
</style>
<div class='sp-app'>
<div class='top'><label for='toggle-1'>я очень жду... </label></div>
<input type='checkbox' id='toggle-1'>
<div class='imgcon'>
<img src='http://funkyimg.com/i/2MBr3.png' />
</div>
<div class='insides'>
<div class='side'>
<img src='http://funkyimg.com/i/2MBqk.gif' />
<div class='info'> <b>ИМЯ</b>
<br>дата рождения, возраст
<br><br>профессия</div>
<br> <div class='info'><i> желаемая внешность</i></div>
</div>
<div class='right'>
«Every atom in your body came from a star that exploded. And, the atoms in your left hand probably came from a different star than your right hand. It really is the most poetic thing I know about physics: You are all <b>stardust</b>. You couldn’t be here if stars hadn’t exploded, because the elements - the carbon, nitrogen, oxygen, iron, all the things that matter for evolution and for life - weren’t created at the beginning of time. They were created in the nuclear furnaces of stars, and the only way for them to get into your body is if those stars were kind enough to explode. So, forget Jesus. <i>The stars died</i> so that you could be here today.»
</div>
</div>
</div>
</div>
[*code]<!--HTML-->
<div class='sp-app'>
<div class='top'><label for='toggle-число'>я очень жду ...</label></div><input type='checkbox' id='toggle-число'>
<div class='imgcon'>
<img src='Ваше изображение 450х288' />
</div><div class='insides'>
<div class='side'>
<img src='Ваша гиф 150х100px' />
<div class='info'> <b>ИМЯ</b>
<br>дата рождения, возраст
<br><br>профессия</div>
<br> <div class='info'><i> желаемая внешность</i></div>
</div>
<div class='right'>
Ваш текст.
</div> </div> </div> </div> [/*code]
[*code]<!--HTML--><div class='sp-app'>
<div class='top'><label for='toggle-ваше число, равное номеру поста'>я очень жду ...</label></div><input type='checkbox' id='toggle-ваше число, равное номеру поста'>
<div class='imgcon'>
<img src='Ваше изображение 450х288' />
</div><div class='insides'>
<div class='side'>
<img src='Ваша гиф 150х100px' />
<div class='info'> <b>ИМЯ</b>
<br>дата рождения, возраст
<br><br>профессия</div>
<br> <div class='info'><i> желаемая внешность</i></div>
</div>
<div class='right'>
Ваш текст.
</div> </div> </div> </div> [/*code]<b></b> - жирный текст;
<u></u> - подчеркнутый текст;
<i></i> - курсив;
<br> - новая строка;
НЕ ЗАБЫВАЙТЕ УБИРАТЬ ЗВЕЗДОЧКИЕсли у вас проблемы с оформлением заявки [например, нет возможности обрезать картинки], вы можете попросить помощи у амс.
