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,26 @@
 /* Стилизация кнопки */
+:root {
+    --background-color: #ACB5BD;
+}
+
+.container__buttons {
+    width: 70%;
+    height: 500px;
+    margin: auto;
+    background-color: var(--background-color);
+    padding: 30px;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+}
+
+.button__position {
+    align-self: center;
+    justify-self: center;
+}
+
+.button {
+    width: calc(50% - 10px);
+    height: 48px;
+    border-radius: 8px;
+}
diff --git a/03-lection1/01-button/index.html b/03-lection1/01-button/index.html
@@ -6,6 +6,13 @@
         <link rel="stylesheet" href="./button.css">
     </head>
     <body>
-
+    <div class="container__buttons">
+        <button class="button button__position">Primary</button>
+        <button class="button button__position"></button>
+        <button class="button button__position">Secondary</button>
+        <button class="button button__position"></button>
+        <button class="button button__position">Alternate</button>
+        <button class="button button__position"></button>
+    </div>
     </body>
 </html>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -22,3 +22,30 @@
 * {
     font-family: 'Roboto', sans-serif;
 }
+
+body {
+    margin: 0;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+
+.container__flex-position {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.container__flex-position {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.button_color {
+    background-color: var(--purple);
+}
diff --git a/components/card/card.css b/components/card/card.css
@@ -0,0 +1,11 @@
+.card {
+    height: 367px;
+    left: 165px;
+    top: 305px;
+
+    background: #FFFFFF;
+    /* 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,22 @@
+.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: #212429;
+}
+
+.footer__description {
+    text-align: center;
+    width: 640px;
+    margin: 0 auto 100px auto;
+;
+}
+
diff --git a/components/header/header.css b/components/header/header.css
@@ -0,0 +1,16 @@
+
+.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: #212429;
+}
diff --git a/components/main/main.css b/components/main/main.css
@@ -0,0 +1,9 @@
+.main {
+    background-color: #ACB5BD;
+    height: auto;
+}
+
+.main__card {
+    margin: 15px;
+    width: calc(30% - 30px);
+}
diff --git a/index.html b/index.html
@@ -3,8 +3,34 @@
 <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">
     </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"
   }
 }