стильный сайт модельного агентства
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Модельное агентство - Стильный сайт</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
<!-- Tailwind CSS -->
<script src="https://app.aisearch.ru/static/tailwind/tailwind.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body class="bg-gray-100 font-montserrat text-gray-800">
<!-- HEADER -->
<header class="bg-white shadow">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800">ModelAgency</div>
<nav class="space-x-6">
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Главная</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Модели</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium">О нас</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Контакты</a>
</nav>
</div>
</header>
<!-- HERO SECTION -->
<section class="relative bg-gray-900 text-white">
<div class="container mx-auto px-6 py-20 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Стильное агентство моделей</h1>
<p class="text-lg md:text-xl mb-8">Премиум модели для фотосессий, показов и рекламы</p>
<a href="#models" class="bg-white text-gray-900 px-6 py-3 rounded-full font-semibold hover:bg-gray-200 transition">Узнать больше</a>
</div>
<img src="https://placehold.co/1600x600/png?text=Стильное+модельное+агентство" alt="Современная съемочная площадка с профессиональными моделями и фотографами" class="w-full absolute bottom-0 left-0 opacity-75"/>
</section>
<!-- О НАС -->
<section class="max-w-7xl mx-auto px-6 py-16 bg-gray-50">
<h2 class="text-3xl font-bold text-center mb-8">О нашем агентстве</h2>
<div class="grid md:grid-cols-3 gap-8 items-center">
<div class="text-center md:text-left">
<img src="https://placehold.co/400x300/png?text=Наша+команда" alt="Профессиональная команда менеджеров и стилистов модельного агентства" class="mx-auto md:mx-0 rounded-lg shadow-lg"/>
</div>
<div class="md:col-span-2 space-y-4">
<p class="text-gray-700">Наше модельное агентство объединяет талантливых моделей с международными стандартами. Мы предоставляем услуги по подбору моделей для различных рекламных кампаний, фотосессий и показов.</p>
<p class="text-gray-700">Опытные менеджеры и стилисты работают для того, чтобы каждая модель выглядела идеально и чувствовала себя уверенно на любой площадке.</p>
<p class="text-gray-700">Присоединяйтесь к нашему сообществу талантов и будьте в центре модных трендов.</p>
</div>
</div>
</section>
<!-- Наши модели -->
<section id="models" class="max-w-7xl mx-auto px-6 py-16">
<h2 class="text-3xl font-bold text-center mb-8">Наши модели</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Модель 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
<img src="https://placehold.co/400x500/png?text=Модель+1" alt="Портрет молодой модели с естественным макияжем и стильной прической в студийной обстановке" class="w-full h-64 object-cover"/>
<div class="p-4 text-center">
<h3 class="text-xl font-semibold mb-2">Елена Иванова</h3>
<p class="text-gray-600 mb-4">Высота: 177 см, Категория: Катерина</p>
<a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
</div>
</div>
<!-- Модель 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
<img src="https://placehold.co/400x500/png?text=Модель+2" alt="Портрет модели в городском стиле с ярким макияжем и дерзкой прической на улице" class="w-full h-64 object-cover"/>
<div class="p-4 text-center">
<h3 class="text-xl font-semibold mb-2">Анастасия Соколова</h3>
<p class="text-gray-600 mb-4">Высота: 175 см, Категория: Весна</p>
<a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
</div>
</div>
<!-- Модель 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
<img src="https://placehold.co/400x500/png?text=Модель+3" alt="Портрет модели с короткой стрижкой, модным макияжем и уличным стилем в метро" class="w-full h-64 object-cover"/>
<div class="p-4 text-center">
<h3 class="text-xl font-semibold mb-2">Дмитрий Ковальчук</h3>
<p class="text-gray-600 mb-4">Высота: 185 см, Категория: Мужчины</p>
<a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
</div>
</div>
</div>
</section>
<!-- Наши услуги -->
<section class="max-w-7xl mx-auto px-6 py-16 bg-gray-50">
<h2 class="text-3xl font-bold text-center mb-8">Наши услуги</h2>
<div class="grid md:grid-cols-3 gap-8 text-center">
<!-- Услуга 1 -->
<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-camera-retro fa-3x mb-4 text-blue-500"></i>
<h3 class="text-xl font-semibold mb-2">Фотосессии</h3>
<p class="text-gray-600">Организация профессиональных фотосессий для каталогов, рекламы и портфолио моделей.</p>
</div>
<!-- Услуга 2 -->
<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-user-tie fa-3x mb-4 text-green-500"></i>
<h3 class="text-xl font-semibold mb-2">Показ мод</h3>
<p class="text-gray-600">Подготовка и организация дефиле для модных показов и презентаций коллекций.</p>
</div>
<!-- Услуга 3 -->
<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-ad fa-3x mb-4 text-yellow-500"></i>
<h3 class="text-xl font-semibold mb-2">Реклама и брендинг</h3>
<p class="text-gray-600">Модели для фотомоделей, видеосъемки, рекламных кампаний и мероприятий.</p>
</div>
</div>
</section>
<!-- Контакты -->
<section class="max-w-7xl mx-auto px-6 py-16">
<h2 class="text-3xl font-bold text-center mb-8">Свяжитесь с нами</h2>
<div class="md:flex md:space-x-8">
<div class="md:w-1/2 mb-8 md:mb-0">
<form class="bg-white p-8 rounded-lg shadow-lg space-y-4">
<div>
<label class="block mb-2 font-semibold" for="name">Имя</label>
<input class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" id="name" placeholder="Ваше имя" />
</div>
<div>
<label class="block mb-2 font-semibold" for="email">Email</label>
<input class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" type="email" id="email" placeholder="Ваш Email" />
</div>
<div>
<label class="block mb-2 font-semibold" for="message">Сообщение</label>
<textarea class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" id="message" rows="4" placeholder="Ваше сообщение"></textarea>
</div>
<button class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition" type="submit">Отправить</button>
</form>
</div>
<div class="md:w-1/2 space-y-6">
<div class="flex items-center space-x-4">
<i class="fas fa-map-marker-alt text-blue-500 text-2xl"></i>
<div>
<h4 class="font-semibold mb-1">Адрес</h4>
<p class="text-gray-700">ул. Модная, д. 15, Москва</p>
</div>
</div>
<div class="flex items-center space-x-4">
<i class="fas fa-phone-alt text-green-500 text-2xl"></i>
<div>
<h4 class="font-semibold mb-1">Телефон</h4>
<p class="text-gray-700">+7 495 123-45-67</p>
</div>
</div>
<div class="flex items-center space-x-4">
<i class="fas fa-envelope text-yellow-500 text-2xl"></i>
<div>
<h4 class="font-semibold mb-1">Email</h4>
<p class="text-gray-700">info@modelagency.ru</p>
</div>
</div>
</div>
</div>
</section>
<!-- Подвал -->
<footer class="bg-gray-800 text-gray-200 py-8">
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p>© 2024 ModelAgency. Все права защищены.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-telegram-plane"></i></a>
</div>
</div>
</footer>
<!-- scripts -->
<script type="module">
// Нет необходимости в дополнительных скриптах для этой версии сайта
</script>
</body>
</html>