Repository: js-tasks-ru/htmlcss-20250313_grif5
Pull request #6: add accordion
Author: login: gri-f
Created: 2025-03-24T22:51:01Z | Merged: 2025-03-28T14:00:22Z

add accordion


Diff:
diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css
index ae99791..f650607 100644
--- a/03-lection1/02-accordion/accordion.css
+++ b/03-lection1/02-accordion/accordion.css
@@ -1 +1,25 @@
-/* Стилизация аккордеона */
+.accordion__item {
+  padding: 24px 48px 32px 32px;
+  margin-bottom: 8px;
+  border: 1px solid var(--grey-3);
+  border-radius: 8px;
+  font-family: 'Inter';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--black);
+  background-color: var(--white);
+}
+.accordion__item:last-child {
+  margin-bottom: 0;
+}
+.accordion__summary {
+  display: block;
+}
+.accordion__summary::-webkit-details-marker {
+  display: none;
+}
+.accordion__text {
+  margin-top: 16px;
+  color: var(--grey-4);
+}
\ No newline at end of file
diff --git a/03-lection1/02-accordion/index.html b/03-lection1/02-accordion/index.html
index ecfe421..870fa46 100644
--- a/03-lection1/02-accordion/index.html
+++ b/03-lection1/02-accordion/index.html
@@ -6,13 +6,31 @@
         <link rel="stylesheet" href="./accordion.css">
     </head>
     <body>
-        <details>
-            <summary>
-                Accordion item
-            </summary>
-            <p>
-                Hidden content
-            </p>
-        </details>
+        <div class="accordion">
+            <details class='accordion__item'>
+                <summary class='accordion__summary'>
+                    Accordion item 1
+                </summary>
+                <p class='accordion__text'>
+                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
+                </p>
+            </details>
+            <details class='accordion__item'>
+                <summary class='accordion__summary'>
+                    Accordion item 2
+                </summary>
+                <p class='accordion__text'>
+                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
+                </p>
+            </details>
+            <details class='accordion__item'>
+                <summary class='accordion__summary'>
+                    Accordion item 3
+                </summary>
+                <p class='accordion__text'>
+                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
+                </p>
+            </details>
+        </div>
     </body>
 </html>
diff --git a/assets/css/reset.css b/assets/css/reset.css
index b01379f..7c4bb1a 100644
--- a/assets/css/reset.css
+++ b/assets/css/reset.css
@@ -1,4 +1,4 @@
-h1, h2 {
+h1, h2, p {
   margin: 0;
   padding: 0;
 }
\ No newline at end of file


Reviews:
user: login: GSemikozov
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-26T16:31:46Z
user: login: GSemikozov
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-27T05:58:52Z
user: login: GSemikozov
state: APPROVED
author_association: NONE
submitted_at: 2025-03-28T14:00:12Z

Review comments:
diff_hunk: @@ -1 +1,25 @@
-/* Стилизация аккордеона */
+.accordion {
path: 03-lection1/02-accordion/accordion.css
user: login: GSemikozov
body: верстаем не 3 отдельных аккордиона, а 1 аккордион, но с 3 секциями :) так что по логике здесь описываем элемент блока, а не сам блок. Тогда и марджины здесь можно задавать, и отступ снизу тоже будет обнуляться корректно
created_at: 2025-03-26T16:31:20Z
author_association: NONE
diff_hunk: @@ -1 +1,25 @@
-/* Стилизация аккордеона */
+.accordion {
+  margin-bottom: 8px;
+  padding: 24px 48px 32px 32px;
+  border: 1px solid var(--grey-3);
+  border-radius: 8px;
+  width: 730px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--black);
+  background-color: var(--white);
+}
+.accordion:last-child {
+  margin-bottom: 0;
+}
+.accordion__summary {
+  margin-bottom: 16px;
path: 03-lection1/02-accordion/accordion.css
user: login: GSemikozov
body: лучше отступ сверху у __text
created_at: 2025-03-26T16:31:38Z
author_association: NONE
diff_hunk: @@ -1 +1,25 @@
-/* Стилизация аккордеона */
+.accordion__item {
+  padding: 24px 48px 32px 32px;
+  margin-bottom: 8px;
+  border: 1px solid var(--grey-3);
+  border-radius: 8px;
+  width: 730px;
path: 03-lection1/02-accordion/accordion.css
user: login: GSemikozov
body: лишнее ограничение, удалим
created_at: 2025-03-27T05:57:49Z
author_association: NONE
diff_hunk: @@ -1 +1,25 @@
-/* Стилизация аккордеона */
+.accordion__item {
+  padding: 24px 48px 32px 32px;
+  margin-bottom: 8px;
+  border: 1px solid var(--grey-3);
+  border-radius: 8px;
+  width: 730px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
path: 03-lection1/02-accordion/accordion.css
user: login: GSemikozov
body: не хватает font-family
created_at: 2025-03-27T05:58:07Z
author_association: NONE

PR comments:
user: login: jsru-1
created_at: 2025-03-24T22:51:28Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR
user: login: jsru-1
created_at: 2025-03-26T18:14:52Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR