Фомин Денис

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%;
+}