js-tasks-ru · Nasty6163459 · Oct 20, 2025 · Oct 20, 2025 · Oct 21, 2025 · Oct 21, 2025
diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css
@@ -1 +1,35 @@
 /* Стилизация кнопки */
+.button {
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-family: Roboto;
+  line-height: 100%;
+  font-weight: 500;
+  padding: 15px 15px 14px;
+ }
+.button_primary {
+  background-color: var(--primary);
+  color: var(--color);
+  border: 1px solid var(--primary);
+  transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
+ } 
+.button_secondary {
+ background-color: var(--secondary);
+ color: var(--white);
+  border: 1px solid var(--secondary);
+ } 
+ .button_alternate {
+  color: #495057;
+  background-color: var(--alternate);
+  border: 1px solid var(--gray-3);
+  transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
+ }
+.button:hover {
+  filter: brightness(80%);
+}
+.button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+} 
+
diff --git a/03-lection1/01-button/index.html b/03-lection1/01-button/index.html
@@ -1,11 +1,20 @@
 <!DOCTYPE html>
 <!-- Страница с кнопкой -->
 <html lang="ru">
-    <head>
+     <head>
         <link rel="stylesheet" href="../../assets/css/main.css">
         <link rel="stylesheet" href="./button.css">
     </head>
     <body>
-
-    </body>
-</html>
+      <div>
+        <button class="button button_primary">Primary</button>
+        <button class="button button_secondary">Secondary</button> 
+        <button class="button button_alternate">Alternate </button> 
+        <button class="button button_primary"> Primary hover</button>       
+      	<button class="button button_secondary">Secondary hover</button> 
+        <button class="button button_alternate">Alternate hover</button>
+        <button class="button button_primary"disabled> Primary disadled</button>       
+      	<button class="button button_secondary"disabled>Secondary disadled</button> 
+        <button class="button button_alternate"disabled>Alternate disadled</button>  
+      </div>         
+  </body>
diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css
@@ -1 +1,45 @@
 /* Стилизация аккордеона */
+.accordion {
+  color: Black;
+  font-family: Inter;  
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #acb5bd;
+  border-radius: 8px; 
+ }
+.accordion__section {
+ background-color: #FFFFFF;
+}
+.accordion__content {
+  color: #ACB5BD;
+  font-family: Inter;
+  font-size: 16px;
+  line-height: 50px;
+  letter-spacing: 0%;  
+}
+.accordion__item {
+  color: Black;
+  font-family: Inter;  
+  font-size: 16px;
+  margin-bottom: 8px;
+ }
+ .accordion__item:last-child {
+  margin-bottom: 0px;
+ }
+.accordion__summary {
+  padding: 10px;
+  background-color: #FFFFFF;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  border-radius: 8px;
+}
+details[open] > summary { 
+  background-color: #e0e0e0;
+  border-bottom: none;
+}
+summary {
+  list-style: none;
+}
diff --git a/03-lection1/02-accordion/index.html b/03-lection1/02-accordion/index.html
@@ -5,14 +5,31 @@
         <link rel="stylesheet" href="../../assets/css/main.css">
         <link rel="stylesheet" href="./accordion.css">
     </head>
-    <body>
-        <details>
-            <summary>
-                Accordion item
+ <body>
+		<div class="accordion">
+  <details class="accordion__section">
+           <summary class="accordion__summary">
+            Accordion item 1
             </summary>
-            <p>
-                Hidden content
-            </p>
-        </details>
+            <div class="accordion__content">
+            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.
+           </div>
+  </details>
+ <details class="accordion__item">
+           <summary class="accordion__summary">
+            Accordion item 2
+            </summary>
+            <div class="accordion__content">
+            ... </div>
+  </details>
+  <details class="accordion__item">
+           <summary class="accordion__summary">
+            Accordion item 3
+            </summary>
+            <div class="accordion__content">
+            ...
+           </div>
+  </details>
+</div>
     </body>
-</html>
+  </html>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -21,6 +21,8 @@
 
     --primary: var(--blue);
     --secondary: var(--purple);
+    --alternate: var(--grey-2);
+    --color: var(--white);
 }
 
 boby {

diff --git a/index.html b/index.html
@@ -4,18 +4,18 @@
       <head>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
         <link rel="stylesheet" href="./assets/css/main.css">
-  </head>
-     <body>
-         <div clacc="page">    
-          <header class="header">
-           <h1 class="header_title">Reusable component library</h1>
-        </header>
+       </head>
+          <body>
+            <div clacc="page">    
+            <header class="header">
+               <h1 class="header_title">Reusable component library</h1>
+            </header>
 
         <main class="preview">
         </main>
 
          <footer class="footer">
          </footer>
-      </div>  
-    </body>
+       </div>  
+       </body>
 </html>