пупупу
кладовая
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12026-05-04 13:50:21
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
Поделиться22026-06-27 14:20:53
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Профиль</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background: #fafafa;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 20px 0 60px 0;
}
.container {
max-width: 430px;
width: 100%;
background: white;
border-radius: 24px;
box-shadow: 0 8px 30px rgba(0,0,0,0.06);
overflow: hidden;
padding: 16px 16px 30px 16px;
}
/* Шапка профиля */
.header {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 4px 0 16px 0;
}
.header h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 22px;
font-weight: 600;}
/* Блок с аватаркой и статистикой */
.profile-top {
display: flex;
align-items: center;
gap: 28px;
padding: 8px 0 20px 0;
border-bottom: 1px solid #efefef;
}
.avatar {
width: 86px;
height: 86px;
border-radius: 50%;
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
padding: 3px;
flex-shrink: 0;
}
.avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid white;
object-fit: cover;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.stats {
display: flex;
flex: 1;
justify-content: space-around;
text-align: center;
}
.stats div {
display: flex;
flex-direction: column;
}
.stats .number {
font-weight: 700;
font-size: 18px;
}
.stats .label {
font-size: 13px;
color: #8e8e8e;
}
/* Имя и описание */
.profile-info {
padding: 14px 0 16px 0;
border-bottom: 1px solid #efefef;
}
.profile-info .name {
font-weight: 700;
font-size: 16px;
}
.profile-info .bio {
font-size: 14px;
color: #262626;
margin-top: 4px;
}
.profile-info .website {
font-size: 14px;
color: #00376b;
margin-top: 4px;
cursor: default;
}
/* Сетка постов (3 колонки) */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
padding-top: 3px;
}
.grid-item {
aspect-ratio: 1 / 1;
background: #e8e8e8;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #aaa;
overflow: hidden;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Адаптив */
@media (max-width: 460px) {
body { padding: 0; }
.container { border-radius: 0; padding: 12px 12px 20px 12px; }
.avatar { width: 74px; height: 74px; }
.stats .number { font-size: 16px; }
}
</style>
</head>
<body>
<div class="container">
<!-- Шапка -->
<div class="header">
<h2>username_</h2>
</div>
<!-- Аватар + статистика -->
<div class="profile-top">
<div class="avatar">
<img src="#" alt="avatar" style="background:#f2a6b0; display:flex; align-items:center; justify-content:center; font-size:42px;">
</div>
<div class="stats">
<div><span class="number">12</span><span class="label">постов</span></div>
<div><span class="number">348</span><span class="label">подписчиков</span></div>
<div><span class="number">186</span><span class="label">подписок</span></div>
</div>
</div>
<!-- Имя + био + сайт -->
<div class="profile-info">
<div class="name">Анастасия К.</div>
<div class="bio">Фотограф | Путешествия ✈️</div>
<div class="website">instagram.com/username_</div>
</div>
<!-- Сетка постов (9 штук для примера) -->
<div class="grid">
<div class="grid-item" style="background:#d4e2f0;">🌅</div>
<div class="grid-item" style="background:#d9e8d9;">🌲</div>
<div class="grid-item" style="background:#f5e6d3;">👗</div>
<div class="grid-item" style="background:#f2d9e6;">🌸</div>
<div class="grid-item" style="background:#d9d9f2;">🌊</div>
<div class="grid-item" style="background:#f2e6d9;">☕</div>
<div class="grid-item" style="background:#e6f2d9;">🌿</div>
<div class="grid-item" style="background:#f2d9d9;">❤️</div>
<div class="grid-item" style="background:#d9e6f2;">🏔️</div>
</div>
</div>
<script>
// Небольшая имитация — заменяем пустой src у аватара на эмодзи
(function(){
const avatarImg = document.querySelector('.avatar img');
if (avatarImg && (!avatarImg.src || avatarImg.src === '#' || avatarImg.src.includes('#'))) {
avatarImg.removeAttribute('src');
avatarImg.style.display = 'flex';
avatarImg.style.alignItems = 'center';
avatarImg.style.justifyContent = 'center';
avatarImg.style.fontSize = '44px';
avatarImg.style.background = '#f2a6b0';
avatarImg.innerText = '👩🦰';
}
})();
</script>
</body>
</html>[/html]
Страница: 1