<!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>