496 lines
31 KiB
HTML
496 lines
31 KiB
HTML
<!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/stylepage5.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" href="page3.html">Аренда</a>
|
||
<a class="nav-link activenav" aria-current="page" href="#">Купить</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>Нужна Квартира?<br>
|
||
Вам к Нам</h1>
|
||
</div>
|
||
<div class="container mt-5">
|
||
<div class="filter-button-container d-grid gap-2 d-md-flex justify-content-md-start">
|
||
<button id="toggleFilters" class="btn btn-dark">Открыть фильтры</button>
|
||
</div>
|
||
<div id="filtersContainer">
|
||
<div class="row">
|
||
<div class="col-lg-2 col-md-3 col-sm-4">
|
||
<label for="projectSelect" class="form-label">Выберите проект:</label>
|
||
<select class="form-select rounded rounded-pill" id="projectSelect">
|
||
<option selected disabled>Любой</option>
|
||
<option value="project1">Любой</option>
|
||
<option value="project2">Креативный</option>
|
||
<option value="project3">Современый</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-lg-3 col-md-4 col-sm-5">
|
||
<label class="form-label">Укажите количество комнат:</label>
|
||
<div class="btn-group mt-1 d-flex flex-wrap" role="group">
|
||
<button type="button" class="btn btn-secondary rounded-pill m-1 text-rol">1</button>
|
||
<button type="button" class="btn btn-secondary rounded-pill m-1 text-rol">2</button>
|
||
<button type="button" class="btn btn-secondary rounded-pill m-1 text-rol">3</button>
|
||
<button type="button" class="btn btn-secondary rounded-pill m-1 text-rol">4</button>
|
||
<button type="button" class="btn btn-secondary rounded-pill m-1 text-rol">5</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-4 col-sm-5 position-relative">
|
||
<label for="priceRange" class="form-label">По стоимости:</label>
|
||
<input type="range" class="form-range" id="priceRange" min="2500303" max="54302199" step="1" value="2500303">
|
||
<div class="price-output">
|
||
<output id="priceOutput">от 2 500 303 ₽</output>
|
||
<output id="maxPriceOutput">до 54 302 199 ₽</output>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 col-md-3 col-sm-4 position-relative">
|
||
<label for="priceRange" class="form-label">Задайте площадь, м²:</label>
|
||
<input type="range" class="form-range" id="priceRange" min="2500303" max="54302199" step="1" value="19,2">
|
||
<div class="price-output">
|
||
<output id="priceOutput">от 19,2</output>
|
||
<output id="maxPriceOutput">до 114,8</output>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 col-md-3 col-sm-4">
|
||
<label for="projectSelect" class="form-label">Заселение до:</label>
|
||
<select class="form-select rounded rounded-pill" id="projectSelect">
|
||
<option selected disabled>Выберите дату</option>
|
||
<option value="project1">Сегодня</option>
|
||
<option value="project2">Завтра</option>
|
||
<option value="project3">На следующей неделе</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-lg-2 col-md-3 col-sm-4 mt-2">
|
||
<select class="form-select rounded rounded-pill" id="projectSelect">
|
||
<option selected disabled>Сначала дешевле</option>
|
||
<option value="project1">Сначала дешевле</option>
|
||
<option value="project2">Сначала дорогие</option>
|
||
<option value="project3">Сначала популярный</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-lg-10 d-grid gap-2 d-md-flex justify-content-md-end col-md-2 col-sm-3 mt-2">
|
||
<button type="button" class="btn btn-filt">Применить фильтр</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-group">
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/card1.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/11.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/12.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/14.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-group">
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/15.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/16.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/17.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/18.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-group">
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/19.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/20.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/21.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0">
|
||
<div class="row g-0">
|
||
<div class="col-sm-12 col-6">
|
||
<img class="card-img-top" src="img/card5.png" alt="Card image cap">
|
||
</div>
|
||
<div class="col-sm-12 col-6">
|
||
<div class="card-body p-2">
|
||
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
||
<p class="card-text">Тайский дракон </p>
|
||
</div>
|
||
<div class="card-footer p-2">
|
||
<img class="img-geo" src="icon/geo.svg" alt="">
|
||
<small class="text-muted">Токио, Япония</small>
|
||
<div class="mb-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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 mt-5 bt">
|
||
<button type="button" class="btn btn-vib mx-auto">Ещё Варианты</button>
|
||
</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>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var toggleFiltersButton = document.getElementById('toggleFilters');
|
||
var filtersContainer = document.getElementById('filtersContainer');
|
||
|
||
toggleFiltersButton.addEventListener('click', function () {
|
||
if (filtersContainer.style.display === 'none') {
|
||
filtersContainer.style.display = 'block';
|
||
} else {
|
||
filtersContainer.style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |