---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haven — аренда недвижимости</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <a href="#" class="logo">haven<span>.</span></a>

        <nav class="navigation">
            <a href="#home">Главная</a>
            <a href="#properties">Недвижимость</a>
            <a href="#about">О нас</a>
            <a href="#contacts">Контакты</a>
        </nav>

        <a href="#properties" class="header-button">
            Найти жильё
        </a>
    </header>

    <main>
        <section class="hero" id="home">
            <p class="subtitle">ВАШ НОВЫЙ ДОМ НАЧИНАЕТСЯ ЗДЕСЬ</p>

            <h1>Найдите место,<br>которое станет <span>домом.</span></h1>

            <p class="hero-description">
                Подберите жильё для комфортной жизни.
                Квартиры и дома, в которых хочется остаться.
            </p>

            <a href="#properties" class="main-button">
                Смотреть недвижимость →
            </a>
        </section>

        <section class="properties" id="properties">
            <div class="section-heading">
                <div>
                    <p class="subtitle">НАШИ ПРЕДЛОЖЕНИЯ</p>
                    <h2>Популярная недвижимость</h2>
                </div>

                <p>Подберите жильё под свой образ жизни.</p>
            </div>

            <div class="property-grid">

                <article class="property-card">
                    <img
                        src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=800&q=80"
                        alt="Современная гостиная квартиры"
                    >

                    <div class="property-info">
                        <p class="property-location">Центр города</p>
                        <h3>Современная квартира</h3>

                        <div class="property-details">
                            <span>2 комнаты</span>
                            <span>65 м²</span>
                        </div>

                        <div class="property-bottom">
                            <p><strong>€850</strong> / месяц</p>
                            <a href="#contacts">Подробнее →</a>
                        </div>
                    </div>
                </article>

                <article class="property-card">
                    <img
                        src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=800&q=80"
                        alt="Современный частный дом"
                    >

                    <div class="property-info">
                        <p class="property-location">Тихий район</p>
                        <h3>Загородный дом</h3>

                        <div class="property-details">
                            <span>4 комнаты</span>
                            <span>140 м²</span>
                        </div>

                        <div class="property-bottom">
                            <p><strong>€1 600</strong> / месяц</p>
                            <a href="#contacts">Подробнее →</a>
                        </div>
                    </div>
                </article>

                <article class="property-card">
                    <img
                        src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80"
                        alt="Светлый интерьер жилого помещения"
                    >

                    <div class="property-info">
                        <p class="property-location">Рядом с парком</p>
                        <h3>Уютная студия</h3>

                        <div class="property-details">
                            <span>1 комната</span>
                            <span>38 м²</span>
                        </div>

                        <div class="property-bottom">
                            <p><strong>€620</strong> / месяц</p>
                            <a href="#contacts">Подробнее →</a>
                        </div>
                    </div>
                </article>

            </div>
        </section>

        <section class="about" id="about">
            <p class="subtitle">О НАШЕМ СЕРВИСЕ</p>
            <h2>Хорошее жильё — это больше, чем стены.</h2>

            <p>
                Haven помогает находить жильё для жизни,
                работы и отдыха. Мы собрали предложения,
                чтобы поиск нового дома был простым и удобным.
            </p>
        </section>

        <section class="contacts" id="contacts">
            <p class="subtitle">МЫ НА СВЯЗИ</p>
            <h2>Поможем найти ваш новый дом</h2>
            <p>Email: hello@haven.example</p>
            <p>Телефон: +41 00 000 00 00</p>
        </section>
    </main>

    <footer class="footer">
        <a href="#" class="logo">haven<span>.</span></a>
        <p>© 2026 Haven. Учебный проект.</p>
    </footer>

</body>
</html>