js-tasks-ru · nikita539 · Oct 31, 2021 · Nov 4, 2021 · Nov 4, 2021 · Nov 5, 2021
diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css
@@ -1 +1,70 @@
 /* Стилизация кнопки */
+.button {
+    width: 189px;
+    height: 48px;
+    border-radius: 8px;
+    border: none;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
+    font-family: Roboto, serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+
+/*button__primary*/
+.button_primary {
+    background-color: var(--primary);
+    color: var(--white);
+}
+
+.button_primary:hover {
+    background-color: var(--primary-hover);
+}
+
+.button_primary:disabled {
+    background-color: var(--primary-disabled);
+    color: var(--white);
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+/*button__secondary*/
+.button_secondary {
+    background-color: var(--secondary);
+    color: var(--white);
+}
+
+.button_secondary:hover {
+    background-color: var(--secondary-hover);
+}
+
+.button_secondary:disabled {
+    background-color: var(--purple-disabled);
+    opacity: 0.5;
+    color: var(--white);
+    pointer-events: none;
+}
+
+/*Alternate*/
+.button_alternate {
+    background-color: var(--white);
+    color: var(--grey-4);
+    border: 1px solid #ACB5BD;
+}
+
+.button_alternate:hover {
+    border: 1px solid #212429;
+}
+
+.button_alternate:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+
+
diff --git a/03-lection1/01-button/index.html b/03-lection1/01-button/index.html
@@ -4,8 +4,26 @@
     <head>
         <link rel="stylesheet" href="../../assets/css/main.css">
         <link rel="stylesheet" href="./button.css">
+        <style type="text/css">
+            .container__buttons {
+                width: 40%;
+                margin: auto;
+                padding: 30px;
+                box-sizing: border-box;
+                display: grid;
+                grid-template-columns: repeat(2,1fr);
+                row-gap: 10px;
+            }
+        </style>
     </head>
     <body>
-
+    <div class="container__buttons">
+        <button class="button button_primary">Primary</button>
+        <button class="button button_primary" disabled="disabled">Primary</button>
+        <button class="button button_secondary">Secondary</button>
+        <button class="button button_secondary" disabled="disabled">Secondary</button>
+        <button class="button button_alternate">Alternate</button>
+        <button class="button button_alternate" disabled="disabled">Alternate</button>
+    </div>
     </body>
 </html>
diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css
@@ -1 +1,21 @@
 /* Стилизация аккордеона */
+.accordion {
+    width: 730px;
+    border: 1px solid #ACB5BD;
+    box-sizing: border-box;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.accordion__title {
+    cursor: pointer;
+}
+
+details > summary {
+    list-style: none;
+}
+details > summary::-webkit-details-marker {
+    display: none;
+}
+
+
diff --git a/03-lection1/02-accordion/index.html b/03-lection1/02-accordion/index.html
@@ -6,12 +6,12 @@
         <link rel="stylesheet" href="./accordion.css">
     </head>
     <body>
-        <details>
-            <summary>
+        <details class="accordion">
+            <summary class="accordion__title">
                 Accordion item
             </summary>
-            <p>
-                Hidden content
+            <p class="accordion__description">
+                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>
     </body>

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5,7 +5,11 @@
     --black: #212429;
     --pink: #F784AD;
     --purple: #7048E8;
+    --purple-hover: #5028C6;
+    --purple-disabled: #7048E8;
     --blue: #374FC7;
+    --blue-hover: #2342C0;
+    --blue-disabled: #4263EB;
     --red: #F03D3E;
     --grey-1: #F8F9FA;
     --grey-2: #DDE2E5;
@@ -17,15 +21,42 @@
     --success: var(--blue);
 
     --primary: var(--blue);
+    --primary-hover: var(--blue-hover);
+    --primary-disabled: var(--blue-disabled);
+
+
     --secondary: var(--purple);
+    --secondary-hover: var(--purple-hover);
+    --secondary-disabled: var(--purple-disabled) ;
 }
 
 * {
     font-family: 'Roboto', sans-serif;
 }
 
+.container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+
+.container__flex-position {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
 body {
     margin: 0;
     width: 100%;
     height: 100vh;
+    overflow-x: hidden;
+}
+
+@media screen and (max-width: 700px){
+    .container__flex-position {
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+    }
 }
diff --git a/components/card/card.css b/components/card/card.css
@@ -0,0 +1,8 @@
+.card {
+    height: 367px;
+    background: var(--white);
+    /* Card Shadow */
+
+    box-shadow: 0px 2px 4px rgba(33, 36, 41, 0.05);
+    border-radius: 12px;
+}
diff --git a/components/footer/footer.css b/components/footer/footer.css
@@ -0,0 +1,27 @@
+.footer__title {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 38px;
+    line-height: 48px;
+    text-align: center;
+    /* identical to box height, or 126% */
+
+
+    /* Black */
+
+    color: var(--black);
+}
+
+.footer__description {
+    text-align: center;
+    width: 640px;
+    margin: 0 auto 100px auto;
+}
+
+@media screen and (max-width: 700px){
+    .footer {
+        display: none;
+    }
+}
+
diff --git a/components/header/header.css b/components/header/header.css
@@ -0,0 +1,15 @@
+.header__title {
+    /* h1 */
+
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 50px;
+    line-height: 64px;
+    /* identical to box height, or 128% */
+
+
+    /* Black */
+
+    color: var(--black);
+}
diff --git a/components/main/main.css b/components/main/main.css
@@ -0,0 +1,14 @@
+.main {
+    background-color: var(--grey-3);
+}
+
+.main__card {
+    margin: 15px;
+    width: calc(30% - 30px);
+}
+
+@media screen and (max-width: 700px){
+    .main__card {
+        width: auto;
+    }
+}
diff --git a/index.html b/index.html
@@ -3,8 +3,36 @@
 <html lang="ru">
     <head>
         <link rel="stylesheet" href="./assets/css/main.css">
+        <link rel="stylesheet" href="./components/footer/footer.css">
+        <link rel="stylesheet" href="./components/header/header.css">
+        <link rel="stylesheet" href="./components/main/main.css">
+        <link rel="stylesheet" href="./components/card/card.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
-
+    <div class="wrapper">
+        <header class="header">
+            <div class="container">
+                <h1 class="header__title">Reusable Component Library</h1>
+            </div>
+        </header>
+        <main class="main">
+            <div class="container container__flex-position">
+                <article class="card main__card"></article>
+                <article class="card main__card"></article>
+                <article class="card main__card"></article>
+                <article class="card main__card"></article>
+                <article class="card main__card"></article>
+                <article class="card main__card"></article>
+            </div>
+        </main>
+        <footer class="footer">
+            <div class="container">
+                <h1 class="footer__title">About</h1>
+                <p class="footer__description">This project is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your projects. Get started by checking out our free preview components, or browsing the PNG previews in the categories you're most curious about.</p>
+            </div>
+        </footer>
+    </div>
     </body>
 </html>
+
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
+    "normalize.css": "^8.0.1",
     "prettier": "^2.2.1"
   }
 }