test-task

css/main.css

@@ -0,0 +1,662 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	background-color: #f4f4f4;
+	font-family: 'Roboto', sans-serif;
+}
+
+img {
+	display: block;
+}
+
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 60px 15px;
+}
+
+@media (max-width: 1200px) {
+	.container {
+		max-width: 830px;
+	}
+}
+
+@media (max-width: 829px) {
+	.container {
+		max-width: 600px;
+	}
+}
+
+.row {
+	display: flex;
+	justify-content: space-between;
+}
+
+.main {
+	width: 870px;
+}
+
+.sidebar {
+	min-width: 200px;
+	width: 270px;
+}
+
+@media (max-width: 829px) {
+	.sidebar {
+		/* display: none; */
+		margin-left: 0 !important;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		background-color: white;
+		padding: 15px;
+		box-shadow: 0px 0px 20px 4px rgb(0 0 0 / 37%);
+		overflow-y: scroll;
+		transform: translateX(-150%);
+		transition: transform 0.3s ease-in;
+	}
+
+	.sidebar--mobile-active {
+		transform: translateX(-0%);
+	}
+}
+
+.main + .sidebar {
+	margin-left: 30px;
+}
+
+.cards-holder {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+@media (max-width: 599px) {
+	.cards-holder {
+		flex-direction: column;
+		align-items: center;
+	}
+}
+
+.cards-holder > .card-link {
+	margin-bottom: 30px;
+}
+
+.card-link--hidden {
+	display: none !important;
+}
+
+/* Card */
+
+a.card-link {
+	display: inline-block;
+	text-decoration: none;
+	transition: all 0.2s ease-in;
+}
+
+a.card-link:hover {
+	opacity: 0.9;
+	transform: translateY(-5px);
+}
+
+.card {
+	position: relative;
+	width: 270px;
+	background-color: #fff;
+}
+
+.card__badges {
+	position: absolute;
+	top: 10px;
+	left: 15px;
+	right: 15px;
+	display: flex;
+}
+
+.card__badges > * + * {
+	margin-left: 10px;
+}
+
+.card__badge {
+	display: inline-block;
+	height: 22px;
+	padding: 0 10px;
+	background: #a3a3a3;
+	border-radius: 4px;
+	font-size: 14px;
+	line-height: 23px;
+	color: #000000;
+}
+
+.card__badge--class {
+	background: #ffcf26;
+}
+
+.card__badge--credit {
+	background: #11be75;
+	color: #fff;
+}
+
+.card__content {
+	padding: 16px 15px 20px;
+}
+
+.card__title {
+	margin: 0;
+	margin-bottom: 11px;
+	font-weight: bold;
+	font-size: 18px;
+	line-height: 1.16;
+	color: #000000;
+}
+
+.card__term {
+	margin-bottom: 11px;
+	font-size: 14px;
+	line-height: 1.14;
+	color: #000000;
+}
+
+.card__metro {
+	margin-bottom: 11px;
+	font-size: 14px;
+	line-height: 1.14;
+	color: #000000;
+}
+
+.card__metro::before {
+	content: '';
+	margin-right: 10px;
+	display: inline-block;
+	vertical-align: baseline;
+	width: 16px;
+	height: 11px;
+	background-image: url('./../img/icons/metro.svg');
+	background-repeat: no-repeat;
+	background-size: initial;
+}
+
+.card__address {
+	font-size: 14px;
+	line-height: 1.14;
+	color: #777777;
+}
+
+/* Button more */
+
+.btn-more {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 80px;
+
+	background-color: #e5e5e5;
+	border-radius: 4px;
+	border: none;
+
+	text-align: center;
+	font-size: 18px;
+	line-height: 21px;
+	color: #4290c9;
+
+	cursor: pointer;
+	transition: background-color 0.2s ease-in;
+}
+
+.btn-more:hover {
+	background-color: #d8d8d8;
+}
+
+.btn-more img {
+	/* display: inline-block; */
+	margin-right: 10px;
+	/* vertical-align: bottom; */
+}
+
+/* Sidebar */
+
+.widget + .widget {
+	margin-top: 33px;
+}
+
+.widget--top-30 {
+	margin-top: 30px !important;
+}
+
+.widget__title {
+	position: relative;
+	margin-bottom: 21px;
+	font-weight: bold;
+	font-size: 18px;
+	line-height: 1.16;
+	color: #000000;
+	cursor: pointer;
+}
+.widget__title::after {
+	content: '';
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	right: 1px;
+	top: -1px;
+	background-image: url('./../img/icons/chevron-up.svg');
+	background-repeat: no-repeat;
+	background-size: initial;
+	background-position: center;
+}
+
+.widget__title--active::after {
+	transform: rotate(180deg);
+}
+
+.widget__body {
+}
+
+.widget__body--hidden {
+	display: none;
+}
+
+/* Location buttons group */
+
+.location {
+}
+.location__row {
+	display: flex;
+}
+
+.location__row:first-child {
+	overflow: hidden;
+	border-radius: 4px 4px 0 0;
+	border: 1px solid #d6d6d6;
+}
+
+.location__row:last-child {
+	overflow: hidden;
+	border-radius: 0px 0px 4px 4px;
+	border: 1px solid #d6d6d6;
+	border-top: none;
+}
+
+.location__btn {
+	flex-grow: 1;
+
+	font-family: inherit;
+	height: 48px;
+	padding: 0 15px;
+
+	background-color: transparent;
+	border: none;
+
+	text-align: center;
+	font-style: normal;
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 50px;
+	color: #3c3c3c;
+
+	cursor: pointer;
+	transition: background-color 0.2s ease-in;
+}
+
+.location__btn:hover {
+	background-color: #fff0bb;
+}
+
+.location__checkbox {
+	width: 1px;
+	height: 1px;
+	position: absolute;
+	opacity: 0;
+	appearance: none;
+}
+
+.location__checkbox:checked + .location__btn {
+	background-color: #ffcf26;
+}
+
+.location__checkbox:checked + .location__btn:hover {
+	background-color: #e0b000;
+}
+
+/* Radio */
+
+.radio {
+	display: block;
+	cursor: pointer;
+}
+
+.radio + .radio {
+	margin-top: 15px;
+}
+
+.radio__real {
+	width: 1px;
+	height: 1px;
+	position: absolute;
+	opacity: 0;
+	appearance: none;
+}
+
+.radio__fake {
+	position: relative;
+	display: inline-block;
+	margin-right: 7px;
+	width: 20px;
+	height: 20px;
+	background-color: #fff;
+	border: 1px solid #777777;
+	border-radius: 50%;
+	vertical-align: bottom;
+}
+
+.radio__real:checked + .radio__fake {
+	background-color: #ffe074;
+}
+
+.radio__real:checked + .radio__fake::before {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	content: '';
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	background: #3c3c3c;
+	transform: translate(-50%, -50%);
+}
+
+.radio__real:checked ~ .radio__title {
+	font-weight: 500;
+}
+
+.radio__title {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 1.18;
+	color: #000000;
+}
+
+/* Checkbox */
+
+.checkbox {
+	display: block;
+	cursor: pointer;
+}
+
+.checkbox--hidden {
+	display: none;
+}
+
+.checkbox + .checkbox {
+	margin-top: 15px;
+}
+
+.checkbox__real {
+	width: 1px;
+	height: 1px;
+	position: absolute;
+	opacity: 0;
+	appearance: none;
+}
+
+.checkbox__fake {
+	position: relative;
+	display: inline-block;
+	margin-right: 7px;
+	width: 20px;
+	height: 20px;
+	background-color: transparent;
+	border: 1px solid #777777;
+	border-radius: 2px;
+	vertical-align: bottom;
+}
+
+.checkbox__real:checked + .checkbox__fake {
+	background-color: #ffe074;
+}
+
+.checkbox__real:checked + .checkbox__fake::before {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	content: '';
+	width: 18px;
+	height: 18px;
+	background-image: url('./../img/icons/check.svg');
+	background-size: initial;
+	background-position: center;
+	transform: translate(-50%, -50%);
+}
+
+.checkbox__title {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 1.18;
+	color: #000000;
+}
+
+.checkbox__real:checked ~ .checkbox__title {
+	font-weight: 500;
+}
+
+/* Hidden elements widget */
+
+.widget__hidden {
+	display: none;
+}
+
+.widget__btn-show-hidden {
+	display: inline-block;
+	margin-top: 15px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	font-family: inherit;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 1.19;
+	color: #4290c9;
+	cursor: pointer;
+	transition: color 0.2s ease-in;
+}
+
+.widget__btn-show-hidden:active, .widget__btn-show-hidden:focus {
+	outline: none;
+}
+
+.widget__btn-show-hidden:hover {
+	color: #007fda;
+	text-decoration: underline;
+}
+
+/* Toggle */
+
+.toggle {
+	cursor: pointer;
+}
+
+.toggle__real {
+	width: 1px;
+	height: 1px;
+	position: absolute;
+	opacity: 0;
+	appearance: none;
+}
+.toggle__fake {
+	position: relative;
+	display: inline-block;
+	margin-right: 7px;
+	width: 37px;
+	height: 20px;
+	background: #c4c4c4;
+	border-radius: 10px;
+	vertical-align: bottom;
+}
+
+.toggle__fake::before {
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	content: '';
+	width: 16px;
+	height: 16px;
+	background: #3c3c3c;
+	border-radius: 50%;
+	transition: all 0.2s ease-in;
+}
+
+.toggle__real:checked + .toggle__fake {
+	background: #ffe074;
+}
+
+.toggle__real:checked + .toggle__fake::before {
+	left: 19px;
+	/* right: 2px; */
+}
+
+.toggle__title {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 1.18;
+	color: #000000;
+}
+
+.toggle__real:checked ~ .toggle__title {
+	font-weight: 500;
+}
+
+/* Form buttons */
+
+.form-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 50px;
+
+	border: 1px solid #d6d6d6;
+
+	border-radius: 4px;
+	background-color: transparent;
+
+	font-family: inherit;
+	text-align: center;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 1;
+	color: #3c3c3c;
+
+	cursor: pointer;
+	transition: background-color 0.2s ease-in;
+}
+
+.form-btn img {
+	/* display: inline-block; */
+	margin-right: 6px;
+	/* vertical-align: middle; */
+	/* margin-top: -2px; */
+}
+
+.form-btn:hover {
+	background-color: #e7e7e7;
+}
+
+.form-btn + .form-btn {
+	margin-top: 10px;
+}
+
+.form-btn--submit {
+	background: #ffcf26;
+	border: none;
+	color: #000;
+}
+
+.form-btn--submit:hover {
+	background: #ffe173;
+}
+
+/* Button Toggle Sidebar */
+
+.toggle-sidebar {
+	display: none;
+	position: fixed;
+	z-index: 9;
+	right: 15px;
+	top: 8px;
+	width: 45px;
+	height: 45px;
+	background-color: rgb(71, 71, 71);
+	justify-content: center;
+	align-items: center;
+}
+
+@media (max-width: 829px) {
+	.toggle-sidebar {
+		display: flex;
+	}
+}
+
+.menu-icon-wrapper {
+	width: 30px;
+	height: 30px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0;
+	border: none;
+	background-color: transparent;
+}
+
+.menu-icon {
+	position: relative;
+	width: 30px;
+	height: 5px;
+	background-color: #fff;
+}
+
+.menu-icon::before {
+	position: absolute;
+	left: 0;
+	top: -10px;
+	content: '';
+	width: 30px;
+	height: 5px;
+	background-color: #fff;
+	transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
+}
+
+.menu-icon::after {
+	position: absolute;
+	left: 0;
+	top: 10px;
+	content: '';
+	width: 30px;
+	height: 5px;
+	background-color: #fff;
+	transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
+}
+
+.menu-icon.menu-icon-active {
+	background-color: transparent;
+}
+
+.menu-icon.menu-icon-active::before {
+	transform: rotate(45deg);
+	top: 0;
+	transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
+}
+
+.menu-icon.menu-icon-active::after {
+	transform: rotate(-45deg);
+	top: 0;
+	transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
+}

img/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 5.25L6.75 13.5L3 9.75" stroke="#3C3C3C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 15L12 9L6 15" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/icons/metro.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M14.8992 9.46333L11.1616 0L8 5.53201L4.8512 0L1.1008 9.46333H0V10.8976H5.6576V9.46333H4.8128L5.632 7.1071L8 11L10.368 7.1071L11.1872 9.46333H10.3424V10.8976H16V9.46333H14.8992Z" fill="#FF0013"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="16" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/icons/plus-circle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4290C9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 8V16" stroke="#4290C9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12H16" stroke="#4290C9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/icons/x.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#3C3C3C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="#3C3C3C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

index.html

@@ -0,0 +1,424 @@
+<!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">&lt; 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>

js/main.js

@@ -0,0 +1,95 @@
+if (window.NodeList && !NodeList.prototype.forEach) {
+	NodeList.prototype.forEach = function (callback, thisArg) {
+		thisArg = thisArg || window;
+		for (var i = 0; i < this.length; i++) {
+			callback.call(thisArg, this[i], i, this);
+		}
+	};
+}
+
+/* Фильтр на мобильный устроствах */
+const sidebarToggleBtn = document.querySelector('.menu-icon-wrapper');
+const menuIcon = document.querySelector('.menu-icon');
+const sidebar = document.querySelector('.sidebar');
+
+// Клик по кнопке для скрытия / показа фильтра и изменения исконки
+sidebarToggleBtn.onclick = function () {
+	menuIcon.classList.toggle('menu-icon-active');
+	sidebar.classList.toggle('sidebar--mobile-active');
+};
+
+/* Показать еще 3 карточки */
+const btnShowMoreCards = document.querySelector('.btn-more');
+const hiddenCards = document.querySelectorAll('.card-link--hidden');
+
+// Клик по кнопке и показ трех скрытых карточек
+btnShowMoreCards.addEventListener('click', function () {
+    hiddenCards.forEach(function (card) {
+        card.classList.remove('card-link--hidden');
+    })
+})
+
+/* Показать/скрыть контент внутри виджетов */
+const widgets = document.querySelectorAll('.widget');
+
+// Находим все виджеты на странице
+widgets.forEach(function (widget) {
+
+    // Слушаем клик внутри виджета
+    widget.addEventListener('click', function (e) {
+        // Если клик по заголовку - тогда скрываем/показывае тело виджета
+        if (e.target.classList.contains('widget__title')) {
+            e.target.classList.toggle('widget__title--active');
+            e.target.nextElementSibling.classList.toggle('widget__body--hidden');
+        }
+    });
+});
+
+/* Location - кнопка Любая */
+const checkBoxAny = document.querySelector('#location-05');
+const topLocationCheckboxes = document.querySelectorAll('[data-location-param]');
+
+// Выбор кнопки Любая и отключение других чекбоксов
+checkBoxAny.addEventListener('change', function () {
+    if (checkBoxAny.checked) {
+        topLocationCheckboxes.forEach(function (item) {
+			item.checked = false;
+		});
+    }
+})
+
+// Отключаем кнопку "Любая", при выборе других параметров
+topLocationCheckboxes.forEach(function (item) {
+    item.addEventListener('change', function () {
+        if (checkBoxAny.checked) {
+            checkBoxAny.checked = false;
+        }
+    })
+})
+
+
+/* Показать еще 3 доп опции с чекбоксами в фильтре */
+const showMoreOptions = document.querySelector('.widget__btn-show-hidden');
+const hiddenCheckBoxes = document.querySelectorAll('.checkbox--hidden');
+
+showMoreOptions.onclick = function (e) {
+    e.preventDefault();
+
+    // Если блоки были скрыты - значит показываем
+    if (showMoreOptions.dataset.options == 'hidden') {
+		hiddenCheckBoxes.forEach(function (item) {
+			item.style.display = 'block';
+		});
+		showMoreOptions.innerText = 'Скрыть дополнительные опции';
+		showMoreOptions.dataset.options = 'visible';
+	}
+	// Если блоки были видны - значит скрываем
+	else if (showMoreOptions.dataset.options == 'visible') {
+		hiddenCheckBoxes.forEach(function (item) {
+			item.style.display = 'none';
+		});
+		showMoreOptions.innerText = 'Показать ещё';
+		showMoreOptions.dataset.options = 'hidden';
+	}
+
+}