bem structure

README.MD

@@ -0,0 +1,38 @@
+# Научиться учиться
+
+## Описание проекта
+
+Проект создан в рамках обучения на курсе **Frontend-разработчик**.<br> Его цель — продемонстрировать современные и эффективные подходы к обучению, которые могут улучшить процесс самообразования. На сайте представлены техники и упражнения, которые делают процесс обучения более эффективным и увлекательным.
+
+### Основная функциональность:
+
+- Интерактивные блоки с полезной информацией о техниках обучения.
+- Анимация бесконечного вращения элементов на главной странице.
+- Ссылки на дополнительные материалы по теме.
+
+### Используемые технологии:
+
+- **HTML5**: для структурирования контента и семантической верстки.
+- **CSS3**: для стилизации, создания адаптивного интерфейса и анимаций.
+- **BEM (Block Element Modifier)**: методология для организации структуры CSS-классов.
+- **Flexbox**: для создания гибкой и адаптивной раскладки элементов.
+- **Анимации на CSS**: для плавного вращения элементов с использованием `@keyframes`.
+
+## Планы по доработке
+
+- **Оптимизация анимаций**: планируется улучшить производительность анимаций.
+- **Расширение контента**: добавить больше техник и советов по обучению, а также интерактивные элементы.
+- **Реализация темной темы**: добавить возможность переключения между светлой и темной темами для улучшения пользовательского опыта.
+- **SEO-оптимизация**: улучшить семантику HTML-кода, используя теги `header`, `section`, `article`, и добавить мета-теги для повышения видимости в поисковых системах.
+- **Рефакторинг CSS**: улучшить структуру стилей с использованием переменных CSS и внедрением SCSS для облегчения работы с крупными стилевыми файлами.
+
+## Запуск проекта
+
+1. Склонируйте репозиторий:
+   ```bash
+   git clone https://github.com/flavvvour/YP-project.git
+2. Откройте папку проекта в вашем редакторе кода (например, Visual Studio Code).
+
+3. Установите расширение Live Server (если оно ещё не установлено).
+
+4. Запустите проект, кликнув правой кнопкой мыши по файлу `index.html` и выбрав ``Open with Live Server``. Страница откроется в браузере автоматически.

blocks/__animation/_rotation/rotation.css

@@ -0,0 +1,8 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

blocks/content/description/description.css

@@ -0,0 +1,6 @@
+.description {
+  margin-top: 100px;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}

blocks/content/description/two-columns/__brief/two-columns__brief.css

@@ -0,0 +1,8 @@
+.two-columns__brief {
+  width: 175px;
+  color: #2f80ed;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin-top: 0;
+}

blocks/content/description/two-columns/__main-text/two-columns__main-text.css

@@ -0,0 +1,5 @@
+.two-columns__main-text {
+  flex: 1;
+  min-width: 784px;
+  margin-left: 80px;
+}

blocks/content/description/two-columns/__paragraph/two-columns__paragraph.css

@@ -0,0 +1,11 @@
+.two-columns__paragraph {
+  line-height: 34px;
+  font-size: 24px;
+  font-weight: normal;
+  margin-bottom: 30px;
+  margin-top: 0;
+}
+
+.two-columns__paragraph:last-of-type {
+  margin-bottom: 0;
+}

blocks/content/description/two-columns/__span-accent/two-columns__span-accent.css

@@ -0,0 +1,5 @@
+.two-columns__span-accent {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 34px;
+}

blocks/content/description/two-columns/two-columns.css

@@ -0,0 +1,6 @@
+.two-columns {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}

blocks/content/digits/digits.css

@@ -0,0 +1,3 @@
+.digits {
+  margin-bottom: 100px;
+}

blocks/content/feynman/__link/feynman__link.css

@@ -0,0 +1,16 @@
+.feynman__link {
+  position: absolute;
+  top: 45%;
+  right: 48px;
+  color: #2f80ed;
+  text-decoration: none;
+  line-height: 51px;
+  font-size: 36px;
+  font-weight: normal;
+  transition: opacity 0.5s ease-in-out;
+  z-index: 100;
+  cursor: pointer;
+}
+.feynman__link:hover {
+  opacity: 0.6;
+}

blocks/content/feynman/__subtitle/feynman__subtitle.css

@@ -0,0 +1,7 @@
+.feynman__subtitle {
+  margin: 0px auto 70px;
+  text-align: center;
+  line-height: 51px;
+  font-size: 36px;
+  font-weight: normal;
+}

blocks/content/feynman/__title/feynman__title.css

@@ -0,0 +1,8 @@
+.feynman__title {
+  margin: -88px auto 70px;
+  text-align: center;
+  width: 648px;
+  line-height: 1.15;
+  font-size: 120px;
+  font-weight: 600;
+}

blocks/content/feynman/feynman.css

@@ -0,0 +1,10 @@
+.feynman {
+  position: relative;
+  background-color: #f2f2f2;
+  height: 700px;
+  background-image: url(/images/.png/feynman.png);
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  background-size: 867px 637px;
+  padding-top: 170px;
+}

blocks/content/kaufman/__triangle/kaufman__triangle.css

@@ -0,0 +1,12 @@
+.kaufman__triangle{
+  position: absolute;
+  top:0;
+  right: -210px;
+  height: 877px;
+  width: 877px;
+  z-index: -1;
+  background-image: url(/images/shapes/kaufman-triangle.svg);
+  background-size: 877px 877px;
+  animation: spin 20s linear infinite;
+  transform-origin: center;
+}

blocks/content/kaufman/kaufman.css

@@ -0,0 +1,6 @@
+.kaufman {
+  position: relative;
+  overflow: hidden;
+  background-color: #1f1f1f;
+  z-index: -2;
+}

blocks/content/kaufman/section/-subtitle/_theme_dark/section-subtitle_theme_dark.css

@@ -0,0 +1,3 @@
+.section-subtitle_theme_dark {
+  color: white;
+}

blocks/content/kaufman/section/-subtitle/section-subtitle.css

@@ -0,0 +1,8 @@
+.section-subtitle {
+  margin: 0 auto 0;
+  text-align: center;
+  width: 60%;
+  line-height: 34px;
+  font-size: 24px;
+  font-weight: normal;
+}

blocks/content/kaufman/section/-title/_theme_dark/section-title_theme_dark.css

@@ -0,0 +1,4 @@
+.section-title_theme_dark {
+  margin: 90px auto 20px;
+  color: white;
+}

blocks/content/kaufman/section/-title/section-title.css

@@ -0,0 +1,8 @@
+.section-title {
+  margin: 100px auto 20px;
+  text-align: center;
+  width: 60%;
+  line-height: 1.15;
+  font-size: 60px;
+  font-weight: 600;
+}

blocks/content/kaufman/table/__cell/_theme_dark/table__cell_theme_dark.css

@@ -0,0 +1,6 @@
+.table__cell_theme_dark {
+  width: 200px;
+  color: white;
+  margin-right: 0;
+  margin-top: 80px;
+}

blocks/content/kaufman/table/__cell/table__cell.css

@@ -0,0 +1,4 @@
+.table__cell {
+  margin-top: 60px;
+  width: 250px;
+}

blocks/content/kaufman/table/__heading/table__heading.css

@@ -0,0 +1,6 @@
+.table__heading {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 24px;
+  font-weight: 600;
+}

blocks/content/kaufman/table/__text/table__text.css

@@ -0,0 +1,6 @@
+.table__text {
+  margin: 20px 0 0 0;
+  line-height: 1.2;
+  font-size: 18px;
+  font-weight: normal;
+}

blocks/content/kaufman/table/_theme_dark/table_theme_dark.css

@@ -0,0 +1,3 @@
+.table_theme_dark {
+  margin-bottom: 90px;
+}

blocks/content/kaufman/table/table.css

@@ -0,0 +1,8 @@
+.table {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 1100px;
+  margin: 0 auto;
+}

blocks/content/khan/__author/khan__author.css

@@ -0,0 +1,6 @@
+.khan__author {
+  line-height: 42px;
+  font-size: 30px;
+  font-weight: normal;
+  margin: 0;
+}

blocks/content/khan/__book/-container/khan__book-container.css

@@ -0,0 +1,5 @@
+.khan__book-container {
+  margin-top: 68px;
+  display: flex;
+  flex-direction: row;
+}

blocks/content/khan/__book/-pic/khan__book-pic.css

@@ -0,0 +1,5 @@
+.khan__book-pic {
+  background-image: url(/images/.png/khan-book.jpg);
+  width: 620px;
+  height: 608px;
+}

blocks/content/khan/__buy/-link/khan__buy-link.css

@@ -0,0 +1,15 @@
+.khan__buy-link {
+  line-height: 42px;
+  font-size: 30px;
+  font-weight: normal;
+  color: #2f80ed;
+  margin-left: 48px;
+  margin-top: 0;
+  transition: opacity 0.5s ease-in-out;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.khan__buy-link:hover {
+  opacity: 0.6;
+}

blocks/content/khan/__container/khan__container.css

@@ -0,0 +1,3 @@
+.khan__container {
+  width: 80%;
+}

blocks/content/khan/__quote/-author/-subline/khan__quote-author-subline.css

@@ -0,0 +1,6 @@
+.khan__quote-author-subline {
+  line-height: 1.15;
+  font-size: 24px;
+  font-weight: normal;
+  margin-top: 10px;
+}

blocks/content/khan/__quote/-author/khan__quote-author.css

@@ -0,0 +1,6 @@
+.khan__quote-author {
+  line-height: 1.15;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 36px 0 0 0;
+}

blocks/content/khan/__quote/khan__quote.css

@@ -0,0 +1,7 @@
+.khan__quote {
+  width: 790px;
+  line-height: 34px;
+  font-size: 24px;
+  font-weight: normal;
+  margin: 50px 0 0 0;
+}

blocks/content/khan/__title/khan__title.css

@@ -0,0 +1,6 @@
+.khan__title {
+  line-height: 1.15;
+  font-size: 60px;
+  font-weight: 600;
+  margin: 0;
+}

blocks/content/khan/khan.css

@@ -0,0 +1,9 @@
+.khan {
+  height: auto;
+  background-color: #f2f2f2;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 105px;
+}

blocks/content/oakley/__description/oakley__description.css

@@ -0,0 +1,5 @@
+.oakley__description {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}

blocks/content/oakley/oakley.css

@@ -0,0 +1,6 @@
+.oakley {
+  background-color: #f2f2f2;
+  padding-top: 160px;
+}
+
+

blocks/content/resources/__link/resources__link.css

@@ -0,0 +1,3 @@
+.resources__link {
+  text-decoration: none;
+}

blocks/content/resources/__logo/--arzamas/resources__logo--arzamas.css

@@ -0,0 +1,3 @@
+.resources__logo--arzamas {
+  background-image: url(/images/logo/resources-arzamas.svg);
+}

blocks/content/resources/__logo/--nplus1/resources__logo--nplus1.css

@@ -0,0 +1,3 @@
+.resources__logo--nplus1 {
+  background-image: url(/images/logo/resources-n1.svg);
+}

blocks/content/resources/__logo/--polka/resources__logo--polka.css

@@ -0,0 +1,3 @@
+.resources__logo--polka {
+  background-image: url(/images/logo/resources-strelka.svg);
+}

blocks/content/resources/__logo/--strelka/resources__logo--strelka.css

@@ -0,0 +1,3 @@
+.resources__logo--strelka {
+  background-image: url(/images/logo/resources-polka.svg);
+}

blocks/content/resources/__logo/-zone/resources__logo-zone.css

@@ -0,0 +1,9 @@
+.resources__logo-zone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 1100px;
+  height: auto;
+  margin: 80px auto 217px auto;
+}

blocks/content/resources/__logo/resources__logo.css

@@ -0,0 +1,7 @@
+.resources__logo {
+  width: 270px;
+  height: 38px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

blocks/content/techniques/cards/__description/cards__description.css

@@ -0,0 +1,7 @@
+.cards__description {
+  margin-top: 16px;
+  margin-bottom: 0;
+  line-height: 1.2;
+  font-size: 18px;
+  font-weight: normal;
+}

blocks/content/techniques/cards/__image/cards__image.css

@@ -0,0 +1,6 @@
+.cards__image {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  margin: 0 40px 43px 40px;
+}

blocks/content/techniques/cards/__item/cards__item.css

@@ -0,0 +1,7 @@
+.cards__item {
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}

blocks/content/techniques/cards/__title/cards__title.css

@@ -0,0 +1,7 @@
+.cards__title {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.15;
+  font-size: 24px;
+  font-weight: 600;
+}

blocks/content/techniques/cards/cards.css

@@ -0,0 +1,7 @@
+.cards {
+  width: 920px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 100px;
+  margin-top: 60px;
+}