Шаблон сделан в html
можете использовать любой другой шаблон который понравится
[html]
<style>
/* Общие стили (для адаптивности и скролла) */
.missing-card {
max-width: 500px;
margin: 20px auto;
background: #efeada;
border: 1px solid #829b85;
border-radius: 16px;
padding: 20px 20px 16px;
box-sizing: border-box;
font-family: Arial, sans-serif;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.missing-card .header {
background: #52796c;
color: #efeada;
font-family: 'Yeseva One', serif;
font-size: 36px;
font-weight: 400;
letter-spacing: 6px;
text-transform: uppercase;
padding: 8px 0;
margin: -20px -20px 16px -20px;
border-radius: 16px 16px 0 0;
}
.missing-card .photos {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.missing-card .photo {
width: 120px;
height: 120px;
overflow: hidden;
background: #fff;
border: 1px solid #829b85;
border-radius: 10px;
flex-shrink: 0;
}
.missing-card .photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.missing-card .name {
font-family: 'Yeseva One', serif;
font-size: 24px;
font-weight: 400;
color: #3b584b;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 6px;
}
.missing-card .details {
font-size: 10px;
color: #52796c;
line-height: 1.6;
margin-bottom: 12px;
padding: 0 6px;
}
.missing-card .details strong {
color: #3b584b;
font-weight: bold;
}
.missing-card .description {
background: #f0eada;
border-left: 4px solid #829b85;
padding: 10px 14px;
text-align: justify;
font-size: 13px;
line-height: 1.5;
color: #52796c;
margin-bottom: 14px;
border-radius: 6px;
max-height: 120px;
overflow-y: auto;
scrollbar-width: thin;
}
.missing-card .contacts {
background: #b6c1b7;
color: #efeada;
padding: 10px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.missing-card .contacts span {
font-weight: normal;
font-size: 12px;
color: #efeada;
}
.missing-card .hashtags {
font-size: 10px;
color: #52796c;
margin-top: 10px;
opacity: 0.7;
border-top: 1px dashed #829b85;
padding-top: 8px;
}
@media (max-width: 480px) {
.missing-card .photo {
width: 100px;
height: 100px;
}
}
</style>
<div class="missing-card">
<div class="header">MISSING</div>
<div class="photos">
<div class="photo">
<img src="https://i.pinimg.com/736x/70/e1/d2/70e1d2b97509f96dddc0f7bd6ad566ea.jpg" alt="Фото 1">
</div>
<div class="photo">
<img src="https://i.pinimg.com/736x/dc/76/0b/dc760bf29a26824c47fc56f714753b6a.jpg" alt="Фото 2">
</div>
</div>
<div class="name">Имя Фамилия</div>
<div class="details">
<strong>Возраст:</strong> 25 лет<br>
<strong>Кем приходится:</strong> брат сват<br>
<strong>Похож на:</strong> faceclaime
</div>
<div class="description">
<strong>Был замечен:</strong> 15 июня 2026 года в районе Старого кладбища. Одет в тёмную куртку, светлые джинсы. Если вы видели этого человека, пожалуйста, сообщите по контактам ниже.<br>
(здесь может быть много текста)
</div>
<div class="contacts">
☎️ (555) 123-4567<br>
<span>или напишите в лс</span>
</div>
<div class="hashtags">
#missing #помогитенайти #блок-айленд
</div>
</div>
[/html]
[html]
<style>
/* Общие стили (для адаптивности и скролла) */
.missing-card {
max-width: 500px;
margin: 20px auto;
background: #efeada;
border: 1px solid #829b85;
border-radius: 16px;
padding: 20px 20px 16px;
box-sizing: border-box;
font-family: Arial, sans-serif;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.missing-card .header {
background: #52796c;
color: #efeada;
font-family: 'Yeseva One', serif;
font-size: 36px;
font-weight: 400;
letter-spacing: 6px;
text-transform: uppercase;
padding: 8px 0;
margin: -20px -20px 16px -20px;
border-radius: 16px 16px 0 0;
}
.missing-card .photos {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.missing-card .photo {
width: 120px;
height: 120px;
overflow: hidden;
background: #fff;
border: 1px solid #829b85;
border-radius: 10px;
flex-shrink: 0;
}
.missing-card .photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.missing-card .name {
font-family: 'Yeseva One', serif;
font-size: 24px;
font-weight: 400;
color: #3b584b;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 6px;
}
.missing-card .details {
font-size: 10px;
color: #52796c;
line-height: 1.6;
margin-bottom: 12px;
padding: 0 6px;
}
.missing-card .details strong {
color: #3b584b;
font-weight: bold;
}
.missing-card .description {
background: #f0eada;
border-left: 4px solid #829b85;
padding: 10px 14px;
text-align: justify;
font-size: 13px;
line-height: 1.5;
color: #52796c;
margin-bottom: 14px;
border-radius: 6px;
max-height: 120px;
overflow-y: auto;
scrollbar-width: thin;
}
.missing-card .contacts {
background: #b6c1b7;
color: #efeada;
padding: 10px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.missing-card .contacts span {
font-weight: normal;
font-size: 12px;
color: #efeada;
}
.missing-card .hashtags {
font-size: 10px;
color: #52796c;
margin-top: 10px;
opacity: 0.7;
border-top: 1px dashed #829b85;
padding-top: 8px;
}
@media (max-width: 480px) {
.missing-card .photo {
width: 100px;
height: 100px;
}
}
</style>
<div class="missing-card">
<div class="header">MISSING</div>
<div class="photos">
<div class="photo">
<img src="https://i.pinimg.com/736x/70/e1/d2/70e1d2b97509f96dddc0f7bd6ad566ea.jpg" alt="Фото 1">
</div>
<div class="photo">
<img src="https://i.pinimg.com/736x/dc/76/0b/dc760bf29a26824c47fc56f714753b6a.jpg" alt="Фото 2">
</div>
</div>
<div class="name">Имя Фамилия</div>
<div class="details">
<strong>Возраст:</strong> 25 лет<br>
<strong>Кем приходится:</strong> брат сват<br>
<strong>Похож на:</strong> faceclaime
</div>
<div class="description">
<strong>Был замечен:</strong> 15 июня 2026 года в районе Старого кладбища. Одет в тёмную куртку, светлые джинсы. Если вы видели этого человека, пожалуйста, сообщите по контактам ниже.<br>
(здесь может быть много текста)
</div>
<div class="contacts">
☎️ (555) 123-4567<br>
<span>или напишите в лс</span>
</div>
<div class="hashtags">
#missing #помогитенайти #блок-айленд
</div>
</div>
[/html]







