diff --git a/images/1.jpg b/images/1.jpg
new file mode 100644
index 0000000..e417fa2
Binary files /dev/null and b/images/1.jpg differ
diff --git a/images/pic.jpg b/images/pic.jpg
new file mode 100644
index 0000000..8a77ad3
Binary files /dev/null and b/images/pic.jpg differ
diff --git a/images/pic2.jpg b/images/pic2.jpg
new file mode 100644
index 0000000..678d845
Binary files /dev/null and b/images/pic2.jpg differ
diff --git a/index.css b/index.css
index e69de29..416d1f7 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,107 @@
+.card
+{
+    width: 300px;
+    border: 1.5px solid rgba(150, 145, 145, .3);
+    display: inline-block;
+    margin: 15px 15px 0 0;
+}
+
+.card:hover
+{
+    box-shadow: 0 0 10px;
+    color: #1b1a1a;
+}
+
+.full-info-switch
+{
+    display: none;
+}
+
+.full-info-switch-pic
+{
+    width: 30px;
+    height: 30px;
+    display: block;
+    cursor: pointer;
+}
+
+.full-info-switch:not(:checked) ~ .full-info-switch-pic
+{
+    background: url(images/pic.jpg) center / contain;
+}
+
+.full-info-switch:checked ~ .full-info-switch-pic
+{
+    background: url(images/pic2.jpg) center / contain;
+}
+
+.full-info-switch:checked ~ .card
+{
+    width: 350px;
+    display: block;
+}
+
+.full-info-switch:not(:checked) ~ .card
+{
+    display: inline-block;
+}
+
+.full-info-switch:checked ~ .card > .short-info,
+.full-info-switch:not(:checked) ~ .card > .full-info
+{
+    display: none;
+}
+
+img
+{
+    width: 100%;
+    display: block;
+}
+
+img:hover
+{
+    box-shadow: 0 0 10px;
+    color: #1b1a1a;
+}
+
+.short-info > ul
+{
+    list-style-type: none;
+    padding: 0;
+    
+}
+
+.name-link
+{
+    text-decoration: none;
+    color: #1b1a1a;
+}
+
+.short-info > ul > li:hover
+{
+    font-size: 104%;
+}
+
+.short-info
+{
+    font-size: 15px;
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 10px 0 0 16px;
+}
+
+.full-info
+{
+    font-size: 15px;
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 10px 0 20px 16px;
+}
+
+.cat-name
+{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 25px;
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 10px 0 0 15px;
+}
diff --git a/index.html b/index.html
index e0daf3e..44f7e31 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,164 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="index.css" type="text/css">
     <title>Задача «Про котиков»</title>
 </head>
 <body>
+    <input id="FullInfoSwitch" class="full-info-switch" type="checkbox">
+    <label class="full-info-switch-pic" for="FullInfoSwitch"></label>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
+    <article class="card">
+        <img src="images/1.jpg" alt="cat">
+        <h2 class="cat-name"><a class="name-link" href="#">Бора-бора</a></h2>
+        <div class="short-info">
+            <ul>
+                <li>Возраст: 11 месяцев</li>
+                <li>Болезни: нет</li>
+                <li>Порода: лев</li>
+                <li>Статус: ищет хозяина</li>
+            </ul>
+        </div>
+        <div class="full-info">
+                Дружелюбный, ласковый, ручной.<br>
+                Возраст почти пол года.<br>
+                Все прививки поставлены
+        </div>
+    </article>
 </body>
 </html>
