diff --git a/freeze_project/fonts/IBMPlexMono-Bold.woff b/freeze_project/fonts/IBMPlexMono-Bold.woff new file mode 100644 index 0000000..0bca0c4 Binary files /dev/null and b/freeze_project/fonts/IBMPlexMono-Bold.woff differ diff --git a/freeze_project/fonts/IBMPlexMono-Regular.woff b/freeze_project/fonts/IBMPlexMono-Regular.woff new file mode 100644 index 0000000..7eb68c0 Binary files /dev/null and b/freeze_project/fonts/IBMPlexMono-Regular.woff differ diff --git a/freeze_project/fonts/fonts.css b/freeze_project/fonts/fonts.css new file mode 100644 index 0000000..741e3ed --- /dev/null +++ b/freeze_project/fonts/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: 'IBM Plex mono'; + src: url(./IBMPlexMono-Regular.woff) format('woff'); + font-weight: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex mono'; + src: url(./IBMPlexMono-Bold.woff) format('woff'); + font-weight: bold; + font-display: swap; +} diff --git a/freeze_project/images/1024 x 768 - dark.png b/freeze_project/images/1024 x 768 - dark.png new file mode 100644 index 0000000..71aec0a Binary files /dev/null and b/freeze_project/images/1024 x 768 - dark.png differ diff --git a/freeze_project/images/books.png b/freeze_project/images/books.png new file mode 100644 index 0000000..b89fa5c Binary files /dev/null and b/freeze_project/images/books.png differ diff --git a/freeze_project/images/cover-image-dark.png b/freeze_project/images/cover-image-dark.png new file mode 100644 index 0000000..7c55c0e Binary files /dev/null and b/freeze_project/images/cover-image-dark.png differ diff --git a/freeze_project/images/cover-image-light.png b/freeze_project/images/cover-image-light.png new file mode 100644 index 0000000..2b07ea0 Binary files /dev/null and b/freeze_project/images/cover-image-light.png differ diff --git a/freeze_project/images/cover-image.png b/freeze_project/images/cover-image.png new file mode 100644 index 0000000..1133e82 Binary files /dev/null and b/freeze_project/images/cover-image.png differ diff --git a/freeze_project/images/favicon.ico b/freeze_project/images/favicon.ico new file mode 100644 index 0000000..cc5309b Binary files /dev/null and b/freeze_project/images/favicon.ico differ diff --git a/freeze_project/images/favicon.svg b/freeze_project/images/favicon.svg new file mode 100644 index 0000000..cdca3e4 --- /dev/null +++ b/freeze_project/images/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/freeze_project/images/ice-cream.png b/freeze_project/images/ice-cream.png new file mode 100644 index 0000000..3a547a0 Binary files /dev/null and b/freeze_project/images/ice-cream.png differ diff --git a/freeze_project/images/mobile-icon.png b/freeze_project/images/mobile-icon.png new file mode 100644 index 0000000..603f643 Binary files /dev/null and b/freeze_project/images/mobile-icon.png differ diff --git a/freeze_project/images/street.png b/freeze_project/images/street.png new file mode 100644 index 0000000..5402430 Binary files /dev/null and b/freeze_project/images/street.png differ diff --git a/freeze_project/images/sunset.png b/freeze_project/images/sunset.png new file mode 100644 index 0000000..f7670ae Binary files /dev/null and b/freeze_project/images/sunset.png differ diff --git a/freeze_project/images/tape.png b/freeze_project/images/tape.png new file mode 100644 index 0000000..58be9f7 Binary files /dev/null and b/freeze_project/images/tape.png differ diff --git a/freeze_project/index.html b/freeze_project/index.html new file mode 100644 index 0000000..f818a26 --- /dev/null +++ b/freeze_project/index.html @@ -0,0 +1,113 @@ + + + + + + + + + + + + Сложно сосредоточиться + + + + + + + + + + +
+ + + + + +
+ + +
+ +
+

+ Почему сосредоточиться так сложно +

+ + +
+

Многозадачность

+

+ Особенно сложно сосредоточиться, когда задач много и все они — + важные. Где же легендарная многозадачность, когда она так нужна вам + (и всем нанимающим менеджерам этого мира)? А дело в том, что её + просто не существует. Исследователи выяснили, что мозгу тяжело + концентрироваться даже на двух делах одновременно. А когда в поле + внимания попадает несколько важных задач, организм паникует и + выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы + работаем невнимательно: ошибаемся и быстро устаём. +

+
+ + +
+

Дофамин

+

+ С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей + невозможности сосредоточиться замешана и полная противоположность + стрессу — дофамин. Это вещество участвует в системе вознаграждения + мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на + что-то более «приятное» для мозгов. Например, смотрим лайки в + соцсетях. В это время и выделяется дофамин — и мы чувствуем + удовольствие. Получается замкнутый круг: чем больше отвлекаешься, + тем больше удовольствия получаешь. +

+
+
+ + + + + + + + + + +
3
+ + + +
4
+ +
+ + + + + + + \ No newline at end of file diff --git a/freeze_project/info.txt b/freeze_project/info.txt new file mode 100644 index 0000000..4cfd2f2 --- /dev/null +++ b/freeze_project/info.txt @@ -0,0 +1,6 @@ +Здесь я сохраняю общую информацию о своей работе. +Конспектирование, шпаргалки, задачи, ссылки на необходимые ресурсы, +накопление важных ресурсных определений. + + + diff --git a/freeze_project/scripts/script.js b/freeze_project/scripts/script.js new file mode 100644 index 0000000..0675bec --- /dev/null +++ b/freeze_project/scripts/script.js @@ -0,0 +1,48 @@ +const themeButtons = document.querySelectorAll('.header__theme-menu-button'); + +themeButtons.forEach((button) => { + button.addEventListener('click', () => { + themeButtons.forEach((btn) => { + btn.classList.remove('header__theme-menu-button_active'); + btn.removeAttribute('disabled'); + }); + if ( + [...button.classList].includes('header__theme-menu-button_type_light') + ) { + changeTheme('light'); + } else if ( + [...button.classList].includes('header__theme-menu-button_type_dark') + ) { + changeTheme('dark'); + } else { + changeTheme('auto'); + } + button.classList.add('header__theme-menu-button_active'); + button.setAttribute('disabled', true); + }); +}); + +function changeTheme(theme) { + document.body.className = 'page'; + document.body.classList.add(`theme_${theme}`); + localStorage.setItem('theme', theme); +} + +function initTheme() { + const theme = localStorage.getItem('theme'); + if (theme) { + changeTheme(theme); + themeButtons.forEach((btn) => { + btn.classList.remove('header__theme-menu-button_active'); + btn.removeAttribute('disabled'); + }); + document + .querySelector(`.header__theme-menu-button_type_${theme}`) + .classList.add('header__theme-menu-button_active'); + document + .querySelector(`.header__theme-menu-button_type_${theme}`) + .setAttribute('disabled', true); + } +} + +initTheme(); diff --git a/freeze_project/styles/dark.css b/freeze_project/styles/dark.css new file mode 100644 index 0000000..eb9daf6 --- /dev/null +++ b/freeze_project/styles/dark.css @@ -0,0 +1,12 @@ +/* + Специально для тёмной темы при наличии класса, + здесь окажутся стили, которые нужно переопределить принудительно, + переключая тему +*/ + +.page.theme_dark { + /* сохраните этот селектор в приведённом виде. + Так стили написанные ниже будут иметь больший вес, + чем стили в медиазапросе предпочтений пользователя + */ +} diff --git a/freeze_project/styles/globals.css b/freeze_project/styles/globals.css new file mode 100644 index 0000000..d800672 --- /dev/null +++ b/freeze_project/styles/globals.css @@ -0,0 +1,43 @@ +/* Глобальные стили для проекта, их можно дополнять и менять по желанию */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + min-inline-size: 375px; + max-inline-size: 1440px; + margin: 0 auto; + font-family: 'IBM Plex mono', sans-serif; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +picture { + margin: 0; + padding: 0; +} + +button, +a { + color: currentColor; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} diff --git a/freeze_project/styles/light.css b/freeze_project/styles/light.css new file mode 100644 index 0000000..f3d55e7 --- /dev/null +++ b/freeze_project/styles/light.css @@ -0,0 +1,12 @@ +/* + Специально для светлой темы при наличии класса. + Здесь окажутся стили, которые нужно переопределить принудительно, + переключая тему +*/ + +.page.theme_light { + /* сохраните этот селектор в приведённом виде. + Так стили написанные ниже будут иметь больший вес, + чем стили в медиазапросе предпочтений пользователя + */ +} diff --git a/freeze_project/styles/style.css b/freeze_project/styles/style.css new file mode 100644 index 0000000..9784150 --- /dev/null +++ b/freeze_project/styles/style.css @@ -0,0 +1,121 @@ +/* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */ + +.page { + /* сохраните в разметке и стилях класс page. На его основе работает скрипт. */ + max-width: 1440px; + background-color: #000028; + background-image: url('../images/cover-image-dark.png'); + object-fit: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} + +.header { + width: 1024px; + height: 100vh; + display: grid; + min-height: 768px; + margin-block-end: 60px; +} + +.header__theme-menu-list { + display: flex; + justify-content: center; +} + +.main { + display: grid; +} + +.text-blocks__general-rules { + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-accent); +} + +/*----- Секция 1 -----*/ +.grid__main-1 { + display: grid; + grid-template-columns: 315px minmax(315px, 650px); + grid-template-rows: repeat(2, 1fr); + /* width: 1024px; */ + /* height: 508px; */ + padding: 0 0 0 20px; + column-gap: 20px; + row-gap: 20px; + margin-block-end: 100px; +} + +.main__section-h2-title { + /* Заголовок в пустом блоке. Высота блока в макете 47px */ + display: grid; + grid-row-start: 1; + grid-row-end: 3; + color: var(--h2-color); + letter-spacing: 0em; + text-align: left; + background-color: rgba(255, 165, 0, 0.2); +} + +.main__section_text-block { + /* Обертка для текстового блока */ + display: grid; + grid-template-rows: fit-content; + row-gap: 10px; +} + +.main__section_h3-title { + /* Заголовок h3 в текстовом блоке. Высота блока в макете 23px */ + display: grid; + color: var(--h3-color); + background-color: var(--text-blocks-background-color); + letter-spacing: 0em; + text-align: left; +} + +.main__section_subtitle { + /* подзаголовок в текстовом блоке. Высота блока в макете 23px */ + color: #000028; + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-accent); + letter-spacing: 0em; + text-align: left; +} + +.main__section-paragraph { + /* стили параграфа и текста в параграфе. */ + display: grid; + color: var(--text-color); + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-accent); + letter-spacing: 0em; + text-align: left; + background-color: rgba(255, 165, 0, 0.2); +} + +/*----- Секция 2 -----*/ + +.footer { + width: 1024px; + height: 100vh; + display: flex; + justify-content: center; +} + +.title-footer { + font-family: IBM Plex Mono; + font-size: 157px; + font-weight: 700; + line-height: 130px; + letter-spacing: 0em; + text-align: left; + width: 471px; + height: 130px; + text-transform: lowercase; + color: #db00ff; + text-shadow: 2px 2px 0 var(--accent-color); +} diff --git a/freeze_project/styles/variables.css b/freeze_project/styles/variables.css new file mode 100644 index 0000000..f341f4d --- /dev/null +++ b/freeze_project/styles/variables.css @@ -0,0 +1,16 @@ +/* + Переменные для вашего проекта + и их переопределение под различные устройства +*/ + +:root { + --color-accent: #ff0070; + --font-weight-normal: 400; + --font-weight-bold: 700; + --text-color: #f1b2ce; + --text-blocks-font-size: 18px; + --line-height-accent: 23.4px; + --h3-color: #000028; + --h2-color: #ff0070; + --text-blocks-background-color: #ff0070; +} diff --git a/index.html b/index.html index 868edff..c3356d9 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,151 @@ - - - - - - - - - Сложно сосредоточиться - - - - - - - - -
- -
- - - + + + + + + + + + + Сложно сосредоточиться + + + + + + + + + + +
+ + + + + +
+ + +
+ +
+

+ Почему сосредоточиться так сложно +

+ + +
+

Многозадачность

+

+ Особенно сложно сосредоточиться, когда задач много и все они — + важные. Где же легендарная многозадачность, когда она так нужна вам + (и всем нанимающим менеджерам этого мира)? А дело в том, что её + просто не существует. Исследователи выяснили, что мозгу тяжело + концентрироваться даже на двух делах одновременно. А когда в поле + внимания попадает несколько важных задач, организм паникует и + выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы + работаем невнимательно: ошибаемся и быстро устаём. +

+
+ + +
+

Дофамин

+

+ С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей + невозможности сосредоточиться замешана и полная противоположность + стрессу — дофамин. Это вещество участвует в системе вознаграждения + мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на + что-то более «приятное» для мозгов. Например, смотрим лайки в + соцсетях. В это время и выделяется дофамин — и мы чувствуем + удовольствие. Получается замкнутый круг: чем больше отвлекаешься, + тем больше удовольствия получаешь. +

+
+
+ + + + +
+
+

+ Что снижает концентрацию внимания? +

+
+ + +
+

Многозадачность

+

Как концентрация может снижаться из-за… концентрации? Любая стрессовая + ситуация (и резко меняющийся мир в целом) заставляет наш мозг постоянно «сканировать» окружающую среду на + предмет опасности. Например, читать новости вместо работы. Но быть собранными всё время — невозможно. + Концентрация — мышца, и она может не выдержать, если не давать ей отдохнуть.

+
+ + +
+

Еда

+

«Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно доставляют в + мозг энергию и помогают ему лучше работать. Но уходит эта энергия также быстро, как и приходит. А мы в + результате попадаем на «углеводные качели»: как только действие «быстрых углеводов» заканчивается, мы + чувствуем усталость и сонливость. И хотим ещё больше быстрых углеводов. +

+
+ + +
+

Гаджеты

+

Да-да, это та самая ситуация, когда на экране ноутбука — код, в наушниках — + подкаст, а на компьютере фоном — ещё и видео с забавными утятами. В результате мозг пытается переключиться с + одной задачи на другую — и просто не может. А чтобы вернуться к состоянию полной концентрации, человеку в + среднем нужно 20 минут. Вот и получается, что чем больше времени мы проводим в гаджетах, тем больше времени + затем нужно, чтобы вернуться к работе.

+
+
+ + + + + + + + +
3
+ + + +
4
+ +
+ + + + + + + \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 012220c..d800672 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -10,6 +10,7 @@ body { min-inline-size: 375px; max-inline-size: 1440px; margin: 0 auto; + font-family: 'IBM Plex mono', sans-serif; } h1, diff --git a/styles/style.css b/styles/style.css index 1656192..53dac18 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,7 +4,7 @@ /* сохраните в разметке и стилях класс page. На его основе работает скрипт. */ max-width: 1440px; background-color: #000028; - background-image: url('../images/cover-image-dark.png'); + background-image: url("../images/cover-image-dark.png"); object-fit: cover; background-position: center; background-repeat: no-repeat; @@ -14,8 +14,134 @@ .header { width: 1024px; - height: 768px; + height: 100vh; + display: grid; + min-height: 768px; + margin-block-end: 60px; } -.decorated-zone { +.header__theme-menu-list { + display: flex; + justify-content: center; +} + +.main { + display: grid; +} + +.text-blocks__general-rules { + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-accent); +} + +/* Стили: */ +.grid-test1 { + display: grid; + grid-template-columns: repeat(3, minmax(236px, 315px)); + grid-template-rows: auto; + column-gap: 20px; + row-gap: 20px; + padding: 0 0 0 20px; +} + +/* Заголовок */ +.block_size_big { + background-color: rgba(255, 0, 0, 0.2); + grid-column-start: 1; + grid-column-end: 4; + color: var(--h2-color); + grid-template-rows: auto; +} + +.title-block_size_big { + width: 315px; + rgba(255, 0, 0, 0.2); +} + +/*----- Секция 1 -----*/ +.grid__main-1 { + display: grid; + grid-template-columns: 315px minmax(315px, 650px); + grid-template-rows: repeat(2, 1fr); + /* width: 1024px; */ + /* height: 508px; */ + padding: 0 0 0 20px; + column-gap: 20px; + row-gap: 20px; + margin-block-end: 80px; +} + +.main__section-h2-title { + /* Заголовок в пустом блоке. Высота блока в макете 47px */ + display: grid; + grid-row-start: 1; + grid-row-end: 3; + color: var(--h2-color); + letter-spacing: 0em; + text-align: left; + background-color: rgba(255, 165, 0, 0.2); +} + +.main__section_text-block { + /* Обертка для текстового блока */ + display: grid; + grid-template-rows: repeat(2, min-content); + row-gap: 10px; +} + +.main__section_h3-title { + /* Заголовок h3 в текстовом блоке. Высота блока в макете 23px */ + display: grid; + color: var(--h3-color); + background-color: var(--text-blocks-background-color); + letter-spacing: 0em; + text-align: left; +} + +.main__section-paragraph { + /* стили параграфа и текста в параграфе. */ + display: grid; + color: var(--text-color); + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-accent); + letter-spacing: 0em; + text-align: left; + background-color: rgba(255, 165, 0, 0.2); + justify-items: start; + align-items: start; +} + +.main__section_subtitle { + /* подзаголовок в текстовом блоке. Высота блока в макете 23px */ + color: #000028; + font-size: var(--text-blocks-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-accent); + letter-spacing: 0em; + text-align: left; +} + +/*----- Секция 2 -----*/ + +.footer { + width: 1024px; + height: 100vh; + display: flex; + justify-content: center; +} + +.title-footer { + font-family: IBM Plex Mono; + font-size: 157px; + font-weight: 700; + line-height: 130px; + letter-spacing: 0em; + text-align: left; + width: 471px; + height: 130px; + text-transform: lowercase; + color: #db00ff; + text-shadow: 2px 2px 0 var(--accent-color); } diff --git a/styles/variables.css b/styles/variables.css index 9cef8ca..f341f4d 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -2,3 +2,15 @@ Переменные для вашего проекта и их переопределение под различные устройства */ + +:root { + --color-accent: #ff0070; + --font-weight-normal: 400; + --font-weight-bold: 700; + --text-color: #f1b2ce; + --text-blocks-font-size: 18px; + --line-height-accent: 23.4px; + --h3-color: #000028; + --h2-color: #ff0070; + --text-blocks-background-color: #ff0070; +}