diff --git a/images/cat1.jpg b/images/cat1.jpg
new file mode 100644
index 0000000..92ca7e9
Binary files /dev/null and b/images/cat1.jpg differ
diff --git a/images/cat10.jpg b/images/cat10.jpg
new file mode 100644
index 0000000..73b53e4
Binary files /dev/null and b/images/cat10.jpg differ
diff --git a/images/cat2.jpg b/images/cat2.jpg
new file mode 100644
index 0000000..150924a
Binary files /dev/null and b/images/cat2.jpg differ
diff --git a/images/cat3.jpg b/images/cat3.jpg
new file mode 100644
index 0000000..30753dc
Binary files /dev/null and b/images/cat3.jpg differ
diff --git a/images/cat4.jpg b/images/cat4.jpg
new file mode 100644
index 0000000..78b9a7d
Binary files /dev/null and b/images/cat4.jpg differ
diff --git a/images/cat5.jpg b/images/cat5.jpg
new file mode 100644
index 0000000..d82d754
Binary files /dev/null and b/images/cat5.jpg differ
diff --git a/images/cat6.jpg b/images/cat6.jpg
new file mode 100644
index 0000000..64e84b5
Binary files /dev/null and b/images/cat6.jpg differ
diff --git a/images/cat7.jpg b/images/cat7.jpg
new file mode 100644
index 0000000..c55d1a7
Binary files /dev/null and b/images/cat7.jpg differ
diff --git a/images/cat8.jpg b/images/cat8.jpg
new file mode 100644
index 0000000..d14b6c6
Binary files /dev/null and b/images/cat8.jpg differ
diff --git a/images/cat9.jpg b/images/cat9.jpg
new file mode 100644
index 0000000..8c2fcb8
Binary files /dev/null and b/images/cat9.jpg differ
diff --git a/index.css b/index.css
index e69de29..fbf6773 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,399 @@
+body
+{
+    position: relative;
+    min-height: 100%;
+}
+
+html
+{
+    height: 100%;
+}
+
+.grid
+{
+    padding-bottom: 50px;
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+}
+
+main
+{
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: 'nav content';
+    padding: 2px;
+    background: rgb(230, 230, 230);
+}
+
+.breed-category-radio
+{
+    display: none;
+}
+
+.breed-labels
+{
+    grid-column-start: nav-start;
+    grid-column-end: nav-end;
+    text-align: center;
+    padding: 2px;
+    height: 100%;
+}
+
+.breed-category
+{
+    display: block;
+    width: 100%;
+    height: 50px;
+    background: rgb(200, 200, 200);
+    border-bottom: 1px solid black;
+}
+
+.breed-category:hover
+{
+    background: #ccf;
+}
+
+.breed-category:checked
+{
+    background: blue;
+}
+
+.breed-category-radio[title='thai']:checked ~ .cards-grid-template .card:not(
+[title='thai'])
+{
+    opacity: .6;
+}
+
+.breed-category-radio[
+title='mainecoon']:checked ~ .cards-grid-template .card:not(
+    [title='maincoone'])
+{
+    opacity: .6;
+}
+
+.breed-category-radio[title='home']:checked ~ .cards-grid-template .card:not(
+[title='home'])
+{
+    opacity: .6;
+}
+
+.breed-category-radio[title='bengal']:checked ~ .cards-grid-template .card:not(
+[title='bengal'])
+{
+    opacity: .6;
+}
+
+.breed-category-radio[title='somaly']:checked ~ .cards-grid-template .card:not(
+[title='somaly'])
+{
+    opacity: .6;
+}
+
+.rating
+{
+    grid-row: auto;
+    padding: 2px;
+    background: rgb(200, 200, 200);
+}
+
+.cards-grid-template
+{
+    grid-column-start: content-start;
+    grid-column-end: content-end;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas: 'first second second'
+        'third fourth fifth'
+        'sixth sixth seventh'
+        'eighth eighth eighth';
+}
+
+.card-image
+{
+    width: 100%;
+    height: 100%;
+}
+
+.cards-grid-template > .card
+{
+    height: 250px;
+    width: 99%;
+    padding: 2px;
+    position: relative;
+}
+
+.cards-grid-template > :nth-child(8n+1)
+{
+    grid-column-start: first-start;
+    grid-column-end: first-end;
+}
+
+.cards-grid-template > :nth-child(8n+2)
+{
+    grid-column-start: second-start;
+    grid-column-end: second-end;
+}
+
+.cards-grid-template > :nth-child(8n+3)
+{
+    grid-column-start: third-start;
+    grid-column-end: third-end;
+}
+
+.cards-grid-template > :nth-child(8n+4)
+{
+    grid-column-start: fourth-start;
+    grid-column-end: fourth-end;
+}
+
+.cards-grid-template > :nth-child(8n+5)
+{
+    grid-column-start: fifth-start;
+    grid-column-end: fifth-end;
+}
+
+.cards-grid-template > :nth-child(8n+6)
+{
+    grid-column-start: sixth-start;
+    grid-column-end: sixth-end;
+}
+
+.cards-grid-template > :nth-child(8n+7)
+{
+    grid-column-start: seventh-start;
+    grid-column-end: seventh-end;
+}
+
+.cards-grid-template > :nth-child(8n)
+{
+    grid-column-start: eighth-start;
+    grid-column-end: eighth-end;
+}
+
+.rating > .rating-values
+{
+    display: grid;
+    grid-template-columns: auto;
+}
+
+.rating-info
+{
+    display: grid;
+    grid-template-columns: auto 50px;
+    grid-template-areas: 'title title'
+        'bar value';
+    order: 50;
+}
+
+.rating-breed-name
+{
+    grid-column-start: title-start;
+    grid-column-end: title-end;
+    color: blue;
+}
+
+.rating-title
+{
+    color: blue;
+    order: 1;
+}
+
+.rating-value
+{
+    color: blue;
+    grid-column-start: value-start;
+    grid-column-end: value-end;
+}
+
+.rating-sort
+{
+    display: inline-block;
+    order: 2;
+}
+
+.rating-bar
+{
+    height: 20px;
+    border: 1px solid blue;
+    grid-column-start: bar-start;
+    grid-column-end: bar-end;
+}
+
+/* stylelint-disable declaration-block-no-duplicate-properties */
+
+.rating-bar[title='5']
+{
+    width: 50%;
+    background: yellow;
+    background: -webkit-linear-gradient(left, yellow, white);
+    background: -o-linear-gradient(right, yellow, white);
+    background: -moz-linear-gradient(right, yellow, white);
+    background: linear-gradient(to right, yellow, white);
+}
+
+.rating-bar[title='10']
+{
+    width: 100%;
+    background: green;
+    background: -webkit-linear-gradient(left, green, white);
+    background: -o-linear-gradient(right, green, white);
+    background: -moz-linear-gradient(right, green, white);
+    background: linear-gradient(to right, green, white);
+}
+
+.rating-bar[title='1']
+{
+    width: 10%;
+    background: red;
+    background: -webkit-linear-gradient(left, red, white);
+    background: -o-linear-gradient(right, red, white);
+    background: -moz-linear-gradient(right, red, white);
+    background: linear-gradient(to right, red, white);
+}
+
+.rating-bar[title='2']
+{
+    width: 20%;
+    background: red;
+    background: -webkit-linear-gradient(left, red, white);
+    background: -o-linear-gradient(right, red, white);
+    background: -moz-linear-gradient(right, red, white);
+    background: linear-gradient(to right, red, white);
+}
+
+.rating-bar[title='3']
+{
+    width: 30%;
+    background: red;
+    background: -webkit-linear-gradient(left, red, white);
+    background: -o-linear-gradient(right, red, white);
+    background: -moz-linear-gradient(right, red, white);
+    background: linear-gradient(to right, red, white);
+}
+
+.rating-bar[title='4']
+{
+    width: 40%;
+    background: red;
+    background: -webkit-linear-gradient(left, red, white);
+    background: -o-linear-gradient(right, red, white);
+    background: -moz-linear-gradient(right, red, white);
+    background: linear-gradient(to right, red, white);
+}
+
+.rating-bar[title='6']
+{
+    width: 60%;
+    background: yellow;
+    background: -webkit-linear-gradient(left, yellow, white);
+    background: -o-linear-gradient(right, yellow, white);
+    background: -moz-linear-gradient(right, yellow, white);
+    background: linear-gradient(to right, yellow, white);
+}
+
+.rating-bar[title='7']
+{
+    width: 70%;
+    background: yellow;
+    background: -webkit-linear-gradient(left, yellow, white);
+    background: -o-linear-gradient(right, yellow, white);
+    background: -moz-linear-gradient(right, yellow, white);
+    background: linear-gradient(to right, yellow, white);
+}
+
+.rating-bar[title='8']
+{
+    width: 80%;
+    background: green;
+    background: -webkit-linear-gradient(left, green, white);
+    background: -o-linear-gradient(right, green, white);
+    background: -moz-linear-gradient(right, green, white);
+    background: linear-gradient(to right, green, white);
+}
+
+.rating-bar[title='9']
+{
+    width: 90%;
+    background: green;
+    background: -webkit-linear-gradient(left, green, white);
+    background: -o-linear-gradient(right, green, white);
+    background: -moz-linear-gradient(right, green, white);
+    background: linear-gradient(to right, green, white);
+}
+
+/* stylelint-enable declaration-block-no-duplicate-properties */
+
+.rating-sort:checked ~ .rating-info[title='10']
+{
+    order: 3;
+}
+
+.rating-sort:checked ~ .rating-info[title='9']
+{
+    order: 4;
+}
+
+.rating-sort:checked ~ .rating-info[title='8']
+{
+    order: 5;
+}
+
+.rating-sort:checked ~ .rating-info[title='7']
+{
+    order: 6;
+}
+
+.rating-sort:checked ~ .rating-info[title='6']
+{
+    order: 7;
+}
+
+.rating-sort:checked ~ .rating-info[title='5']
+{
+    order: 8;
+}
+
+.rating-sort:checked ~ .rating-info[title='4']
+{
+    order: 9;
+}
+
+.rating-sort:checked ~ .rating-info[title='3']
+{
+    order: 19;
+}
+
+.rating-sort:checked ~ .rating-info[title='2']
+{
+    order: 11;
+}
+
+.rating-sort:checked ~ .rating-info[title='1']
+{
+    order: 12;
+}
+
+.card-info
+{
+    display: none;
+}
+
+.card:hover > .card-info
+{
+    position: absolute;
+    top: 150px;
+    width: 100%;
+    background: rgba(50, 50, 50, .5);
+    display: block;
+    color: white;
+    text-align: color;
+}
+
+footer
+{
+    height: 50px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
diff --git a/index.html b/index.html
index d810ba7..a53a82f 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,151 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <title>Cats cats</title>
+    <link rel="stylesheet" href="index.css">
 </head>
 <body>
+    <div class="grid">
+        <main>
+            <div class="breed-labels">
+                <label class="breed-category" for="thaiBreedCategory">Thai</label>
+                <label class="breed-category" for="somalyBreedCategory">Somaly</label>
+                <label class="breed-category" for="homeBreedCategory">Home</label>
+                <label class="breed-category" for="mainecooneBreedCategory">Mainecoon</label>
+                <label class="breed-category" for="bengalBreedCategory">Bengal</label>
+            </div>
+            <input type="radio" name="breed" id="thaiBreedCategory"
+            class="breed-category-radio" title="thai">
+            <input type="radio" name="breed" id="somalyBreedCategory"
+            class="breed-category-radio" title="somaly">
+            <input type="radio" name="breed" id="homeBreedCategory"
+            class="breed-category-radio" title="home">
+            <input type="radio" name="breed" id="mainecooneBreedCategory"
+            class="breed-category-radio" title="mainecoon">
+            <input type="radio" name="breed" id="bengalBreedCategory"
+            class="breed-category-radio" title="bengal">
+            <div class="cards-grid-template">
+                <article class="card" title="thai">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat1.jpg">
+                    <div class="card-info">
+                        <h3>Cat</h3>
+                        <p>thai</p>
+                    </div>
+                </article>
+                <article class="card" title="thai">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat2.jpg">
+                    <div class="card-info">
+                        <h3>John</h3>
+                        <p>thai</p>
+                    </div>
+                </article>
+<article class="card" title="home">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat3.jpg">
+                    <div class="card-info">
+                        <h3>Albous</h3>
+                        <p>home</p>
+                    </div>
+                </article>
+<article class="card" title="somaly">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat4.jpg">
+                    <div class="card-info">
+                        <h3>Harry</h3>
+                        <p>somaly</p>
+                    </div>
+                </article>
+<article class="card" title="thai">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat5.jpg">
+                    <div class="card-info">
+                        <h3>Jameson</h3>
+                        <p>thai</p>
+                    </div>
+                </article>
+<article class="card" title="thai">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat6.jpg">
+                    <div class="card-info">
+                        <h3>Peter</h3>
+                        <p>thai</p>
+                    </div>
+                </article>
+<article class="card" title="maincoone">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat7.jpg">
+                    <div class="card-info">
+                        <h3>Harry</h3>
+                        <p>maincoone</p>
+                    </div>
+                </article>
+<article class="card" title="bengal">
+                    <img class="card-image" alt="cat" title="cat" src="images/cat8.jpg">
+                    <div class="card-info">
+                        <h3>Peter</h3>
+                        <p>bengal</p>
+                    </div>
+                </article>
+<article class="card" title="home">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat9.jpg">
+                    <div class="card-info">
+                        <h3>Johny</h3>
+                        <p>home</p>
+                    </div>
+                </article>
+<article class="card" title="thai">
+                    <img class="card-image" alt="cat" title="cat" 
+                    src="images/cat10.jpg">
+                    <div class="card-info">
+                        <h3>Jack</h3>
+                        <p>thai</p>
+                    </div>
+                </article>
+            </div>
+        </main>
+        <aside class="rating">
+            <div class="rating-values">
+                <h1 class="rating-title">Rating</h1>
+                <input id="ratingSort" type="checkbox"  class="rating-sort">
+                <label class="rating-sort" for="ratingSort">Sort</label>
+                <div title="5" class="rating-info">
+                    <p class="rating-breed-name">
+                        Thai
+                    </p>
+                    <span title="5" class="rating-bar">
+                    </span>
+                    <span class="rating-value">
+                        5
+                    </span>
+                </div>
+                <div title="10" class="rating-info">
+                    <p class="rating-breed-name">
+                        Home
+                    </p>
+                    <span title="10" class="rating-bar">
+                    </span>
+                    <span class="rating-value">
+                        10
+                    </span>
+                </div>
+                <div title="10" class="rating-info">
+                    <p class="rating-breed-name">
+                        BlackAndWhite
+                    </p>
+                    <span title="10" class="rating-bar">
+                    </span>
+                    <span class="rating-value">
+                        10
+                    </span>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <footer>
+        <p>Cats Ltd.</p>
+    </footer>
 </body>
 </html>