[html]<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
<div style="width:600px;margin:0 auto">
<style>
#ohsehun {margin: auto;
width: 550px;
height: 550px;
border: 2px solid #666;
position: relative;
background: #889194;
border-radius: 10px;
}
#ohsehun .loveme {box-sizing: border-box;
position: absolute;
top: 55px;
text-align: right;
width: 250px;
background: #e13672;
border-radius: 0px 10px 10px 0px;
height: 150px;
object-fit: cover;
/* filter: grayscale(100%); */
display: block;
/* mix-blend-mode: multiply; */
}
#ohsehun .loveme2 {box-sizing: border-box;
position: absolute;
top: 55px;
width: 250px;
background: #6794ab;
border-radius: 0px 10px 10px 0px;
height: 150px;
display: block;
}
#ohsehun .bigworm {box-sizing: border-box;
padding: 15px;
text-align: right;
font-size: 13px;
line-height: 1.3px;
color: #314754;
text-transform: uppercase;
background: #fcfcfc;
width: 250px;
border: 0px;
border-radius: 0px 10px 10px 0px;
position: absolute;
top: 10px;
font-family: 'raleway';
font-weight: bold;
}
#ohsehun .bigworm2 {
padding: 15px;
text-align: left;
font-size: 13px;
line-height: 1.3px;
color: #e1e1e1;
text-transform: uppercase;
background: #11211e;
width: 190px;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 10px;
left: 330px;
font-family: 'raleway';
font-weight: bold;
}
#ohsehun .smolworm {box-sizing: border-box;
padding: 2px;
text-align: left;
font-size: 10px;
color: #000;
background: #fcfcfc;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 60px;
width: 290px;
left: 260px;
text-transform: uppercase;
font-weight: bold;
}
#ohsehun .smolworm2 {box-sizing: border-box;
padding: 2px;
text-align: left;
font-size: 10px;
color: #000;
background: #fcfcfc;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 90px;
width: 290px;
left: 260px;
text-transform: uppercase;
font-weight: bold;
}
#ohsehun .smolworm3 {box-sizing: border-box;
padding: 2px;
text-align: left;
font-size: 10px;
color: #000;
background: #fcfcfc;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 120px;
width: 290px;
left: 260px;
text-transform: uppercase;
font-weight: bold;
}
#ohsehun .smolworm4 {box-sizing: border-box;
padding: 2px;
text-align: left;
font-size: 10px;
color: #000;
background: #fcfcfc;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 150px;
width: 290px;
left: 260px;
text-transform: uppercase;
font-weight: bold;
}
#ohsehun .smolworm5 {box-sizing: border-box;
padding: 2px;
text-align: left;
font-size: 10px;
color: #000;
background: #fcfcfc;
border: 0px;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 180px;
width: 290px;
left: 260px;
text-transform: uppercase;
font-weight: bold;
}
#ohsehun .groovy {box-sizing: border-box;
padding: 10px;
font-size: 13px;
text-align: justify;
color: #000;
border: 0px;
border-radius: 10px;
font-family: 'roboto';
overflow: auto;
position: absolute;
background: #fcfcfc;
border-radius: 10px 0px 0px 10px;
top: 220px;
left: 20px;
width: 510px;
height: 310px;
}
#ohsehun .groovy header {font-size: 16px;
text-align: right;
color: #314754;
text-transform: uppercase;
font-family: 'raleway';
font-weight: bold;
}
#ohsehun ::-webkit-scrollbar {
width: 5px;
}
#ohsehun ::-webkit-scrollbar-track {
background: #f1f1f1;
}
#ohsehun ::-webkit-scrollbar-thumb {
background: #324258;
}
#ohsehun ::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
<div id="ohsehun"><div class="loveme2"></div> <div class="bigworm">хочу видеть</div>
<div class="bigworm2">текст</div>
<img src="https://pp.userapi.com/c844521/v844521419/1c269f/9m9tcbOl4FE.jpg" class="loveme">
<div class="smolworm">Пол</div>
<div class="smolworm2">Возраст</div>
<div class="smolworm3">Раса</div>
<div class="smolworm4">Род деятельности</div>
<div class="smolworm5">Внешность</div>
<div class="groovy"><header>Пожелания</header>
текст
</div>
</div>
</div>
[/html]
[html]<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet"> <div style="width:600px;margin:0 auto"> <style> #ohsehun {margin: auto; width: 550px; height: 550px; border: 2px solid #666; position: relative; background: #889194; border-radius: 10px; } #ohsehun .loveme {box-sizing: border-box; position: absolute; top: 55px; text-align: right; width: 250px; background: #e13672; border-radius: 0px 10px 10px 0px; height: 150px; object-fit: cover; display: block; } #ohsehun .loveme2 {box-sizing: border-box; position: absolute; top: 55px; width: 250px; border-radius: 0px 10px 10px 0px; height: 150px; display: block; } #ohsehun .bigworm {box-sizing: border-box; padding: 15px; text-align: right; font-size: 13px; line-height: 1.3px; color: #314754; text-transform: uppercase; background: #fcfcfc; width: 250px; border: 0px; border-radius: 0px 10px 10px 0px; position: absolute; top: 10px; font-family: 'raleway'; font-weight: bold; } #ohsehun .bigworm2 { padding: 15px; text-align: left; font-size: 13px; line-height: 1.3px; color: #e1e1e1; text-transform: uppercase; background: #11211e; width: 190px; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 10px; left: 330px; font-family: 'raleway'; font-weight: bold; } #ohsehun .smolworm {box-sizing: border-box; padding: 10px; text-align: left; font-size: 11px; color: #000; line-height: 2px; background: #fcfcfc; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 60px; width: 290px; left: 260px; font-family: 'roboto'; text-transform: uppercase; font-weight: bold; } #ohsehun .smolworm2 {box-sizing: border-box; padding: 10px; text-align: left; font-size: 11px; color: #000; line-height: 2px; background: #fcfcfc; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 90px; width: 290px; left: 260px; font-family: 'roboto'; text-transform: uppercase; font-weight: bold; } #ohsehun .smolworm3 {box-sizing: border-box; padding: 10px; text-align: left; font-size: 11px; color: #000; line-height: 2px; background: #fcfcfc; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 120px; width: 290px; left: 260px; font-family: 'roboto'; text-transform: uppercase; font-weight: bold; } #ohsehun .smolworm4 {box-sizing: border-box; padding: 10px; text-align: left; font-size: 11px; color: #000; line-height: 2px; background: #fcfcfc; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 150px; width: 290px; left: 260px; font-family: 'roboto'; text-transform: uppercase; font-weight: bold; } #ohsehun .smolworm5 {box-sizing: border-box; padding: 10px; text-align: left; font-size: 11px; color: #000; line-height: 2px; background: #fcfcfc; border: 0px; border-radius: 10px 0px 0px 10px; position: absolute; top: 180px; width: 290px; left: 260px; font-family: 'roboto'; text-transform: uppercase; font-weight: bold; } #ohsehun .groovy {box-sizing: border-box; padding: 10px; font-size: 13px; text-align: justify; color: #000; border: 0px; border-radius: 10px; font-family: 'roboto'; overflow: auto; position: absolute; background: #fcfcfc; border-radius: 10px 0px 0px 10px; top: 220px; left: 20px; width: 510px; height: 310px; } #ohsehun .groovy header {font-size: 16px; text-align: right; color: #314754; text-transform: uppercase; font-family: 'raleway'; font-weight: bold; } #ohsehun ::-webkit-scrollbar { width: 5px; } #ohsehun ::-webkit-scrollbar-track { background: #f1f1f1; } #ohsehun ::-webkit-scrollbar-thumb { background: #324258; } #ohsehun ::-webkit-scrollbar-thumb:hover { background: #555; } </style> <div id="ohsehun"><div class="loveme2"></div> <div class="bigworm">Хочу видеть</div> <div class="bigworm2">текст</div> <img src="картинка 250 на 150" class="loveme"> <div class="smolworm">Пол</div> <div class="smolworm2">Возраст</div> <div class="smolworm3">Раса</div> <div class="smolworm4">Род деятельности</div> <div class="smolworm5">Внешность на англ</div> <div class="groovy"><header>Пожелания</header> текст </div> </div> </div> [/html]