November 27, 2025

Вёрстка HTML страницы • Модельная Композитка

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sheva Doors - Модель</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

}

.age-gate {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.9);

z-index: 1000;

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.gate-content {

text-align: center;

padding: 2rem;

border: 2px solid #ff4757;

border-radius: 10px;

background: #1a1a1a;

}

.gate-content button {

padding: 10px 25px;

margin: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

}

.confirm {

background: #ff4757;

color: white;

}

.main-container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

display: none;

}

.model-header {

text-align: center;

margin-bottom: 2rem;

padding: 1rem;

border-bottom: 2px solid #ff4757;

}

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 15px;

margin-bottom: 2rem;

}

.gallery img {

width: 100%;

height: 400px;

object-fit: cover;

border-radius: 8px;

transition: transform 0.3s;

}

.gallery img:hover {

transform: scale(1.03);

}

.info-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

margin-bottom: 2rem;

}

.info-card {

padding: 1rem;

border-left: 3px solid #ff4757;

background: #f8f9fa;

}

.social-links {

display: flex;

gap: 15px;

justify-content: center;

margin: 2rem 0;

}

.social-links a {

padding: 10px 20px;

background: #ff4757;

color: white;

text-decoration: none;

border-radius: 5px;

transition: opacity 0.3s;

}

.social-links a:hover {

opacity: 0.8;

}

@media (max-width: 768px) {

.gallery {

grid-template-columns: 1fr;

}

.gallery img {

height: 300px;

}

}

</style>

</head>

<body>

<div class="age-gate">

<div class="gate-content">

<h2>🔞 Контент для взрослых</h2>

<p>Для доступа к странице подтвердите, что вам есть 18 лет</p>

<button class="confirm" onclick="enterSite()">Мне есть 18 лет</button>

<button onclick="exitSite()">Покинуть страницу</button>

</div>

</div>

<div class="main-container">

<header class="model-header">

<h1>Sheva Doors</h1>

<p>Профессиональная модель • 🔞 Контент 18+</p>

</header>

<section class="gallery">

<img src="https://example.com/path/to/image1.jpg" alt="Sheva Doors Photo 1">

<img src="https://example.com/path/to/image2.jpg" alt="Sheva Doors Photo 2">

<img src="https://example.com/path/to/image3.jpg" alt="Sheva Doors Photo 3">

</section>

<div class="info-grid">

<div class="info-card">

<h3>Основная информация</h3>

<p><strong>Рост:</strong> 178 см</p>

<p><strong>Параметры:</strong> 90-60-90</p>

<p><strong>Цвет волос:</strong> Брюнетка</p>

<p><strong>Цвет глаз:</strong> Карие</p>

</div>

<div class="info-card">

<h3>Специализация</h3>

<p>• Фотомодель</p>

<p>• Видеомодель</p>

<p>• Стриминг</p>

<p>• Контент-мейкер</p>

</div>

<div class="info-card">

<h3>Контакты</h3>

<p><strong>Менеджер:</strong> +7 XXX XXX-XX-XX</p>

<p><strong>Email:</strong> sheva.doors@example.com</p>

<p><strong>Регион:</strong> Москва</p>

</div>

</div>

<section class="social-links">

<a href="https://onlyfans.com/sheva_doors" target="_blank">OnlyFans</a>

<a href="https://patreon.com/sheva_doors" target="_blank">Patreon</a>

<a href="https://instagram.com/sheva_doors" target="_blank">Instagram</a>

<a href="https://t.me/sheva_doors" target="_blank">Telegram</a>

</section>

<section class="content-description">

<h2>О контенте</h2>

<p>Эксклюзивные фотосессии • Видео контент • Индивидуальные заказы • Онлайн трансляции</p>

<p>Работаю в следующих жанрах: гламур, ню-арт, бодипозитив, фетиш.</p>

<p>Доступ к полному каталогу через подписку на платформах.</p>

</section>

</div>

<script>

function enterSite() {

document.querySelector('.age-gate').style.display = 'none';

document.querySelector('.main-container').style.display = 'block';

}

function exitSite() {

window.location.href = 'https://www.google.com';

}

// Предотвращение правого клика

document.addEventListener('contextmenu', function(e) {

e.preventDefault();

});

</script>

</body>

</html>

Особенности страницы:

1. Проверка возраста - модальное окно с требованием подтверждения совершеннолетия

2. Адаптивный дизайн - корректное отображение на всех устройствах

3. Интерактивная галерея - сетка изображений с hover-эффектами

4. Структурированная информация:

· Основные параметры модели

· Специализация

· Контактные данные

5. Социальные ссылки - кнопки переходов на основные платформы

6. Защита контента - блокировка правого клика

7. Четкое обозначение 18+ контента

Для использования необходимо:

1. Заменить примеры ссылок на изображения реальными

2. Обновить контактные данные

3. Настроить реальные ссылки на социальные сети

4. При необходимости добавить дополнительные блоки информации

Страница готова к размещению на хостинге и может быть использована как презентационная карточка в базе моделей.