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..66d6b8b 100644 --- a/07-lection5/04-input/index.html +++ b/07-lection5/04-input/index.html @@ -6,6 +6,45 @@ - +
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ + + + + + + +
+
+
+ +
+ + + + + + + +
+
+
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index e69de29..c620e3d 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -0,0 +1,61 @@ +.input__label { + 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: 5px; + display: inline-block; +} +.input__wrapper { + position: relative; + max-width: 350px; +} +.input__field { + 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__field:focus { + outline: none; + border-color: #4263EB; +} +.input__field::placeholder { + color: var(--grey-2); +} +.input__icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + display: none; + width: 24px; + height: 24px; +} +.input__icon_success { + color: #374FC7; +} +.input__icon_invalid { + color: #F03D3E; +} +.input_success .input__icon_success { + display: block; +} +.input_invalid .input__icon_invalid { + display: block; +} +.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 e69de29..6be1176 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -0,0 +1,35 @@ +.burger-menu { + position: fixed; + 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__icon { + 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 0000000..e976afd Binary files /dev/null and b/09-lection7/01-burger-menu/img/logo.png differ diff --git a/09-lection7/01-burger-menu/img/menu.svg b/09-lection7/01-burger-menu/img/menu.svg new file mode 100644 index 0000000..09d0b1b --- /dev/null +++ b/09-lection7/01-burger-menu/img/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index 7e3f2bd..18ae173 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -5,8 +5,33 @@ + - +
+ + + +
+
+
+
+ + + +
+ +
+
diff --git a/assets/css/main.css b/assets/css/main.css index 1e2f46e..b50bb45 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,5 @@ @import '../fonts/fonts.css'; -@import url(../../03-lection1/01-button/button.css); + :root { --white: #ffffff; --black: #212429; @@ -22,7 +22,3 @@ body { font-family: 'Roboto', sans-serif; } -.wrapper { - display: grid; - gap: 16px; -} 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 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 @@ + + + + + + + + + + + + + + + + + + + + + + +