diff --git "a/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2171.jpg" "b/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2171.jpg"
new file mode 100644
index 0000000..95dedbf
Binary files /dev/null and "b/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2171.jpg" differ
diff --git "a/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2172.jpg" "b/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2172.jpg"
new file mode 100644
index 0000000..b8932fb
Binary files /dev/null and "b/img/\320\220\320\261\320\270\321\201\321\201\320\270\320\275\321\201\320\272\320\260\321\2172.jpg" differ
diff --git "a/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.jpg" "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.jpg"
new file mode 100644
index 0000000..b03db80
Binary files /dev/null and "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.jpg" differ
diff --git "a/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.png" "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.png"
new file mode 100644
index 0000000..15cdb21
Binary files /dev/null and "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2171.png" differ
diff --git "a/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2172.jpg" "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2172.jpg"
new file mode 100644
index 0000000..50c9f48
Binary files /dev/null and "b/img/\320\221\321\200\320\270\321\202\320\260\320\275\321\201\320\272\320\260\321\2172.jpg" differ
diff --git "a/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2171.jpg" "b/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2171.jpg"
new file mode 100644
index 0000000..7060ea8
Binary files /dev/null and "b/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2171.jpg" differ
diff --git "a/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2172.jpg" "b/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2172.jpg"
new file mode 100644
index 0000000..34e41c3
Binary files /dev/null and "b/img/\321\200\321\203\321\201\321\201\320\272\320\260\321\217_\320\263\320\276\320\273\321\203\320\261\320\260\321\2172.jpg" differ
diff --git "a/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2171.jpg" "b/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2171.jpg"
new file mode 100644
index 0000000..c625258
Binary files /dev/null and "b/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2171.jpg" differ
diff --git "a/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2172.jpg" "b/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2172.jpg"
new file mode 100644
index 0000000..3c81dbe
Binary files /dev/null and "b/img/\321\201\320\270\320\260\320\274\321\201\320\272\320\260\321\2172.jpg" differ
diff --git a/index.css b/index.css
index e69de29..4bee73f 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,330 @@
+body
+{
+ background-color: #ebebeb;
+ width: 1300px;
+ margin: 0 auto;
+ vertical-align: top;
+}
+
+header
+{
+ font: bold 45px Arial, sans-serif;
+ text-align: center;
+ margin: 50px auto;
+}
+
+footer
+{
+ position: relative;
+ border-top: 1px solid #000;
+ padding: 20px;
+}
+
+footer > a
+{
+ position: absolute;
+ right: 50px;
+}
+
+h1
+{
+ color: #f00;
+ font: 30px Arial, sans-serif;
+ padding: 0;
+ margin: 0;
+}
+
+input[type='radio']
+{
+ display: none;
+}
+
+li,
+ul
+{
+ padding: 0;
+ margin: 0;
+}
+
+.brit:checked ~ .menu > .menu-button + .britanskaya,
+.rus:checked ~ .menu > .menu-button + .russkaya,
+.siam:checked ~ .menu > .menu-button + .siamskaya,
+.all:checked ~ .menu > .menu-button + .all,
+.abis:checked ~ .menu > .menu-button:first-child
+{
+ background-color: #b9b9b9;
+}
+
+.brit:checked ~ .photos > .photo + :not(.britanskaya) > .close-photo,
+.brit:checked ~ .photos > .photo:first-child > .close-photo,
+.rus:checked ~ .photos > .photo + :not(.russkaya) > .close-photo,
+.rus:checked ~ .photos > .photo:first-child > .close-photo,
+.siam:checked ~ .photos > .photo + :not(.siamskaya) > .close-photo,
+.siam:checked ~ .photos > .photo:first-child > .close-photo,
+.abis:checked ~ .photos > .photo + :not(.abissinskaya) > .close-photo,
+.brit:checked ~ .photos > .britanskaya:hover > .description,
+.rus:checked ~ .photos > .russkaya:hover > .description,
+.siam:checked ~ .photos > .siamskaya:hover > .description,
+.abis:checked ~ .photos > .photo:first-child:hover > .description,
+.abis:checked ~ .photos > .abissinskaya:hover > .description,
+.all:checked ~ .photos > .photo:hover > .description
+{
+ display: block;
+}
+
+.menu-button:hover
+{
+ background-color: #c9c9c9;
+}
+
+.label-full-button
+{
+ padding: 20px;
+ display: block;
+}
+
+.menu-button
+{
+ font: 20px Arial, sans-serif;
+ border-bottom: 1px solid #000;
+ list-style-type: none;
+}
+
+.menu
+{
+ background-color: #d9d9d9;
+ width: 250px;
+ display: inline-block;
+ margin-bottom: 12px;
+}
+
+main
+{
+ display: flex;
+ height: 100%;
+}
+
+.close-photo
+{
+ position: absolute;
+ background-color: rgba(0, 0, 0, .4);
+ top: 0;
+ display: none;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+}
+
+.description
+{
+ position: absolute;
+ background-color: rgba(0, 0, 0, .4);
+ top: 190px;
+ padding: 20px 10px;
+ display: none;
+ color: #fff;
+ font: 16px Arial, sans-serif;
+}
+
+.photo
+{
+ margin: 0 6px 10px;
+ position: relative;
+}
+
+.rating
+{
+
+ background-color: #d9d9d9;
+ width: 250px;
+ height: 100%;
+ padding: 15px;
+}
+
+.sort-rates
+{
+ font: 18px Arial, sans-serif;
+ width: 90%;
+ margin-top: 15px;
+}
+
+.sort-rates > .sort-rating-checkbox
+{
+ vertical-align: middle;
+ float: right;
+}
+
+.rates
+{
+ background-color: #d9d9d9;
+ width: 100%;
+ height: 100%;
+ margin-top: 10px;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.rate-item
+{
+ font: 20px Arial, sans-serif;
+ width: 100%;
+ padding: 10px 0;
+
+}
+
+.rate-number
+{
+ float: right;
+}
+
+.rate
+{
+ display: inline-block;
+}
+
+.sort-rating-checkbox:checked ~ .rates > .ten
+{
+ order: 1;
+}
+
+.sort-rating-checkbox:checked ~ .rates > .nine
+{
+ order: 2;
+}
+
+.sort-rating-checkbox:checked ~ .rates > .eight
+{
+ order: 3;
+}
+
+.sort-rating-checkbox:checked ~ .rates > .four
+{
+ order: 4;
+}
+
+.sort-rating-checkbox ~ .rates > .ten
+{
+ order: 3;
+}
+
+.sort-rating-checkbox ~ .rates > .nine
+{
+ order: 1;
+}
+
+.sort-rating-checkbox ~ .rates > .eight
+{
+ order: 2;
+}
+
+.sort-rating-checkbox ~ .rates > .four
+{
+ order: 4;
+}
+
+.ten > .rate,
+.nine > .rate
+{
+ background: linear-gradient(to right, #0f0, #fff);
+ width: 150px;
+ height: 15px;
+ border: 1px solid #000;
+}
+
+.eight > .rate
+{
+ background: linear-gradient(to right, #ff0, #fff);
+ width: 120px;
+ height: 15px;
+ border: 1px solid #000;
+}
+
+.four > .rate
+{
+ background: linear-gradient(to right, #f00, #fff);
+ width: 80px;
+ height: 15px;
+ border: 1px solid #000;
+}
+
+.flex-grid:checked ~ main > .flex,
+.flex-grid:not(:checked) ~ main > .grid
+{
+ display: none;
+}
+
+.flex-grid:checked ~ main > .grid
+{
+ display: grid;
+ grid-template-columns: 6px 250px 12px 250px 12px 250px 8px;
+ grid-template-rows: 286px 14px 286px 14px 286px 14px 286px 12px;
+}
+
+.grid > .photo > img
+{
+ width: 100%;
+ height: 100%;
+}
+
+.grid > .photo
+{
+ margin: 0;
+}
+
+.flex-grid:not(:checked) ~ main > .flex
+{
+ width: 800px;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.first
+{
+ grid-row: 1;
+ grid-column: 2;
+}
+
+.second
+{
+ grid-row: 1;
+ grid-column-start: 4;
+ grid-column-end: 7;
+}
+
+.third
+{
+ grid-row: 3;
+ grid-column: 2;
+}
+
+.forth
+{
+ grid-row: 3;
+ grid-column: 4;
+}
+
+.fifth
+{
+ grid-row: 3;
+ grid-column: 6;
+}
+
+.sixth
+{
+ grid-row: 5;
+ grid-column-start: 2;
+ grid-column-end: 5;
+}
+
+.seventh
+{
+ grid-row: 5;
+ grid-column: 6;
+}
+
+.eighth
+{
+ grid-row: 7;
+ grid-column-start: 2;
+ grid-column-end: 7;
+}
diff --git a/index.html b/index.html
index d810ba7..e1b21a3 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,165 @@
+
+ Бабуленькины котятки
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Гоша, 2 года
+
+
+
+
+
Клеопатра, 3 месяца
+
+
+
+
+
Няша, 1.5 года
+
+
+
+
+
Люмьер, 1 год
+
+
+
+
+
Лиза, 4 месяца
+
+
+
+
+
Марк, 6 месяца
+
+
+
+
+
Макс, 2 месяца
+
+
+
+
+
Фелиция, 3 года
+
+
+
+
+
+
Гоша, 2 года
+
+
+
+
+
Клеопатра, 3 месяца
+
+
+
+
+
Няша, 1.5 года
+
+
+
+
+
Люмьер, 1 год
+
+
+
+
+
Лиза, 4 месяца
+
+
+
+
+
Марк, 6 месяца
+
+
+
+
+
Макс, 2 месяца
+
+
+
+
+
Фелиция, 3 года
+
+
+
+
РЭЙТИНГ
+
+
+
+
+
+
+
+
Русская голубая
+
+
10
+
+
+
+
+