реализовал 1 и 2 секции в main

sergeybabann · Dec 16, 2023 · 11debd0 · 11debd0
1 parent ad23faf
commit 11debd0
Show file tree

Hide file tree

Showing 27 changed files with 682 additions and 51 deletions.
diff --git a/freeze_project/fonts/IBMPlexMono-Bold.woff b/freeze_project/fonts/IBMPlexMono-Bold.woff
diff --git a/freeze_project/fonts/IBMPlexMono-Regular.woff b/freeze_project/fonts/IBMPlexMono-Regular.woff
diff --git a/freeze_project/fonts/fonts.css 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
diff --git a/freeze_project/images/books.png b/freeze_project/images/books.png
diff --git a/freeze_project/images/cover-image-dark.png b/freeze_project/images/cover-image-dark.png
diff --git a/freeze_project/images/cover-image-light.png b/freeze_project/images/cover-image-light.png
diff --git a/freeze_project/images/cover-image.png b/freeze_project/images/cover-image.png
diff --git a/freeze_project/images/favicon.ico b/freeze_project/images/favicon.ico
diff --git a/freeze_project/images/favicon.svg b/freeze_project/images/favicon.svg
diff --git a/freeze_project/images/ice-cream.png b/freeze_project/images/ice-cream.png
diff --git a/freeze_project/images/mobile-icon.png b/freeze_project/images/mobile-icon.png
diff --git a/freeze_project/images/street.png b/freeze_project/images/street.png
diff --git a/freeze_project/images/sunset.png b/freeze_project/images/sunset.png
diff --git a/freeze_project/images/tape.png b/freeze_project/images/tape.png
diff --git a/freeze_project/index.html b/freeze_project/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="dark light" />
+  <link rel="icon" href="./images/favicon.ico" sizes="any" />
+  <link rel="icon" href="./images/favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="mobile-icon.png" />
+  <title>Сложно сосредоточиться</title>
+  <link rel="stylesheet" href="./fonts/fonts.css" />
+  <link rel="stylesheet" href="./styles/globals.css" />
+  <link rel="stylesheet" href="./styles/variables.css" />
+  <link rel="stylesheet" href="./styles/style.css" />
+  <link rel="stylesheet" href="./styles/dark.css" />
+  <link rel="stylesheet" href="./styles/light.css" />
+</head>
+
+<body class="page">
+  <!----- HEADER ----->
+  <header class="header decorated-zone">
+
+    <nav class="header__theme-menu">
+      <ul class="header__theme-menu-list">
+        <li class="header__theme-menu-item">
+          <button class="header__theme-menu-button header__theme-menu-button_type_light">
+            День
+          </button>
+        </li>
+        <li class="header__theme-menu-item">
+          <button class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_auto"
+            disabled>
+            Авто
+          </button>
+        </li>
+        <li class="header__theme-menu-item">
+          <button class="header__theme-menu-button header__theme-menu-button_type_dark">
+            Неон
+          </button>
+        </li>
+      </ul>
+    </nav>
+    </div>
+
+    <!-- <h1 class="h1-title">no focus</h1> -->
+  </header>
+
+  <!----- MAIN ----->
+  <main class="main">
+    <!----- Section 1 ----->
+    <section class="grid__main-1">
+      <h2 class="main__section-h2-title text-blocks__general-rules">
+        Почему сосредоточиться так сложно
+      </h2>
+
+      <!----- Обертка для текстового блока ----->
+      <div class="main__section_text-block">
+        <h3 class="main__section_h3-title">Многозадачность</h3>
+        <p class="main__section-paragraph">
+          Особенно сложно сосредоточиться, когда задач много и все они —
+          важные. Где же легендарная многозадачность, когда она так нужна вам
+          (и всем нанимающим менеджерам этого мира)? А дело в том, что её
+          просто не существует. Исследователи выяснили, что мозгу тяжело
+          концентрироваться даже на двух делах одновременно. А когда в поле
+          внимания попадает несколько важных задач, организм паникует и
+          выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы
+          работаем невнимательно: ошибаемся и быстро устаём.
+        </p>
+      </div>
+
+      <!----- Обертка для текстового блока ----->
+      <div class="main__section_text-block">
+        <h3 class="main__section_h3-title">Дофамин</h3>
+        <p class="main__section-paragraph">
+          С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей
+          невозможности сосредоточиться замешана и полная противоположность
+          стрессу — дофамин. Это вещество участвует в системе вознаграждения
+          мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на
+          что-то более «приятное» для мозгов. Например, смотрим лайки в
+          соцсетях. В это время и выделяется дофамин — и мы чувствуем
+          удовольствие. Получается замкнутый круг: чем больше отвлекаешься,
+          тем больше удовольствия получаешь.
+        </p>
+      </div>
+    </section>
+    <!--//section 1-->
+
+
+
+
+
+
+
+
+    <!----- Section 3 ----->
+    <section class="grid__main-3">3</section>
+    <!--//section 3-->
+
+    <!----- Section 4 ----->
+    <section class="grid__main-4">4</section>
+    <!--//section 4-->
+  </main>
+
+  <!----- FOOTER ----->
+  <footer class="footer">
+    <h4 class="title-footer">focus</h4>
+  </footer>
+  <!-- <script src="./scripts/script.js"></script> -->
+</body>
+
+</html>
diff --git a/freeze_project/info.txt b/freeze_project/info.txt
@@ -0,0 +1,6 @@
+Здесь я сохраняю общую информацию о своей работе.
+Конспектирование, шпаргалки, задачи, ссылки на необходимые ресурсы,
+накопление важных ресурсных определений.
+
+
+
diff --git a/freeze_project/scripts/script.js 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
@@ -0,0 +1,12 @@
+/*
+  Специально для тёмной темы при наличии класса,
+  здесь окажутся стили, которые нужно переопределить принудительно,
+  переключая тему
+*/
+
+.page.theme_dark {
+  /* сохраните этот селектор в приведённом виде.
+    Так стили написанные ниже будут иметь больший вес,
+    чем стили в медиазапросе предпочтений пользователя
+  */
+}
diff --git a/freeze_project/styles/globals.css 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
@@ -0,0 +1,12 @@
+/*
+  Специально для светлой темы при наличии класса.
+  Здесь окажутся стили, которые нужно переопределить принудительно,
+  переключая тему
+*/
+
+.page.theme_light {
+  /* сохраните этот селектор в приведённом виде.
+    Так стили написанные ниже будут иметь больший вес,
+    чем стили в медиазапросе предпочтений пользователя
+  */
+}
diff --git a/freeze_project/styles/style.css 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);
+}