more content + css

zusmanzus · Oct 2, 2023 · 17b3138 · 17b3138
1 parent d674520
commit 17b3138
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -13,13 +13,89 @@
   </head>
   <body class="page theme_dark">
     <header class="header">
-      <h1 class="heading content-section">Карты подскажут</h1>
+      <h1 class="heading header__title content-section">Карты подскажут</h1>
     </header>
     <main class="content content-section">
-      <h2 class="heading">Креативный подход к решению проблем</h2>
-      <h2 class="heading">Что это за колода</h2>
-      <h2 class="heading">Как работают «обходные стратегии»</h2>
-      <h2 class="heading">Кто пользовался Oblique Strategies</h2>
+      <h2 class="heading content__title">
+        Креативный подход к решению проблем
+      </h2>
+      <div class="content__text-block">
+        <p class="content__paragraph">
+          Творческие кризисы, кажется, рано или поздно испытывает любой человек.
+          Часто бывает так, что вы сталкиваетесь с проблемой, не можете решить
+          её с первого раза и начинаете думать, что вообще ни на что не
+          способны. Мозг запоминает эту модель поведения, и на следующий день
+          вам не хочется делать вообще ничего — ведь всё равно ничего не
+          получится.
+        </p>
+        <p class="content__paragraph">
+          Как выйти из такого застоя? Есть разные варианты, мы поговорим об
+          одном из самых креативных — колоде карт.
+        </p>
+      </div>
+      <h2 class="heading content__title">Что это за колода</h2>
+      <div class="content__text-block">
+        <p class="content__paragraph">
+          Тут могло бы быть что-то про пользу игры в «Дурака» или о высших
+          арканах Таро, но у нас на примете другая колода. Она называется
+          Oblique Strategies, или «Обходные стратегии». Первую колоду ещё в 1975
+          году создали композитор, музыкальный продюсер и один из основателей
+          жанра эмбиент Брайан Ино и мультимедиа-художник Питер Шмидт.
+        </p>
+      </div>
+      <div class="content__text-block">
+        <p class="contnet__paragraph">
+          Oblique Strategies в основном используют музыканты, но колода подходит
+          для преодоления творческого кризиса в любой сфере. Её рекомендуют
+          писателям, продакт-менеджерам, художникам и разработчикам.
+        </p>
+        <p class="contnet__paragraph">
+          Колода состоит из ста с лишним карточек, на которых написано всего по
+          одной фразе. Часто — довольно абстрактной. Например, «Какую ошибку вы
+          совершили в прошлый раз?» или «Замените двусмысленность на
+          конкретику», или даже «Добавьте что-то ещё». Эти фразы и надо
+          применять к проблеме или творческому блоку. Каким именно способом?
+          Решаете только вы.
+        </p>
+      </div>
+      <h2 class="heading content__title">Как работают «обходные стратегии»</h2>
+      <div class="content__text-block">
+        <p class="contnet__paragraph">
+          Вот что сам Брайан Ино рассказывает о создании Oblique Strategies:
+        </p>
+        <p class="contnet__paragraph">
+          «Эти карты появились, потому что я оказывался в рабочих ситуациях
+          (особенно в звукозаписывающих студиях), когда из-за паники быстро
+          забывал, что кроме самых очевидных решений были и другие — косвенные.
+          И часто именно такие неочевидные способы выдавали гораздо более
+          интересные результаты, чем решения „в лоб“».
+        </p>
+        <p class="contnet__paragraph">
+          Таким образом, колода Ино поощряет нас видеть препятствия не как
+          тупики, а как отправные точки для поиска более интересных решений.
+        </p>
+        <p class="contnet__paragraph">
+          И кстати, сейчас необязательно охотиться за редкими физическими
+          колодами Oblique Strategies — тем более, что их моментально разбирают
+          фанаты Ино. Есть довольно симпатичные веб-сайты с
+          диджитал-эквивалентами карточек и приложения для
+          <a
+            href="https://apps.apple.com/us/app/oblique-strategies-se/id1104927011"
+            target="_blank"
+            >iOS</a
+          >
+          и
+          <a
+            href="https://play.google.com/store/apps/details?id=com.monoloco.obliquestrategies&hl=en_US&gl=US&pli=1"
+            target="_blank"
+            >Android</a
+          >.
+        </p>
+      </div>
+      <h2 class="heading content__title">Кто пользовался Oblique Strategies</h2>
+      <div class="content__text-block">
+        <p class="contnet__paragraph"></p>
+      </div>
     </main>
     <footer class="footer"></footer>
 

diff --git a/styles/style.css b/styles/style.css
@@ -36,3 +36,24 @@ figure {
   background-color: var(--bg-color, #f3efec);
   color: var(--text-color);
 }
+
+.heading{
+  font-family: var(--accent-font, serif);
+  font-weight: 600;
+  line-height: 0.9;
+  text-align: center;
+}
+
+.content-section {
+  padding: 0 5vi; /* внутренний отступ справа и слева */
+}
+
+.header__title {
+  font-size: clamp(3.75rem, 2.5rem + 5.5556vw, 7.5rem);  /* адаптивный размер шрифта для разных экранов */
+  margin-block-end: 40px;
+}
+
+.content__title {
+  margin: 7% 0 2.5%;
+  font-size: 30px;
+};