[html]<style>
/*==================================================
IOS CHARACTER TEMPLATE
==================================================*/
:root{
/* Размеры */
--width:610px;
--gap:12px;
--radius:22px;
--photo-radius:18px;
/* Цвета */
--background:#f5f5f7;
--card:#ffffff;
--border:#e8e6e7;
--accent:#643341;
--text:#1d1d1f;
--secondary:#9b9ba0;
/* Тени */
--shadow:
0 2px 6px rgba(0,0,0,.02),
0 12px 36px rgba(0,0,0,.05);
}
/*==================================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.character{
width:var(--width);
margin:auto;
font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Segoe UI",
sans-serif;
color:var(--text);
}
/*==================================================
HEADER
==================================================*/
.header{
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:8px;
padding:0 0 18px;
margin-bottom:18px;
border-bottom:1px solid var(--border);
}
.header-name{
font-size:31px;
font-weight:700;
letter-spacing:-.04em;
line-height:1;
white-space:nowrap;
}
.nickname{
color:var(--accent);
font-style:italic;
font-weight:500;
}
.header-age{
font-size:13px;
font-weight:500;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--secondary);
white-space:nowrap;
}
/*==================================================
GRID
==================================================*/
.info{
display:grid;
grid-template-columns:
110px
175px
175px
110px;
gap:var(--gap);
margin-bottom:18px;
}
/*==================================================
CARDS
==================================================*/
.card,
.box{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
/*==================================================
TITLES
==================================================*/
.title{
padding:11px;
background:#fafafa;
border-bottom:1px solid var(--border);
font-size:10px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
text-align:center;
color:var(--accent);
}
/*==================================================
VALUES
==================================================*/
.value{
padding:18px 14px;
font-size:13px;
line-height:1.6;
text-align:center;
}
/*==================================================
PHOTOS
==================================================*/
.photo{
aspect-ratio:175 / 190;
border-radius:var(--photo-radius);
overflow:hidden;
}
.photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:.35s;
}
.photo:hover img{
transform:scale(1.04);
}
/*==================================================
SOUNDTRACK
==================================================*/
.music{
display:flex;
justify-content:center;
align-items:center;
padding:18px;
margin-bottom:18px;
font-size:13px;
font-weight:600;
color:var(--accent);
text-align:center;
letter-spacing:.03em;
}
/*==================================================
BIO
==================================================*/
.bio{
padding:28px;
min-height:260px;
font-size:14px;
line-height:1.9;
text-align:justify;
}
/*==================================================
SCROLLBAR
==================================================*/
::-webkit-scrollbar{
width:5px;
}
::-webkit-scrollbar-thumb{
background:var(--accent);
border-radius:10px;
}
</style>
<div class="character">
<div class="header">
<div class="header-name">
HWANG <span class="nickname">HYUNJIN</span>
</div>
<div class="header-age">
// 26 y.o.
</div>
</div>
<hr class="line">
<div class="info">
<!-- Левая карточка -->
<div class="box">
<div class="title">
Внешность
</div>
<div class="value">
hwang hyunjin
</div>
<div class="title">
Профессия
</div>
<div class="value">
stray kids
</div>
</div>
<!-- Фото -->
<div class="box photo">
<img src="https://64.media.tumblr.com/d230604b7e481e75e0da9171d0b90ccf/0a1b0dc1ae893d2c-14/s500x750/63d4d976c71a2845a748c81a4e64b205b6a4825b.gifv">
</div>
<!-- Фото -->
<div class="box photo">
<img src="https://64.media.tumblr.com/ae9c4ab08df355a9bf70332bc0acd1db/0a1b0dc1ae893d2c-58/s500x750/2ff03f77476bccd1203475eafa189131c067435e.gifv">
</div>
<!-- Правая карточка -->
<div class="box">
<div class="title">
Дата рождения
</div>
<div class="value">
20.03.2000
</div>
<div class="title">
Локация
</div>
<div class="value">
Seoul
</div>
</div>
</div>
<!-- Саундтрек -->
<div class="card music">
♪ michael jackson - bad
</div>
<br>
</div>
[/html]