From c5216281a432f5ea75cf81d6ff65437fe4583ba6 Mon Sep 17 00:00:00 2001 From: Vladimir Date: Fri, 13 Dec 2024 17:01:47 +0500 Subject: [PATCH 1/6] create inputs --- 07-lection5/04-input/img/error.svg | 5 +++ 07-lection5/04-input/img/success.svg | 4 ++ 07-lection5/04-input/index.html | 31 +++++++++++++- 07-lection5/04-input/input.css | 62 ++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 07-lection5/04-input/img/error.svg create mode 100644 07-lection5/04-input/img/success.svg diff --git a/07-lection5/04-input/img/error.svg b/07-lection5/04-input/img/error.svg new file mode 100644 index 0000000..9f206db --- /dev/null +++ b/07-lection5/04-input/img/error.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/07-lection5/04-input/img/success.svg b/07-lection5/04-input/img/success.svg new file mode 100644 index 0000000..42b708b --- /dev/null +++ b/07-lection5/04-input/img/success.svg @@ -0,0 +1,4 @@ + + + + diff --git a/07-lection5/04-input/index.html b/07-lection5/04-input/index.html index ef02cb9..af49dc1 100644 --- a/07-lection5/04-input/index.html +++ b/07-lection5/04-input/index.html @@ -6,6 +6,35 @@ - +
+
+
Label
+
+ +
+
+
+
+
Focus
+
+ +
+
+
+
+
Success
+
+ +
+
+
+
+
Error
+
+ +
+
+
+
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index e69de29..fefb3c4 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -0,0 +1,62 @@ +.wrapper { + display: flex; + flex-direction: column; + gap: 16px; +} +.input { + width: 350px; +} +.input__title { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 18px; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--grey-3); + margin-bottom: 11px; +} +.input__wrapper { + position: relative; +} +.input__wrapper input { + width: 100%; + padding: 17px 16px 17px 24px; + border-radius: 8px; + border: 1px solid var(--grey-2); + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 26px; + color: var(--grey-4); + box-sizing: border-box; +} +.input__wrapper input:focus { + outline: none; + border-color: #4263EB; +} +.input__wrapper input::placeholder { + color: var(--grey-2); +} +.input__icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; +} +.input_success .input__icon { + background: url("img/success.svg"); + width: 24px; + height: 24px; +} +.input_invalid .input__icon { + background: url("img/error.svg"); + width: 24px; + height: 24px; +} +.input_invalid input { + border-color: #F03D3E; +} + From abfd84c63984f9913ccab6eb195ef4eaa0f5ceff Mon Sep 17 00:00:00 2001 From: Vladimir Date: Fri, 13 Dec 2024 19:01:24 +0500 Subject: [PATCH 2/6] create burger-menu --- 09-lection7/01-burger-menu/burger-menu.css | 52 ++++++ 09-lection7/01-burger-menu/img/close.svg | 4 + 09-lection7/01-burger-menu/img/logo.png | Bin 0 -> 822 bytes 09-lection7/01-burger-menu/img/menu.svg | 5 + 09-lection7/01-burger-menu/index.html | 13 +- assets/css/main.css | 1 + assets/css/normolize.css | 205 +++++++++++++++++++++ 7 files changed, 279 insertions(+), 1 deletion(-) create mode 100644 09-lection7/01-burger-menu/img/close.svg create mode 100644 09-lection7/01-burger-menu/img/logo.png create mode 100644 09-lection7/01-burger-menu/img/menu.svg create mode 100644 assets/css/normolize.css diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index e69de29..f1cad67 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -0,0 +1,52 @@ +.header__top { + background-color: #F9FAFC; + padding: 16px 0; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.burger-menu-button { + background: url("img/menu.svg") no-repeat; + width: 24px; + height: 24px; + position: absolute; + left: 16px; +} +.burger-menu { + position: absolute; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + transform: translateX(-100%); + background: #F9FAFC; + transition: all 350ms linear; +} +.burger-menu[data-open] { + transform: translateX(0%); +} +.burger-menu__header { + position: relative; + padding: 16px 0; + display: flex; + justify-content: center; + align-items: center; +} +.burger-menu__close { + background-color: var(--grey-2); + border-radius: 16px; + width: 32px; + height: 32px; + position: absolute; + left: 16px; + display: flex; + justify-content: center; + align-items: center; +} +.burger-menu__close:before { + content: ''; + background: url("img/close.svg") no-repeat; + width: 24px; + height: 24px; +} \ No newline at end of file diff --git a/09-lection7/01-burger-menu/img/close.svg b/09-lection7/01-burger-menu/img/close.svg new file mode 100644 index 0000000..dd1f645 --- /dev/null +++ b/09-lection7/01-burger-menu/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/09-lection7/01-burger-menu/img/logo.png b/09-lection7/01-burger-menu/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e976afd81f8a24c17fbd39f0db18c1857703d947 GIT binary patch literal 822 zcmV-61Ihe}P)!M0s%u7t2TqdBCXv=)hD!I=~&osUV~Sr~r2Wt^o4@i9|@Y1izplUG9b* zTZYI=@W<}m&gS=I$?~jqznk5i{UAh6mSwF*y3=Fu3uf*DlmXnDeM=Mj*$~l~K%*l6 zH8jRd;DL7M+40ro_Y(wyc02ow09;?56CB9)_Oj%b-ZJRupQz=W> zW?zOuD0vAYLo%%0**~RQy0&jze;sLp&B`PBZM$=DDzV^z&GLa{9s&@RILR_fx4+DU zxxpy=5=&yjfl%_I5tltZ=u$zS?32pi3mZ#fN^Cd~LS7W&rkRHFqgQEjM4pWuTjr@3 zC*zR!Oj~50c@d3y>cu6^?c++N&9QAH%^l~5UY9)8;-vfXF%el6nXtHanX@?6%Tp~b zDU$kUYdLv&QL2`wR$P{KTT*kOW^7gc#&xXw8>>QjdNVG~dkDjH2@Rg8N}gJAiCud{ zAlP%;Rmf8-ju}oxv9`8-%hNnL$q)?APys&WDHg|GCI}l+S=+wkMYlWf81Nxau{iRw z;khA|x9uuVbH*72gA8iGMV?-9#9t8zB8*WJo66H$4j}oAK-g`b5o%-;d3rN0Plut# zxg!5PM9r)#Ppvp(#uH-xfSQrRM7~aft;;&{RF?x~%I{D!asmtiSyi5DadL!?7-y&n zyVP~&dTh_j|5!nu`U1Qxwgz^#U{E#EMsYKM5|+tRFHXifZt$y0<=NQMMyRpvA^s;X ziX|`UzHE8$x)OOJ&BoTyMc&6l@}gO*G(WzLy=UG$(`;-g=015*Eiz9tFW)-!F=3I3 z2M)l + + + + diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index 7e3f2bd..44be6e5 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -7,6 +7,17 @@ - +
+
+
+ +
+
+
+
+ +
+
+
diff --git a/assets/css/main.css b/assets/css/main.css index b50bb45..233a582 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,5 @@ @import '../fonts/fonts.css'; +@import "normolize.css"; :root { --white: #ffffff; diff --git a/assets/css/normolize.css b/assets/css/normolize.css new file mode 100644 index 0000000..ac9bd7e --- /dev/null +++ b/assets/css/normolize.css @@ -0,0 +1,205 @@ +/** + Нормализация блочной модели + */ +*, +::before, +::after { + box-sizing: border-box; +} + +/** + Убираем внутренние отступы слева тегам списков, + у которых есть атрибут class + */ +:where(ul, ol):where([class]) { + padding-left: 0; +} + +/** + Убираем внешние отступы body и двум другим тегам, + у которых есть атрибут class + */ +body, +:where(blockquote, figure):where([class]) { + margin: 0; +} + +/** + Убираем внешние отступы вертикали нужным тегам, + у которых есть атрибут class + */ +:where( + h1, + h2, + h3, + h4, + h5, + h6, + p, + ul, + ol, + dl +):where([class]) { + margin-block: 0; +} + +:where(dd[class]) { + margin-left: 0; +} + +:where(fieldset[class]) { + margin-left: 0; + padding: 0; + border: none; +} + +/** + Убираем стандартный маркер маркированному списку, + у которого есть атрибут class + */ +:where(ul[class]) { + list-style: none; +} + +:where(address[class]) { + font-style: normal; +} + +/** + Обнуляем вертикальные внешние отступы параграфа, + объявляем локальную переменную для внешнего отступа вниз, + чтобы избежать взаимодействие с более сложным селектором + */ +p { + --paragraphMarginBottom: 24px; + + margin-block: 0; +} + +/** + Внешний отступ вниз для параграфа без атрибута class, + который расположен не последним среди своих соседних элементов + */ +p:where(:not([class]):not(:last-child)) { + margin-bottom: var(--paragraphMarginBottom); +} + + +/** + Упрощаем работу с изображениями и видео + */ +img, +video { + display: block; + max-width: 100%; + height: auto; +} + +/** + Наследуем свойства шрифт для полей ввода + */ +input, +textarea, +select, +button { + font: inherit; +} + +html { + /** + Пригодится в большинстве ситуаций + (когда, например, нужно будет "прижать" футер к низу сайта) + */ + height: 100%; + /** + Убираем скачок интерфейса по горизонтали + при появлении / исчезновении скроллбара + */ + scrollbar-gutter: stable; +} + +/** + Плавный скролл + */ +html, +:has(:target) { + scroll-behavior: smooth; +} + +body { + /** + Пригодится в большинстве ситуаций + (когда, например, нужно будет "прижать" футер к низу сайта) + */ + min-height: 100%; + /** + Унифицированный интерлиньяж + */ + line-height: 1.5; +} + +/** + Нормализация высоты элемента ссылки при его инспектировании в DevTools + */ +a:where([class]) { + display: inline-flex; +} + +/** + Курсор-рука при наведении на элемент + */ +button, +label { + cursor: pointer; +} + +/** + Приводим к единому цвету svg-элементы + (за исключением тех, у которых уже указан + атрибут fill со значением 'none' или начинается с 'url') + */ +:where([fill]:not( + [fill="none"], + [fill^="url"] +)) { + fill: currentColor; +} + +/** + Приводим к единому цвету svg-элементы + (за исключением тех, у которых уже указан + атрибут stroke со значением 'none') + */ +:where([stroke]:not([stroke="none"])) { + stroke: currentColor; +} + +/** + Чиним баг задержки смены цвета при взаимодействии с svg-элементами + */ +svg * { + transition-property: fill, stroke; +} + +/** + Приведение рамок таблиц в классический 'collapse' вид + */ +:where(table) { + border-collapse: collapse; + border-color: currentColor; +} + +/** + Удаляем все анимации и переходы для людей, + которые предпочитают их не использовать + */ +@media (prefers-reduced-motion: reduce) { + *, + ::before, + ::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} \ No newline at end of file From 431b4e11e871ff797f1a0d970fc1cc673e63e752 Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 9 Jan 2025 14:42:36 +0500 Subject: [PATCH 3/6] add changes inputs and burger-menu --- 07-lection5/04-input/index.html | 30 +++++++++++------ 07-lection5/04-input/input.css | 38 ++++++++++++---------- 09-lection7/01-burger-menu/burger-menu.css | 23 +++++-------- 09-lection7/01-burger-menu/index.html | 23 +++++++------ assets/css/main.css | 6 ++++ assets/images/icons.svg | 23 +++++++++++++ 6 files changed, 91 insertions(+), 52 deletions(-) create mode 100644 assets/images/icons.svg diff --git a/07-lection5/04-input/index.html b/07-lection5/04-input/index.html index af49dc1..66d6b8b 100644 --- a/07-lection5/04-input/index.html +++ b/07-lection5/04-input/index.html @@ -8,31 +8,41 @@
-
Label
+
- +
-
Focus
+
- +
-
Success
+
- -
+ + + + + + +
-
Error
+
- -
+ + + + + + +
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index fefb3c4..17a6478 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -1,12 +1,7 @@ -.wrapper { - display: flex; - flex-direction: column; - gap: 16px; -} .input { - width: 350px; + max-width: 350px; } -.input__title { +.input__label { font-family: 'Inter'; font-style: normal; font-weight: 500; @@ -16,11 +11,12 @@ text-transform: uppercase; color: var(--grey-3); margin-bottom: 11px; + display: inline-block; } .input__wrapper { position: relative; } -.input__wrapper input { +.input__field { width: 100%; padding: 17px 16px 17px 24px; border-radius: 8px; @@ -33,11 +29,11 @@ color: var(--grey-4); box-sizing: border-box; } -.input__wrapper input:focus { +.input__field:focus { outline: none; border-color: #4263EB; } -.input__wrapper input::placeholder { +.input__field::placeholder { color: var(--grey-2); } .input__icon { @@ -45,16 +41,24 @@ top: 50%; transform: translateY(-50%); right: 16px; -} -.input_success .input__icon { - background: url("img/success.svg"); + display: none; width: 24px; height: 24px; } -.input_invalid .input__icon { - background: url("img/error.svg"); - width: 24px; - height: 24px; +.input__icon_success { + color: #374FC7; +} +.input__icon_invalid { + color: #F03D3E; +} +.input_success .input__icon_success { + display: block; +} +.input__icon_success .path { + fill: #374FC7; +} +.input_invalid .input__icon_invalid { + display: block; } .input_invalid input { border-color: #F03D3E; diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index f1cad67..dc811fe 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -1,11 +1,3 @@ -.header__top { - background-color: #F9FAFC; - padding: 16px 0; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} .burger-menu-button { background: url("img/menu.svg") no-repeat; width: 24px; @@ -13,8 +5,15 @@ position: absolute; left: 16px; } +.icon { + width: 24px; + height: 24px; +} +.burger-menu-button .icon { + color: var(--grey-4); +} .burger-menu { - position: absolute; + position: fixed; width: 100vw; height: 100vh; top: 0; @@ -43,10 +42,4 @@ display: flex; justify-content: center; align-items: center; -} -.burger-menu__close:before { - content: ''; - background: url("img/close.svg") no-repeat; - width: 24px; - height: 24px; } \ No newline at end of file diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index 44be6e5..1e207b5 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -7,17 +7,20 @@ -
-
-
- -
-
-
-
- +
+ + + +
+
+
+
+ + +
+
-
+ diff --git a/assets/css/main.css b/assets/css/main.css index 233a582..b3795b2 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -23,3 +23,9 @@ body { font-family: 'Roboto', sans-serif; } + +.wrapper { + display: flex; + flex-direction: column; + gap: 16px; +} \ No newline at end of file diff --git a/assets/images/icons.svg b/assets/images/icons.svg new file mode 100644 index 0000000..16b9411 --- /dev/null +++ b/assets/images/icons.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + From 56d0af9aec5d41c5be33202263609e0909c25b5e Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 9 Jan 2025 15:16:34 +0500 Subject: [PATCH 4/6] fixed inputs & burger-menu --- 07-lection5/04-input/input.css | 11 +++-------- 09-lection7/01-burger-menu/burger-menu.css | 3 --- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index 17a6478..c620e3d 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -1,6 +1,3 @@ -.input { - max-width: 350px; -} .input__label { font-family: 'Inter'; font-style: normal; @@ -10,11 +7,12 @@ letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-3); - margin-bottom: 11px; + margin-bottom: 5px; display: inline-block; } .input__wrapper { position: relative; + max-width: 350px; } .input__field { width: 100%; @@ -54,13 +52,10 @@ .input_success .input__icon_success { display: block; } -.input__icon_success .path { - fill: #374FC7; -} .input_invalid .input__icon_invalid { display: block; } -.input_invalid input { +.input_invalid .input__field { border-color: #F03D3E; } diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index dc811fe..41b3bb6 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -1,7 +1,4 @@ .burger-menu-button { - background: url("img/menu.svg") no-repeat; - width: 24px; - height: 24px; position: absolute; left: 16px; } From ef64456b75a326c0825bc59a3d5d28ddcb0adabb Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 9 Jan 2025 15:53:39 +0500 Subject: [PATCH 5/6] fixed burger-menu --- 09-lection7/01-burger-menu/burger-menu.css | 15 ++++----------- 09-lection7/01-burger-menu/index.html | 13 ++++++++++++- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index 41b3bb6..5ea5e3a 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -1,14 +1,3 @@ -.burger-menu-button { - position: absolute; - left: 16px; -} -.icon { - width: 24px; - height: 24px; -} -.burger-menu-button .icon { - color: var(--grey-4); -} .burger-menu { position: fixed; width: 100vw; @@ -39,4 +28,8 @@ display: flex; justify-content: center; align-items: center; +} +.icon { + width: 24px; + height: 24px; } \ No newline at end of file diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index 1e207b5..beb7dff 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -5,10 +5,21 @@ +
- +
From 7f51d5c8bf6eba6d4283cce00410834948e2d49c Mon Sep 17 00:00:00 2001 From: Vladimir Date: Sat, 11 Jan 2025 14:25:22 +0500 Subject: [PATCH 6/6] dop fixed burger-menu --- 09-lection7/01-burger-menu/burger-menu.css | 2 +- 09-lection7/01-burger-menu/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index 5ea5e3a..6be1176 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -29,7 +29,7 @@ justify-content: center; align-items: center; } -.icon { +.burger-menu__icon { width: 24px; height: 24px; } \ No newline at end of file diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index beb7dff..18ae173 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -26,7 +26,7 @@
- +