<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/stylepage4.css">
    <title>HI-town</title>
</head>
<body>
    <nav class="navbar  navbar-expand-lg" data-bs-theme="dark" style="background-color: #000;">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="icon/whiteicon.png" alt="bootstrap" width="" height="">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Меню">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <div class="navbar-nav text-center">
                    <a class="nav-link" href="index.html">Главная</a>
                    <a class="nav-link" href="page2.html">Популярный</a>
                    <a class="nav-link activenav" aria-current="page" href="#">Аренда</a>
                    <a class="nav-link" href="page5.html">Купить</a>
                    <!-- <a class="nav-link text-nowrap" href="#">О нас</a> -->
                    <a class="nav-item d-md-none nav-link" href="page6.html">Вход</a>
                </div>
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <a href="page6.html" class="btn d-flex text-nowrap ms-2 d-none d-md-inline">Войти</a>
                    <a href="page6.html" class="btn d-flex text-nowrap btn-light ms-2 d-none d-md-inline">Создать аккаунт</a>
                </div> 
            </div>
        </div>
    </nav>

    <section class="three">
        <div class="container_one">
            <div class="row">
                <div class="col-12 text-zag">
                    <h1>Отели ####</h1>
                </div>
                <div class="row mt-5 filtr">
                    <div class="col-md-3">
                        <form id="filterForm">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-3">
                                    <h5>Популярные</h5>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="breakfastCheckbox" name="breakfast">
                                        <label class="form-check-label" for="breakfastCheckbox">Завтрак включен</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="starCheckbox" name="star">
                                        <label class="form-check-label" for="starCheckbox">5 звезд</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="budgetCheckbox" name="budget">
                                        <label class="form-check-label" for="budgetCheckbox">Бюджет</label>
                                    </div>
                    
                                    <h5>Удобства</h5>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="wifiCheckbox" name="wifi">
                                        <label class="form-check-label" for="wifiCheckbox">Бесплатный Wi-Fi</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="poolCheckbox" name="pool">
                                        <label class="form-check-label" for="poolCheckbox">Бассейн</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="parkingCheckbox" name="parking">
                                        <label class="form-check-label" for="parkingCheckbox">Бесплатная парковка</label>
                                    </div>
                
                                    <h5>Класс отеля</h5>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="wifiCheckbox" name="wifi">
                                        <label class="form-check-label" for="wifiCheckbox">5 звёзд</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="poolCheckbox" name="pool">
                                        <label class="form-check-label" for="poolCheckbox">4 звёзд</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="parkingCheckbox" name="parking">
                                        <label class="form-check-label" for="parkingCheckbox">3 звёзд</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="parkingCheckbox" name="parking">
                                        <label class="form-check-label" for="parkingCheckbox">2 звёзд</label>
                                    </div>
                    
                                    <button type="button" class="btn  btn-filt">Применить фильтр</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-9">
                        <div class="card mb-3 mx-auto border-0" style="max-width: 950px;">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-4 pict">
                                    <img src="img/ph1.png" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-4 content-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Тайский дракон</h5>
                                        <p class="card-text text-start">Четырёхкомнатная квартира, включающая в себя систему умного дома и выходом на балкон.</p>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/bed.svg" alt="">
                                            <small class="text-muted-name">4 кровати</small>
                                            <img class="img-plus" src="icon/dush.svg" alt="">
                                            <small class="text-muted-name">2 душа</small>
                                            <img class="img-plus" src="icon/parkovka.svg" alt="">
                                            <small class="text-muted-name">1 парковка</small>
                                        </div>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/fire.svg" alt="">
                                            <small class="text-muted-name">Оптимальный вариант</small>
                                        </div>
                                        <div>
                                            <p class="card-text price">5400₽  за сутки</p>
                                        </div>
                                        <div>
                                            <img class="img-plus" src="icon/star.svg" alt="">
                                            <span class="text-muted nine">9</span>
                                            <small class="text-muted small-text">1010 отзывов</small>
                                        </div>
                                        <button class="btn btn-buy col-12">Бронировать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3 mx-auto border-0" style="max-width: 950px;">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-4 pict">
                                    <img src="img/ph2.png" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-4 content-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Тайский дракон</h5>
                                        <p class="card-text text-start">Четырёхкомнатная квартира, включающая в себя систему умного дома и выходом на балкон.</p>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/bed.svg" alt="">
                                            <small class="text-muted-name">4 кровати</small>
                                            <img class="img-plus" src="icon/dush.svg" alt="">
                                            <small class="text-muted-name">2 душа</small>
                                            <img class="img-plus" src="icon/parkovka.svg" alt="">
                                            <small class="text-muted-name">1 парковка</small>
                                        </div>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/fire.svg" alt="">
                                            <small class="text-muted-name">Оптимальный вариант</small>
                                        </div>
                                        <div>
                                            <p class="card-text price">5400₽  за сутки</p>
                                        </div>
                                        <div>
                                            <img class="img-plus" src="icon/star.svg" alt="">
                                            <span class="text-muted nine">9</span>
                                            <small class="text-muted small-text">1010 отзывов</small>
                                        </div>
                                        <button class="btn btn-buy col-12">Бронировать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3 mx-auto border-0" style="max-width: 950px;">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-4 pict">
                                    <img src="img/ph3.png" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-4 content-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Тайский дракон</h5>
                                        <p class="card-text text-start">Четырёхкомнатная квартира, включающая в себя систему умного дома и выходом на балкон.</p>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/bed.svg" alt="">
                                            <small class="text-muted-name">4 кровати</small>
                                            <img class="img-plus" src="icon/dush.svg" alt="">
                                            <small class="text-muted-name">2 душа</small>
                                            <img class="img-plus" src="icon/parkovka.svg" alt="">
                                            <small class="text-muted-name">1 парковка</small>
                                        </div>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/fire.svg" alt="">
                                            <small class="text-muted-name">Оптимальный вариант</small>
                                        </div>
                                        <div>
                                            <p class="card-text price">5400₽  за сутки</p>
                                        </div>
                                        <div>
                                            <img class="img-plus" src="icon/star.svg" alt="">
                                            <span class="text-muted nine">9</span>
                                            <small class="text-muted small-text">1010 отзывов</small>
                                        </div>
                                        <button class="btn btn-buy col-12">Бронировать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3 mx-auto border-0" style="max-width: 950px;">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-4 pict">
                                    <img src="img/ph4.png" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-4 content-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Тайский дракон</h5>
                                        <p class="card-text text-start">Четырёхкомнатная квартира, включающая в себя систему умного дома и выходом на балкон.</p>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/bed.svg" alt="">
                                            <small class="text-muted-name">4 кровати</small>
                                            <img class="img-plus" src="icon/dush.svg" alt="">
                                            <small class="text-muted-name">2 душа</small>
                                            <img class="img-plus" src="icon/parkovka.svg" alt="">
                                            <small class="text-muted-name">1 парковка</small>
                                        </div>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/fire.svg" alt="">
                                            <small class="text-muted-name">Оптимальный вариант</small>
                                        </div>
                                        <div>
                                            <p class="card-text price">5400₽  за сутки</p>
                                        </div>
                                        <div>
                                            <img class="img-plus" src="icon/star.svg" alt="">
                                            <span class="text-muted nine">9</span>
                                            <small class="text-muted small-text">1010 отзывов</small>
                                        </div>
                                        <button class="btn btn-buy col-12">Бронировать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3 mx-auto border-0" style="max-width: 950px;">
                            <div class="row g-0 justify-content-center">
                                <div class="col-md-4 pict">
                                    <img src="img/ph5.png" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-4 content-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Тайский дракон</h5>
                                        <p class="card-text text-start">Четырёхкомнатная квартира, включающая в себя систему умного дома и выходом на балкон.</p>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/bed.svg" alt="">
                                            <small class="text-muted-name">4 кровати</small>
                                            <img class="img-plus" src="icon/dush.svg" alt="">
                                            <small class="text-muted-name">2 душа</small>
                                            <img class="img-plus" src="icon/parkovka.svg" alt="">
                                            <small class="text-muted-name">1 парковка</small>
                                        </div>
                                        <div class="mt-0">
                                            <img class="img-plus" src="icon/fire.svg" alt="">
                                            <small class="text-muted-name">Оптимальный вариант</small>
                                        </div>
                                        <div>
                                            <p class="card-text price">5400₽  за сутки</p>
                                        </div>
                                        <div>
                                            <img class="img-plus" src="icon/star.svg" alt="">
                                            <span class="text-muted nine">9</span>
                                            <small class="text-muted small-text">1010 отзывов</small>
                                        </div>
                                        <button class="btn btn-buy col-12">Бронировать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mt-5 bt">
                        <button type="button" class="btn btn-vib mx-auto">Ещё Варианты</button>
                    </div> 
                </div>                                          
            </div>
        </div>
    </section>

    <footer class="text-center text-lg-start text-white">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 mb-3">
                    <img src="icon/иконка2.png" alt="Логотип" class="start">
                </div>
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="bosslist">Быстрое меню</h5>
                    <ul class="textlist list-unstyled mb-0">
                        <li>
                            <a href="#" class="list active">Главная</a>
                        </li>
                        <li>
                            <a href="#" class="list">Популярные</a>
                        </li>
                        <li>
                            <a href="#" class="list">Аренда</a>
                        </li>
                        <li>
                            <a href="#" class="list">Купить</a>
                        </li>
                        <li>
                            <a href="#" class="list">О нас</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 col-lg-3 col-xl-1 mb-md-0 mb-4 offset-lg-3">
                    <h5 class="bosslist">Контакты</h5>
                    <ul class="textlist list-unstyled mb-0">
                        <li>
                            <a href="#" id="listperenos" class="list">Ульяновск,<br /> Московское шоссе,<br> д. 3</a>
                        </li>
                        <li>
                            <a href="#" class="list">+7 (986) 737-71-39</a>
                        </li>
                        <li>
                            <a href="#" class="list">artifaction@mail.ru</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="licensia text-center p-5 ">
            <section class="d-flex justify-content-center p-1 m-3">
                <div>
                    <a href="" class="btn btn-link btn-floating btn-lg text-dark m-1">
                        <img src="icon/facebook.svg" alt="Логотип" class="start">
                    </a>
                    <a href="" class="btn btn-link btn-floating btn-lg text-dark m-1">
                        <img src="icon/vk.svg" alt="Логотип" class="start">
                    </a>
                    <a href="" class="btn btn-link btn-floating btn-lg text-dark m-1">
                        <img src="icon/inst.svg" alt="Логотип" class="start">
                    </a>
                  </div>
            </section>
            <a class="list" href="#"> © 2004-2023 Construction company HI-TOWN</a>
        </div>
    </footer>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>