<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тестовое задание</title>
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="toggle-sidebar">
<button class="menu-icon-wrapper">
<div class="menu-icon"></div>
</button>
</div>
<div class="container">
<div class="row">
<main class="main cards-holder">
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Hidden cards -->
<!-- Card -->
<a class="card-link card-link--hidden" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link card-link--hidden" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- Card -->
<a class="card-link card-link--hidden" href="#">
<div class="card">
<div class="card__badges">
<div class="card__badge card__badge--class">Комфорт</div>
<div class="card__badge card__badge--credit">Рассрочка 12 мес.</div>
</div>
<div class="card__img">
<img src="./img/cards/img.jpg" alt="ЖК Ильинские луга">
</div>
<div class="card__content">
<h4 class="card__title">ЖК Ильинские луга</h4>
<div class="card__term">Срок сдачи до 4 кв. 2022 г.</div>
<div class="card__metro">Октябрьская</div>
<div class="card__address">пр. Льва Толстого 180А</div>
</div>
</div>
</a>
<!-- // Card -->
<!-- // Hidden cards -->
<button class="btn-more">
<img src="./img/icons/plus-circle.svg" alt="Show more icon">
<span>Показать еще</span>
</button>
</main>
<aside class="sidebar">
<form>
<!-- Widget -->
<div class="widget">
<div class="widget__title">
Близость к метро
</div>
<div class="widget__body">
<!-- location -->
<div class="location">
<div class="location__row">
<input type="checkbox" data-location-param id="location-01" class="location__checkbox">
<label class="location__btn" for="location-01">< 10</label>
<input type="checkbox" data-location-param id="location-02" class="location__checkbox">
<label class="location__btn" for="location-02">10-20</label>
<input type="checkbox" data-location-param id="location-03" class="location__checkbox">
<label class="location__btn" for="location-03">20-30</label>
<input type="checkbox" data-location-param id="location-04" class="location__checkbox">
<label class="location__btn" for="location-04">30+</label>
</div>
<div class="location__row">
<input type="checkbox" id="location-05" class="location__checkbox">
<label class="location__btn" for="location-05">Любая</label>
</div>
</div>
<!-- // location -->
</div>
</div>
<!-- // Widget -->
<!-- Widget -->
<div class="widget">
<div class="widget__title">
Срок сдачи
</div>
<div class="widget__body">
<label class="radio">
<input type="radio" class="radio__real" name="term">
<span class="radio__fake"></span>
<span class="radio__title">Любой</span>
</label>
<label class="radio">
<input type="radio" class="radio__real" name="term">
<span class="radio__fake"></span>
<span class="radio__title">Сдан</span>
</label>
<label class="radio">
<input type="radio" class="radio__real" name="term">
<span class="radio__fake"></span>
<span class="radio__title">В этом году</span>
</label>
<label class="radio">
<input type="radio" class="radio__real" name="term">
<span class="radio__fake"></span>
<span class="radio__title">В следующем год</span>
</label>
</div>
</div>
<!-- // Widget -->
<!-- Widget -->
<div class="widget">
<div class="widget__title">
Дополнительные опции
</div>
<div class="widget__body">
<label class="checkbox">
<input type="checkbox" class="checkbox__real" name="value-01">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Двор без машин</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox__real" name="value-02">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Высокие потолки</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox__real" name="value-03">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Панорамные окна</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox__real" name="value-04">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Есть кладовые</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox__real" name="value-05">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Малоэтажный</span>
</label>
<label class="checkbox checkbox--hidden">
<input type="checkbox" class="checkbox__real" name="value-06">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Дополнительный пункт 1</span>
</label>
<label class="checkbox checkbox--hidden">
<input type="checkbox" class="checkbox__real" name="value-07">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Дополнительный пункт 2</span>
</label>
<label class="checkbox checkbox--hidden">
<input type="checkbox" class="checkbox__real" name="value-08">
<span class="checkbox__fake"></span>
<span class="checkbox__title">Дополнительный пункт 3</span>
</label>
<button data-options="hidden" class="widget__btn-show-hidden">Показать ещё</button>
</div>
</div>
<!-- // Widget -->
<!-- Widget -->
<div class="widget widget--top-30">
<div class="widget__body">
<label class="toggle">
<input type="checkbox" class="toggle__real" name="comission">
<span class="toggle__fake"></span>
<span class="toggle__title">Услуги 0%</span>
</label>
</div>
</div>
<!-- // Widget -->
<!-- Widget -->
<div class="widget widget--top-30">
<div class="widget__body">
<button class="form-btn form-btn--submit">Применить фильтры</button>
<button type="reset" class="form-btn">
<img src="./img/icons/x.svg" alt="Сбросить фильтры">
<span>Сбросить фильтры</span>
</button>
</div>
</div>
<!-- // Widget -->
</form>
</aside>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>