From 202a382226c2f87a69ced9d5a0cbf89fb039543b Mon Sep 17 00:00:00 2001 From: nikita539 Date: Sun, 31 Oct 2021 21:26:02 +0300 Subject: [PATCH 1/9] did layot --- assets/css/main.css | 11 +++++++++++ components/card/card.css | 13 +++++++++++++ components/footer/footer.css | 13 +++++++++++++ components/header/header.css | 16 ++++++++++++++++ components/main/main.css | 9 +++++++++ index.html | 24 +++++++++++++++++++++++- package.json | 1 + 7 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 components/card/card.css create mode 100644 components/footer/footer.css create mode 100644 components/header/header.css create mode 100644 components/main/main.css diff --git a/assets/css/main.css b/assets/css/main.css index f39b2eb..916efd7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -22,3 +22,14 @@ * { font-family: 'Roboto', sans-serif; } + +body { + margin: 0; +} + +.container { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; + box-sizing: border-box; +} diff --git a/components/card/card.css b/components/card/card.css new file mode 100644 index 0000000..a8b74bf --- /dev/null +++ b/components/card/card.css @@ -0,0 +1,13 @@ +.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; + + display: inline-block; +} diff --git a/components/footer/footer.css b/components/footer/footer.css new file mode 100644 index 0000000..2bfa802 --- /dev/null +++ b/components/footer/footer.css @@ -0,0 +1,13 @@ +.footer__title { + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 38px; + line-height: 48px; + /* identical to box height, or 126% */ + + + /* Black */ + + color: #212429; +} diff --git a/components/header/header.css b/components/header/header.css new file mode 100644 index 0000000..8354c74 --- /dev/null +++ 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 new file mode 100644 index 0000000..ba016ef --- /dev/null +++ b/components/main/main.css @@ -0,0 +1,9 @@ +.main { + background-color: #ACB5BD; + height: 500px; +} + +.main__card { + margin: 30px; + width: calc(30% - 30px); +} diff --git a/index.html b/index.html index 39fa193..e1e2904 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,30 @@ + + + + - +
+
+
+

Reusable Component Library

+
+
+
+
+
+
+
+
+
+
+
+

About

+
+
+
diff --git a/package.json b/package.json index 8d8b515..c1f45cc 100644 --- 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" } } From 068e6d0a91edcf14d2a4745ddb559f06fc855846 Mon Sep 17 00:00:00 2001 From: nikita539 Date: Thu, 4 Nov 2021 18:37:40 +0300 Subject: [PATCH 2/9] creating of adapting lauoyt --- assets/css/main.css | 12 ++++++++++++ components/card/card.css | 2 -- components/footer/footer.css | 8 ++++++++ components/main/main.css | 4 ++-- index.html | 6 +++++- 5 files changed, 27 insertions(+), 5 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 916efd7..498e07c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -33,3 +33,15 @@ body { 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; +} diff --git a/components/card/card.css b/components/card/card.css index a8b74bf..2205261 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -8,6 +8,4 @@ box-shadow: 0px 2px 4px rgba(33, 36, 41, 0.05); border-radius: 12px; - - display: inline-block; } diff --git a/components/footer/footer.css b/components/footer/footer.css index 2bfa802..c2b90f6 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -4,6 +4,7 @@ font-weight: 500; font-size: 38px; line-height: 48px; + text-align: center; /* identical to box height, or 126% */ @@ -11,3 +12,10 @@ color: #212429; } + +.footer__description { + text-align: center; + width: 640px; + margin: 0 auto 100px auto; +} + diff --git a/components/main/main.css b/components/main/main.css index ba016ef..a000c15 100644 --- a/components/main/main.css +++ b/components/main/main.css @@ -1,9 +1,9 @@ .main { background-color: #ACB5BD; - height: 500px; + height: auto; } .main__card { - margin: 30px; + margin: 15px; width: calc(30% - 30px); } diff --git a/index.html b/index.html index e1e2904..babab63 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,10 @@

Reusable Component Library

-
+
+
+
+
@@ -25,6 +28,7 @@

Reusable Component Library

About

+

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.

From ba655caa845a250d8a8d67d516c017157a42462b Mon Sep 17 00:00:00 2001 From: nikita539 Date: Thu, 4 Nov 2021 20:56:46 +0300 Subject: [PATCH 3/9] creating buttons --- 03-lection1/01-button/button.css | 25 +++++++++++++++++++++++++ 03-lection1/01-button/index.html | 9 ++++++++- assets/css/main.css | 4 ++++ components/footer/footer.css | 1 + 4 files changed, 38 insertions(+), 1 deletion(-) diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css index 31358ba..f400857 100644 --- 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 index 90fab7d..144c768 100644 --- a/03-lection1/01-button/index.html +++ b/03-lection1/01-button/index.html @@ -6,6 +6,13 @@ - +
+ + + + + + +
diff --git a/assets/css/main.css b/assets/css/main.css index 498e07c..eb1a3bd 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -45,3 +45,7 @@ body { flex-wrap: wrap; justify-content: center; } + +.button_color { + background-color: var(--purple); +} diff --git a/components/footer/footer.css b/components/footer/footer.css index c2b90f6..9c4c235 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -17,5 +17,6 @@ text-align: center; width: 640px; margin: 0 auto 100px auto; +; } From e42fad1ce78785352b0b18a085e0bcd527ea5b17 Mon Sep 17 00:00:00 2001 From: nikita539 Date: Fri, 5 Nov 2021 14:31:46 +0300 Subject: [PATCH 4/9] 1) creating and styling buttons 2) revisions by pr --- 03-lection1/01-button/additional_styles.css | 11 +++ 03-lection1/01-button/button.css | 75 ++++++++++++++++----- 03-lection1/01-button/index.html | 13 ++-- assets/css/main.css | 20 +++--- components/card/card.css | 6 +- components/footer/footer.css | 4 +- components/header/header.css | 4 +- 7 files changed, 91 insertions(+), 42 deletions(-) create mode 100644 03-lection1/01-button/additional_styles.css diff --git a/03-lection1/01-button/additional_styles.css b/03-lection1/01-button/additional_styles.css new file mode 100644 index 0000000..1bb4d6e --- /dev/null +++ b/03-lection1/01-button/additional_styles.css @@ -0,0 +1,11 @@ +@import "./assets/css"; + +.container__buttons { + width: 40%; + margin: auto; + padding: 30px; + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(2,1fr); + row-gap: 10px; +} diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css index f400857..61d7d3c 100644 --- a/03-lection1/01-button/button.css +++ b/03-lection1/01-button/button.css @@ -1,26 +1,65 @@ /* Стилизация кнопки */ -:root { - --background-color: #ACB5BD; +@import "./assets/css/main.css"; + +.button { + width: 189px; + height: 48px; + border-radius: 8px; + border: none; + text-decoration: none; + text-align: center; + cursor: pointer; } -.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__primary*/ +.button__primary { + background-color: var(--primary); + color: var(--white); + transition: opacity 200ms ease-in-out, background 200ms ease-in-out; } -.button__position { - align-self: center; - justify-self: center; +.button__primary:hover { + background-color: var(--primary-hover); } -.button { - width: calc(50% - 10px); - height: 48px; - border-radius: 8px; +.button__primary-disabled { + background-color: var(--primary-disabled); + color: var(--white); + opacity: 0.5; +} + +/*button__secondary*/ +.button__secondary { + background-color: var(--purple); + color: var(--white); + transition: opacity 200ms ease-in-out, background 200ms ease-in-out; +} + +.button__secondary:hover { + background-color: var(--secondary-hover); } + +.button__secondary-disabled { + background-color: var(--purple-disabled); + opacity: 0.5; + color: var(--white); +} + +/*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; +} + + + diff --git a/03-lection1/01-button/index.html b/03-lection1/01-button/index.html index 144c768..e16577b 100644 --- a/03-lection1/01-button/index.html +++ b/03-lection1/01-button/index.html @@ -4,15 +4,16 @@ +
- - - - - - + + + + + +
diff --git a/assets/css/main.css b/assets/css/main.css index eb1a3bd..a3995dd 100644 --- 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; @@ -16,7 +20,13 @@ --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) ; } * { @@ -39,13 +49,3 @@ body { 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 index 2205261..a684c29 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -1,9 +1,7 @@ +@import "./assets/css"; .card { height: 367px; - left: 165px; - top: 305px; - - background: #FFFFFF; + background: var(--white); /* Card Shadow */ box-shadow: 0px 2px 4px rgba(33, 36, 41, 0.05); diff --git a/components/footer/footer.css b/components/footer/footer.css index 9c4c235..b255755 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -1,3 +1,4 @@ +@import "./assets/css"; .footer__title { font-family: Inter; font-style: normal; @@ -10,13 +11,12 @@ /* Black */ - color: #212429; + color: var(--black); } .footer__description { text-align: center; width: 640px; margin: 0 auto 100px auto; -; } diff --git a/components/header/header.css b/components/header/header.css index 8354c74..92e002c 100644 --- a/components/header/header.css +++ b/components/header/header.css @@ -1,4 +1,4 @@ - +@import "./assets/css"; .header__title { /* h1 */ @@ -12,5 +12,5 @@ /* Black */ - color: #212429; + color: var(--black); } From 01ba0e9cee19a53322e75fb7fd1bec9c6ea58eed Mon Sep 17 00:00:00 2001 From: nikita539 Date: Fri, 5 Nov 2021 15:20:00 +0300 Subject: [PATCH 5/9] creating accordion --- 03-lection1/02-accordion/accordion.css | 22 ++++++++++++++++++++++ 03-lection1/02-accordion/index.html | 8 ++++---- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css index ae99791..8c20baa 100644 --- a/03-lection1/02-accordion/accordion.css +++ b/03-lection1/02-accordion/accordion.css @@ -1 +1,23 @@ /* Стилизация аккордеона */ +@import "./assets/css/main.css"; + +.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 index ecfe421..5d87f30 100644 --- a/03-lection1/02-accordion/index.html +++ b/03-lection1/02-accordion/index.html @@ -6,12 +6,12 @@ -
- +
+ Accordion item -

- Hidden 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.

From 3eecc4537c5267bda455489d4f900b57f8e0cc65 Mon Sep 17 00:00:00 2001 From: nikita539 Date: Sun, 7 Nov 2021 18:09:38 +0300 Subject: [PATCH 6/9] fixes of pr --- 03-lection1/01-button/additional_styles.css | 11 -------- 03-lection1/01-button/button.css | 29 ++++++++++++--------- 03-lection1/01-button/index.html | 22 +++++++++++----- 3 files changed, 33 insertions(+), 29 deletions(-) delete mode 100644 03-lection1/01-button/additional_styles.css diff --git a/03-lection1/01-button/additional_styles.css b/03-lection1/01-button/additional_styles.css deleted file mode 100644 index 1bb4d6e..0000000 --- a/03-lection1/01-button/additional_styles.css +++ /dev/null @@ -1,11 +0,0 @@ -@import "./assets/css"; - -.container__buttons { - width: 40%; - margin: auto; - padding: 30px; - box-sizing: border-box; - display: grid; - grid-template-columns: repeat(2,1fr); - row-gap: 10px; -} diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css index 61d7d3c..2af7df9 100644 --- a/03-lection1/01-button/button.css +++ b/03-lection1/01-button/button.css @@ -1,6 +1,4 @@ /* Стилизация кнопки */ -@import "./assets/css/main.css"; - .button { width: 189px; height: 48px; @@ -9,41 +7,47 @@ 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 { +.button_primary { background-color: var(--primary); color: var(--white); - transition: opacity 200ms ease-in-out, background 200ms ease-in-out; } -.button__primary:hover { +.button_primary:hover { background-color: var(--primary-hover); } -.button__primary-disabled { +.button_primary:disabled { background-color: var(--primary-disabled); color: var(--white); opacity: 0.5; + pointer-events: none; } /*button__secondary*/ -.button__secondary { - background-color: var(--purple); +.button_secondary { + background-color: var(--secondary); color: var(--white); - transition: opacity 200ms ease-in-out, background 200ms ease-in-out; } -.button__secondary:hover { +.button_secondary:hover { background-color: var(--secondary-hover); } -.button__secondary-disabled { +.button_secondary:disabled { background-color: var(--purple-disabled); opacity: 0.5; color: var(--white); + pointer-events: none; } /*Alternate*/ @@ -57,8 +61,9 @@ border: 1px solid #212429; } -.button_alternate-disabled { +.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 index e16577b..c0755dd 100644 --- a/03-lection1/01-button/index.html +++ b/03-lection1/01-button/index.html @@ -4,16 +4,26 @@ - +
- - - - + + + + - +
From 0829b84035a257f272ced70503eb01b3d46c650f Mon Sep 17 00:00:00 2001 From: nikita539 Date: Mon, 15 Nov 2021 22:42:59 +0300 Subject: [PATCH 7/9] have fixed pr --- 03-lection1/02-accordion/accordion.css | 2 -- assets/css/main.css | 2 +- components/card/card.css | 1 - components/footer/footer.css | 1 - components/header/header.css | 1 - components/main/main.css | 3 +-- 6 files changed, 2 insertions(+), 8 deletions(-) diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css index 8c20baa..30b3c8b 100644 --- a/03-lection1/02-accordion/accordion.css +++ b/03-lection1/02-accordion/accordion.css @@ -1,6 +1,4 @@ /* Стилизация аккордеона */ -@import "./assets/css/main.css"; - .accordion { width: 730px; border: 1px solid #ACB5BD; diff --git a/assets/css/main.css b/assets/css/main.css index a3995dd..004a2a5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -38,7 +38,7 @@ body { } .container { - max-width: 1400px; + max-width: 1140px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; diff --git a/components/card/card.css b/components/card/card.css index a684c29..313071f 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -1,4 +1,3 @@ -@import "./assets/css"; .card { height: 367px; background: var(--white); diff --git a/components/footer/footer.css b/components/footer/footer.css index b255755..c2b7593 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -1,4 +1,3 @@ -@import "./assets/css"; .footer__title { font-family: Inter; font-style: normal; diff --git a/components/header/header.css b/components/header/header.css index 92e002c..51f0a8a 100644 --- a/components/header/header.css +++ b/components/header/header.css @@ -1,4 +1,3 @@ -@import "./assets/css"; .header__title { /* h1 */ diff --git a/components/main/main.css b/components/main/main.css index a000c15..ed3061c 100644 --- a/components/main/main.css +++ b/components/main/main.css @@ -1,6 +1,5 @@ .main { - background-color: #ACB5BD; - height: auto; + background-color: var(--grey-3); } .main__card { From 173cd4235e0ce4076e423edb9f988f69aa4ac249 Mon Sep 17 00:00:00 2001 From: nikita539 Date: Sat, 25 Dec 2021 23:15:22 +0300 Subject: [PATCH 8/9] created styles for mobile --- assets/css/main.css | 8 ++++++++ components/footer/footer.css | 6 ++++++ components/main/main.css | 6 ++++++ index.html | 2 ++ 4 files changed, 22 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index ac3cf9e..f3d8975 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -51,4 +51,12 @@ 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/footer/footer.css b/components/footer/footer.css index c2b7593..d0f5679 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -19,3 +19,9 @@ margin: 0 auto 100px auto; } +@media screen and (max-width: 700px){ + .footer { + display: none; + } +} + diff --git a/components/main/main.css b/components/main/main.css index ed3061c..1351790 100644 --- a/components/main/main.css +++ b/components/main/main.css @@ -6,3 +6,9 @@ margin: 15px; width: calc(30% - 30px); } + +@media screen and (max-width: 700px){ + .main__card { + width: auto; + } +} diff --git a/index.html b/index.html index babab63..599a9a9 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
@@ -34,3 +35,4 @@

About

+ From 574cd99b63cef637580a93ff3a7f7dbe71003639 Mon Sep 17 00:00:00 2001 From: nikita539 Date: Mon, 27 Dec 2021 00:32:01 +0300 Subject: [PATCH 9/9] added meta teg --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 599a9a9..d49d983 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +