личная страничка

Поделиться12026-02-11 06:57:12

Автор: queenie
Администратор
Уважение: +0
Сообщений: 12

[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.allaboutme-wrapper {
width: 500px;
margin: 40px auto;
font-family: 'Poppins', sans-serif;
background: linear-gradient(180deg, #e8d9ff, #f2e9ff);
padding: 30px;
border-radius: 20px;
}

.allaboutme-title {
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 25px;
}

.aam-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.aam-box {
background: white;
border-radius: 18px;
padding: 18px 20px 20px;
border: 2px solid #000;
}

.aam-label {
display: inline-block;
background: linear-gradient(90deg, #c6a6ff, #b18cff);
padding: 6px 18px;
border-radius: 20px;
font-weight: 600;
margin-bottom: 10px;
}

.row {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
padding: 8px 0;
}

.row span:first-child {
font-weight: 600;
}

.editable {
min-width: 120px;
text-align: right;
outline: none;
border-bottom: 1px dashed #ccc;
padding-bottom: 2px;
}

/* ======= БЛОК ДРУЗЕЙ — НОВАЯ ВЕРСИЯ ======= */
.friend-row {
display: grid;
grid-template-columns: 40px 1fr; /* фиксированная колонка под аватар + текст */
align-items: center;
gap: 12px;
margin-bottom: 14px;
}

/* ФИКСИРОВАННЫЙ АВАТАР */
.friend-avatar {
width: 40px;
height: 40px;
min-width: 40px; /* ВАЖНО: не даёт сжиматься */
min-height: 40px;
border-radius: 50%;
border: 1px solid #000;
background: #f2f2f2;
overflow: hidden;
}

/* Подгонка картинки БЕЗ влияния на размер */
.friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* ТЕКСТ ИМЕНИ — БЕЗ ПУНКТИРА */
.friend-name {
font-size: 10px;
font-weight: 500;
}

/* ======= ФОТО В СТРОКЕ COUPLE ======= */
.couple-row {
display: grid;
grid-template-columns: 40px 1fr; /* как у друзей */
align-items: center;
gap: 12px;
}

/* фиксированный аватар партнёра */
.couple-avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
border: 1px solid #000;
background: #f2f2f2;
overflow: hidden;
}

.couple-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.couple-name {
font-size: 10px;
font-weight: 500;
}

/* ======= ТВОЁ ФОТО ======= */
.photo-placeholder {
width: 180px;
height: 220px;
border: 2px solid #000;
border-radius: 14px;
background: #f2f2f2;
overflow: hidden;
}

.photo-placeholder img {
width: 100%;
height: 100%;
object-fit: cover; /* подгонка без искажений */
}

.bottom-box {
grid-column: 1 / 3;
}

.bottom-content {
display: flex;
gap: 20px;
}

.info-rows {
flex: 1;
}

.small-note {
font-size: 10px;
text-align: right;
margin-bottom: 10px;
}
</style>

<div class="allaboutme-title">Hwang Yeji / Хван Йеджи</div>

<div class="aam-box">
<div class="aam-label">Me</div>
<div class="row"><span>Place of Birth</span><span contenteditable="true" class="editable">—</span></div>
<div class="row"><span>Birthday, age</span><span contenteditable="true" class="editable">—</span></div>
<div class="row"><span>Nickname</span><span contenteditable="true" class="editable">—</span></div>
<div class="row"><span>Group</span><span contenteditable="true" class="editable">—</span></div>
<div class="row"><span>Faculty</span><span contenteditable="true" class="editable">—</span></div>
<div class="row">
<span><br>♥:</span>
<div class="couple-row">
<div class="couple-avatar">
<img src="https://i.pinimg.com/1200x/57/6d/d2/576dd2d8ec3d4e124dc93e3bd27c37cd.jpg">
</div>
<div class="couple-name"><span contenteditable="true" class="editable">—</span></div>
</div>
</div>

</div>

<div class="aam-box">
<div class="aam-label">Close Friends</div>

<div class="friend-row">
<div class="friend-avatar">
<img src="https://i.pinimg.com/736x/b9/59/76/b9597634ca173042f61bd76179591876.jpg">
</div>
<div class="friend-name">shin ryujin / itzy</div>
</div>

<div class="friend-row">
<div class="friend-avatar">
<img src="https://i.pinimg.com/1200x/5e/1d/ab/5e1dab57bc54ff48f0fb4a23a6ec6fa5.jpg">
</div>
<div class="friend-name">yoo jimin / aespa</div>
</div>

<div class="friend-row">
<div class="friend-avatar">
<img src="https://i.pinimg.com/736x/62/1f/18/621f18492c67cb768398fd95b7f757ea.jpg">
</div>
<div class="friend-name">hwang hyunjin / stray kids</div>
</div>

</div>
</div>

<div class="aam-box bottom-box">
<div class="aam-label">Message Board</div>
<div class="small-note"><div class="aam-label">
♫ itzy - imaginary friend</div>
</div>

<div class="photo-placeholder">
<img src="https://i.pinimg.com/736x/b9/0b/61/b90b61d3f848a3f891fdd1e27096b097.jpg">
</div>

<div class="info-rows">
<div class="row"><span>Likes</span><span>__________</span></div>
<div class="row"><span>Dislikes</span><span>__________</span></div>
<div class="row"><span>Hobbies</span><span>танцы</span></div>
<div class="row"><span>Favourite Place</span><span>__________</span></div>
<div class="row"><span>Favourite Food</span><span>__________</span></div>
<div class="row"><span>Charm</span><span>__________</span></div>
</div>
</div>
</div>

</div>
</div>
[/html]

0

Поделиться22026-02-22 22:46:50

Автор: queenie
Администратор
Уважение: +0
Сообщений: 12

[html]<style>
:root{
--bg-image: url(https://i.pinimg.com/1200x/8c/55/33/8c5 … d9ab2d.jpg);
--bg-opacity: 0.3;
--accent: #595b6e;
--box-bg: rgba(255,255,255,0.85);
}

.bingo-wrap{
position: relative;
max-width: 720px;
margin: 20px auto;
padding: 40px;
border-radius: 25px;
font-family: 'Oswald', sans-serif;
overflow: hidden;
}

.bingo-wrap::before{
content:"";
position:absolute;
inset:0;
background-image: var(--bg-image);
background-size: cover;
background-position:center;
opacity: var(--bg-opacity);
z-index:0;
}

.bingo-inner{
position:relative;
z-index:2;
}

.bingo-title{
text-align:center;
font-size:28px;
letter-spacing:2px;
color: var(--accent);
margin-bottom:10px;
}

.bingo-sub{
text-align:center;
font-size:14px;
margin-bottom:25px;
color:#555;
}

.bingo-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:10px;
}

.bingo-item{
background: var(--box-bg);
border:2px solid var(--accent);
border-radius:14px;
padding:12px;
font-size:13px;
text-align:center;
min-height:70px;
display:flex;
align-items:center;
justify-content:center;
}
</style>

<div class="bingo-title">МОЯ ПОДГОТОВКА К ВЕСНЕ</div>
<div class="bingo-sub">
Перед пунктом, который выполнен, копируем и ставим - ✅
</div>

<div class="bingo-item">⬜ Составить список дел на весну</div>
<div class="bingo-item">⬜ Купить или поставить дома живые цветы</div>
<div class="bingo-item">⬜ Сделать генеральную уборку</div>
<div class="bingo-item">⬜ Приготовить десерт или выпечку</div>
<div class="bingo-item">⬜ Выбрать книгу/фильм/сериал для просмотра на весну</div>
<div class="bingo-item">⬜ Убрать все новогодние украшения</div>
<div class="bingo-item">⬜ Изменить что-то в своем образе</div>
<div class="bingo-item">⬜ Купить что-то из весеннего декора для дома</div>
<div class="bingo-item">⬜ Запланировать отпуск или поездку</div>
<div class="bingo-item">⬜ Добавить витамины в рацион, изменить питание</div>
<div class="bingo-item">⬜ Заняться спортом</div>
<div class="bingo-item">⬜ Найти новое атмосферное место у себя в городе</div>
<div class="bingo-item">⬜ Подготовить демисезонную одежду/обувь</div>
<div class="bingo-item">⬜ Купить новый парфюм</div>
<div class="bingo-item">⬜ Позаботиться о своем ментальном здоровье</div>
<div class="bingo-item">⬜ Больше проводить времени на свежем воздухе</div>

</div>
</div>
</div>[/html]

0

Поделиться32026-02-25 23:29:26

Автор: queenie
Администратор
Уважение: +0
Сообщений: 12

<div class="profile_plashka" style="background: linear-gradient(40deg, #D5D5D5, #E5E5E5);"><plashka_text style="color: #000000; opacity: 0.3;">you're the fuckin' acid to my alkaline<br>you run middle finger up and down my spine</plashka_text></div> <div class="profile_bottom" style="content: url(https://i.imgur.com/bbX1AcS.png);"></div>

0

Поделиться42026-02-26 04:11:09

Автор: queenie
Администратор
Уважение: +0
Сообщений: 12

[html]<style>
:root{
--layout-width:500px;
--halo-color-1:#9ec5ff;
--halo-color-2:#5b7fff;
--panel-bg:rgba(18,18,22,0.96);
--accent:#7aa8ff;
--glass:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.15);
--text:#f2f2f7;
--muted:#b8b8c2;
--anim:0.9s cubic-bezier(.19,1,.22,1);
}

/* ЧЁРНАЯ ПАНЕЛЬ */
.ios-panel{
width:var(--layout-width);
margin:100px auto;
background:var(--panel-bg);
border-radius:48px;
padding:55px;
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,sans-serif;
position:relative;

box-shadow:
0 30px 50px rgba(0,0,0,.35),
0 0 20px 15px rgba(122,168,255,0.18);
}

/* ===== БРАУЗЕР ===== */

.browser{
display:flex;
align-items:center;
gap:14px;
margin-bottom:22px;
padding:12px 18px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:22px;
backdrop-filter:blur(20px);
}

.tab{
background:var(--glass);
padding:8px 18px;
border-radius:20px;
border:1px solid var(--border);
font-size:12px;
color:var(--muted);
transition:var(--anim);
}

.tab.active{
background:var(--accent);
color:#000;
border-color:var(--accent);
}

.mac-buttons{
display:flex;
gap:6px;
margin-right:8px;
position:absolute;
top:24px;
}

.mac-buttons span{
width:10px;
height:10px;
border-radius:50%;
}

.mac-buttons span:nth-child(1){background:#ff5f57;}
.mac-buttons span:nth-child(2){background:#ffbd2e;}
.mac-buttons span:nth-child(3){background:#28c840;}

.url{
margin:0 auto 30px auto;
background:var(--glass);
padding:12px 26px;
border-radius:22px;
border:1px solid var(--border);
font-size:13px;
color:var(--muted);
backdrop-filter:blur(10px);
}

/* ===== ВЕРХНИЙ БЛОК ===== */

.top-section{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:25px;
margin-top:40px;
margin-bottom:35px;
}

.left-col{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
width:140px;
flex-shrink:0;
}

.center-col{
flex:1;
display:flex;
flex-direction:column;
gap:15px;
min-width:0;
}

.top-photos{
display:flex;
flex-direction:column;
gap:14px;
width:70px;
flex-shrink:0;
margin-top:-20px;
}

.photo img{
transition:var(--anim);
}

.photo:hover img{
transform:translateY(-6px) scale(1.05);
filter:grayscale(0%);
}

/* ===== АВАТАР ===== */
.avatar-wrap{
position:relative;
width:140px;
flex-shrink:0;
aspect-ratio:1/1;
}

.avatar-wrap::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, var(--halo-color-1), var(--halo-color-2));
filter:blur(30px);
opacity:.8;
}

.avatar{
position:absolute;
inset:0;
border-radius:50%;
overflow:hidden;
}

.avatar img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:var(--anim);
}

.avatar img:hover{
transform:scale(1.05);
}

/* ===== ИНФО БЛОК ===== */
.main-info{
flex:1;
display:flex;
flex-direction:column;
gap:18px;
min-width:0;
}

.name{
font-size:30px;
color:var(--accent);
font-weight:600;
display:flex;
align-items:center;
gap:10px;
}

.lock-icon{
font-size:16px;
opacity:.6;
transition:var(--anim);
}

.lock-icon:hover{
opacity:1;
transform:scale(1.1);
}

.nick
{
font-size:14px;
}

.info{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
padding:14px 18px;
border-radius:22px;
font-size:13px;
line-height:1.6;
color:var(--muted);
backdrop-filter:blur(10px);
}

.personality{
position:absolute;
bottom:-45px;
left:50%;
transform:translateX(-50%);
background:var(--glass);
border:1px solid var(--border);
padding:8px 16px;
border-radius:20px;
font-size:12px;
white-space:nowrap;
}

.quote-bubble{
margin:35px 0 20px 0;
padding:18px;
border-radius:28px;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
font-size:11px;
line-height:1.6;
color:var(--text);
backdrop-filter:blur(20px);
transition:var(--anim);
}

.quote-bubble:hover{
background:rgba(255,255,255,0.1);
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.5);
}

.card{
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
border-radius:28px;
padding:18px;
backdrop-filter:blur(20px);
}

/* ===== ПРАВЫЕ ФОТО ===== */

.photo{
position:relative;
width:85px;
aspect-ratio:3/4;
}

.photo::before{
content:"";
position:absolute;
inset:0;
border-radius:26px;
background:radial-gradient(
circle at 30% 30%,
var(--halo-color-1),
var(--halo-color-2)
);
filter:blur(25px);
opacity:.6;
z-index:0;
}

.photo img{
position:relative;
width:100%;
height:100%;
filter:grayscale(100%);
object-fit:cover;
border-radius:26px;
z-index:1;
}

/* ===== ЭМОДЗИ ===== */

.emoji-bubble{
background:var(--glass);
border:1px solid var(--border);
border-radius:30px;
padding:10px 20px;
display:flex;
gap:15px;
width:fit-content;
align-self:center;
margin-bottom:40px;
}

.emoji-bubble img{
width:15px;
height:15px;
object-fit:contain;
}

/* ===== ПАРА ===== */

.partner{
position:relative;
height:175px;
}

.partner-name{
text-align:center;
color:var(--accent);
transition:var(--anim);
}

.partner img{
width:140px;
aspect-ratio:3/4;
object-fit:cover;
border-radius:25px;
filter:grayscale(100%);
border:1px solid var(--border);
transition:var(--anim);
}

.partner img:hover{
transform:translateY(-6px) scale(1.03);
box-shadow:0 15px 40px rgba(0,0,0,.5);
filter:grayscale(0%);
}

.partner:hover .partner-name{
letter-spacing:1px;
}

.partner-wrap{
position:relative;
display:flex;
align-items:flex-start;
gap:30px;
}

.mini-comments{
height:160px; /* уменьшаем высоту */
width:290px;
position:absolute;
right:0;
top:0;

display:flex;
flex-direction:column;
gap:10px;

padding:20px;
border-radius:28px;

background:rgba(255,255,255,0.06);
border:1px solid var(--border);
backdrop-filter:blur(20px);

transition:var(--anim);
}

.comments-header{
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:3px;
}

.comment-line{
background:rgba(255,255,255,0.08);
border:1px solid var(--border);
border-radius:16px;
padding:6px 10px;

font-size:10px;
line-height:1.3;

display:flex;
gap:5px;
flex-wrap:wrap;
}

.comment-author{
color:var(--accent);
font-weight:500;
}

.comment-text{
color:var(--text);
opacity:.85;
}

.mini-comments:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.1);
}

/* ===== ПЛЕЕР ===== */

.player{
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
border-radius:28px;
backdrop-filter:blur(20px);

display:flex;
flex-direction:column;
gap:15px;

transition:var(--anim);
margin-bottom:35px;

flex:0 0 260px;
padding:16px; /* оставить только это */
}

.player:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.1);
}

.track{
display:flex;
align-items:center;
gap:15px;
}

.cover{
width:60px;
height:60px;
border-radius:18px;
overflow:hidden;
flex-shrink:0;
}

.cover img{
width:100%;
height:100%;
object-fit:cover;
}

.track-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}

.track-title{
font-size:14px;
color:var(--text);
font-weight:500;
}

.track-artist{
font-size:12px;
color:var(--accent);
}

.play-btn{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--accent);
color:#000;
cursor:pointer;
transition:var(--anim);
box-shadow:0 0 15px rgba(122,168,255,0.5);
}

.play-btn:hover{
transform:scale(1.1);
}

.media-row{
display:flex;
gap:25px;
align-items:stretch;
margin-bottom:40px;
}

.player{
display:flex;
flex-direction:column;
justify-content:center;
margin-top:35px;
}

.pin-widget{
position:relative;
flex:1;
min-height:160px;
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
transition:var(--anim);
}

.pin-widget img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.9);
transition:var(--anim);
}

.pin-widget:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.pin-widget:hover img{
transform:scale(1.05);
filter:brightness(1);
}

/* ===== ДРУЗЬЯ ===== */

.friends{
display:flex;
justify-content:center;
color:var(--accent);
flex-wrap:wrap;
gap:15px;
margin:20px 0 35px 0;
}

.friend{
text-align:center;
font-size:11px;
}

.friend img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
filter:grayscale(100%);
border:1px solid var(--border);
transition:var(--anim);

}

.friend img:hover{
transform:translateY(-6px) scale(1.1);
filter:grayscale(0%);
box-shadow:0 10px 25px rgba(0,0,0,.5);
}

.followers-title{
text-align:center;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:18px;
margin-top:45px;
opacity:.7;
}

.friend div{
transition:var(--anim);
opacity:.6;
}

.friend:hover div{
opacity:1;
color:var(--accent);
}

/* ===== ЗВЁЗДЫ ===== */

.stars{
position:absolute;
bottom:-75px;
left:53%;
transform:translateX(-50%);
font-size:18px;
letter-spacing:3px;
white-space:nowrap;
}

.star{
color:rgba(255,255,255,0.3);
}

.star.filled{
color:var(--accent);
}

/* ===== КНОПКИ ===== */

.actions,
.top-actions{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:20px auto 40px auto;
padding:10px 20px;
width:fit-content;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);
border:1px solid var(--border);
border-radius:40px;
}

.btn{
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
font-size:15px;
transition:var(--anim);
}

.btn:hover{
background:var(--accent);
color:#000;
transform:scale(1.1);
}

.home-indicator{
width:120px;
height:5px;
border-radius:10px;
background:rgba(255,255,255,0.25);
margin:50px auto 0 auto;
opacity:.5;
margin-top:28px;
}

.metric{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:8px 14px;
min-width:65px;
border-radius:40px;
background:rgba(122,168,255,0.12);
backdrop-filter:blur(25px);
border:1px solid rgba(122,168,255,0.35);
color:var(--accent);
transition:var(--anim);
}

.metric-num{
font-size:14px;
font-weight:600;
line-height:1;
}

.metric-label{
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
opacity:.6;
}

.metric:hover{
background:rgba(122,168,255,0.2);
border-color:var(--accent);
transform:translateY(-4px);
box-shadow:0 0 25px rgba(122,168,255,.35);
}

</style>

<div class="browser">
<div class="tab">global</div>
<div class="tab active">profile</div>
<div class="tab">media</div>
</div>

<div class="url">www.academy-social.com/shinyuna</div>

<div class="actions">
<div class="metric">
<div class="metric-num">1.2K</div>
<div class="metric-label">followers</div>
</div>

<div class="metric">
<div class="metric-num">342</div>
<div class="metric-label">following</div>
</div>
<div class="btn">✚</div>
<div class="btn">💬</div>
<div class="btn">✖</div>
<div class="btn">၊၊||၊</div>
<div class="btn">♡</div>
</div>

<div class="avatar-wrap">
<div class="avatar">
<img src="https://i.pinimg.com/736x/4d/90/63/4d9063c4c15c1d30c512d909a8521ae6.jpg">
</div>
<div class="personality">♐︎ Стрелец • ENFP</div>
<div class="stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
</div>
</div>

<div class="main-info">
<div class="name"> Shin Yuna
<span class="lock-icon">🔒</span>
</div>
<div class="nick">@shin yuna</div>
<div class="info">
факультет хореографии
команда черлидеров
09.12.2003
</div>
<div class="emoji-bubble">
<img src="https://i.imgur.com/bTacNPQ.png">
<img src="https://i.imgur.com/WmJjrk1.png">
<img src="https://i.imgur.com/zCfoO7O.png">
<img src="https://i.imgur.com/LwFnORM.png">
<img src="https://i.imgur.com/5hht3CC.png">
</div>
</div>

<div class="quote-bubble card">
лучший игрок в мафию; люблю мятный шоколад и пиццу; ходить по магазинам, в хорошие рестораны, готовить вкусные тосты; не умею плавать; любимый цвет розовый; очень открытый человек; умею играть на флейте; из-за плохого зрения не могу носить цветные линзы; мечтаю стать актрисой
</div>

<div class="player card">
<div class="track">
<div class="cover">
<img src="https://i.pinimg.com/736x/e1/82/a9/e182a9952b4874e48706df44b92c655c.jpg">
</div>
<div class="track-info">
<div class="track-title">diet pepsi</div>
<div class="track-artist">addison rae</div>
</div>
<div class="play-btn">▶</div>
</div>
</div>
<div class="pin-widget">
<img src="https://i.pinimg.com/736x/12/ee/73/12ee730b107563750de58e4443e15fa7.jpg">
<div class="pin-overlay">inspiration</div>
</div>
</div>

<div class="partner-wrap">
<div class="partner">
<img src="https://i.pinimg.com/1200x/1d/b5/aa/1db5aa77ab5315168c1adc9e9c93952f.jpg">
<div class="partner-name">♥︎ jackson wang</div>
</div>

<div class="comments-header">latest comments</div>

<div class="comment-line">
<span class="comment-author">@yeji:</span>
ты сегодня была потрясающей 🩰
</div>

<div class="comment-line">
<span class="comment-author">@kai:</span>
репетиция в 7?
</div>

<div class="comment-line">
<span class="comment-author">@ryujin:</span>
розовый тебе очень идёт 🤍
</div>

<div class="comment-line">
<span class="comment-author">@wonyoung:</span>
горжусь тобой, ты сияешь ✨
</div>

</div>
</div>

<div class="followers-title">followers:</div>
<div class="friends">
<div class="friend"><img src="https://i.pinimg.com/736x/cc/99/0c/cc990cde82d5e134544420ebaa209029.jpg"><div>ryujin</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/a6/b3/fe/a6b3fe8c181d721c9947375e3e152037.jpg"><div>yeji</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/35/d5/55/35d5557f95a7053312dea47105bc7e9c.jpg"><div>wonyoung</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/f9/c1/9c/f9c19c648faee84481702c9e9c7ed1fd.jpg"><div>yujin</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/dc/da/9b/dcda9bb22258ffbe889a767ef8d44af9.jpg"><div>kai</div></div>
<div class="friend"><img src="https://i.pinimg.com/736x/a2/03/e5/a203e58fa723162b7298d10e422d42f9.jpg"><div>chaeryoung</div></div>
</div>

</div>[/html]

0

Поделиться52026-02-27 00:56:11

Автор: queenie
Администратор
Уважение: +0
Сообщений: 12

[html]<style>
:root{
--layout-width:500px;
--halo-color-1:#9ec5ff;
--halo-color-2:#5b7fff;
--panel-bg:rgba(18,18,22,0.96);
--accent:#7aa8ff;
--glass:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.15);
--text:#f2f2f7;
--muted:#b8b8c2;
--anim:0.9s cubic-bezier(.19,1,.22,1);
}

/* ЧЁРНАЯ ПАНЕЛЬ */
.ios-panel{
width:var(--layout-width);
margin:100px auto;
background:var(--panel-bg);
border-radius:48px;
padding:55px;
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,sans-serif;
position:relative;

box-shadow:
0 30px 50px rgba(0,0,0,.35),
0 0 20px 15px rgba(122,168,255,0.18);
}

/* ===== БРАУЗЕР ===== */

.browser{
display:flex;
align-items:center;
gap:14px;
margin-bottom:22px;
padding:12px 18px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:22px;
backdrop-filter:blur(20px);
}

.tab{
background:var(--glass);
padding:8px 18px;
border-radius:20px;
border:1px solid var(--border);
font-size:12px;
color:var(--muted);
transition:var(--anim);
}

.tab.active{
background:var(--accent);
color:#000;
border-color:var(--accent);
}

.mac-buttons{
display:flex;
gap:6px;
margin-right:8px;
position:absolute;
top:24px;
}

.mac-buttons span{
width:10px;
height:10px;
border-radius:50%;
}

.mac-buttons span:nth-child(1){background:#ff5f57;}
.mac-buttons span:nth-child(2){background:#ffbd2e;}
.mac-buttons span:nth-child(3){background:#28c840;}

.url{
margin:0 auto 30px auto;
background:var(--glass);
padding:12px 26px;
border-radius:22px;
border:1px solid var(--border);
font-size:13px;
color:var(--muted);
backdrop-filter:blur(10px);
}

/* ===== ВЕРХНИЙ БЛОК ===== */

.top-section{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:25px;
margin-top:40px;
margin-bottom:35px;
}

.left-col{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
width:140px;
flex-shrink:0;
}

.center-col{
flex:1;
display:flex;
flex-direction:column;
gap:15px;
min-width:0;
}

.top-photos{
display:flex;
flex-direction:column;
gap:14px;
width:70px;
flex-shrink:0;
margin-top:-20px;
}

.photo img{
transition:var(--anim);
}

.photo:hover img{
transform:translateY(-6px) scale(1.05);
filter:grayscale(0%);
}

/* ===== АВАТАР ===== */
.avatar-wrap{
position:relative;
width:140px;
flex-shrink:0;
aspect-ratio:1/1;
}

.avatar-wrap::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, var(--halo-color-1), var(--halo-color-2));
filter:blur(30px);
opacity:.8;
}

.avatar{
position:absolute;
inset:0;
border-radius:50%;
overflow:hidden;
}

.avatar img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:var(--anim);
}

.avatar img:hover{
transform:scale(1.05);
}

/* ===== ИНФО БЛОК ===== */
.main-info{
flex:1;
display:flex;
flex-direction:column;
gap:18px;
min-width:0;
}

.name{
font-size:30px;
color:var(--accent);
font-weight:600;
display:flex;
align-items:center;
gap:10px;
}

.lock-icon{
font-size:16px;
opacity:.6;
transition:var(--anim);
}

.lock-icon:hover{
opacity:1;
transform:scale(1.1);
}

.nick
{
font-size:14px;
}

.info{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
padding:14px 18px;
border-radius:22px;
font-size:11px;
line-height:1.6;
color:var(--muted);
backdrop-filter:blur(10px);
}