diff --git a/README.md b/README.md new file mode 100644 index 0000000..d87db8a --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# How to learn +--- +Учебный проект, выполняемый в рамках учебы в **Яндекс.Практикум** по специальности web-разработчик. Основная задача проекта - реализовать на практике полученные теоретические знание по web-разработке. + +Проект представляет собой web-сайт, посвященный вопросам повышения эффективности процесса обучения. + +Проект будет дорабатываться по мере освоения новых знаний в процессе обучения. diff --git a/blocks/cards/__description/cards__description.css b/blocks/cards/__description/cards__description.css new file mode 100644 index 0000000..446e81e --- /dev/null +++ b/blocks/cards/__description/cards__description.css @@ -0,0 +1,7 @@ +.cards__description { + line-height: 23px; + font-size: 18px; + font-weight: normal; + text-align: center; + margin: 16px 0 0; +} diff --git a/blocks/cards/__image/cards__image.css b/blocks/cards/__image/cards__image.css new file mode 100644 index 0000000..0eb99b6 --- /dev/null +++ b/blocks/cards/__image/cards__image.css @@ -0,0 +1,6 @@ +.cards__image { + width: 160px; + height: 160px; + border-radius: 50%; + margin: 60px 40px 43px; +} diff --git a/blocks/cards/__item/cards__item.css b/blocks/cards/__item/cards__item.css new file mode 100644 index 0000000..5c557cf --- /dev/null +++ b/blocks/cards/__item/cards__item.css @@ -0,0 +1,3 @@ +.cards__item { + width: 240px; +} diff --git a/blocks/cards/__title/cards__title.css b/blocks/cards/__title/cards__title.css new file mode 100644 index 0000000..5adefa6 --- /dev/null +++ b/blocks/cards/__title/cards__title.css @@ -0,0 +1,7 @@ +.cards__title { + font-size: 24px; + font-weight: bold; + line-height: 1.15; + text-align: center; + margin: 0; +} diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css new file mode 100644 index 0000000..ecbbc5b --- /dev/null +++ b/blocks/cards/cards.css @@ -0,0 +1,10 @@ +.cards { + width: 920px; + margin: auto; + + display: grid; + grid-template-columns: auto auto auto; + column-gap: 100px; + row-gap: 60px; + padding-top: 60px; +} diff --git a/blocks/feynman/__link/feynman__link.css b/blocks/feynman/__link/feynman__link.css new file mode 100644 index 0000000..80814d9 --- /dev/null +++ b/blocks/feynman/__link/feynman__link.css @@ -0,0 +1,15 @@ +.feynman__link { + line-height: 51px; + font-size: 36px; + font-weight: normal; + color: #2f80ed; + text-decoration: none; + position: absolute; + right: 48px; + top: 50%; + transition: opacity, 0.5s; +} + +.feynman__link:hover { + opacity: 0.6; +} diff --git a/blocks/feynman/__subtitle/feynman__subtitle.css b/blocks/feynman/__subtitle/feynman__subtitle.css new file mode 100644 index 0000000..58751b6 --- /dev/null +++ b/blocks/feynman/__subtitle/feynman__subtitle.css @@ -0,0 +1,7 @@ +.feynman__subtitle { + line-height: 51px; + font-size: 36px; + font-weight: normal; + text-align: center; + margin: 0; +} diff --git a/blocks/feynman/__title/feynman__title.css b/blocks/feynman/__title/feynman__title.css new file mode 100644 index 0000000..77fa1ae --- /dev/null +++ b/blocks/feynman/__title/feynman__title.css @@ -0,0 +1,8 @@ +.fyenman__title { + line-height: 1.15; + font-size: 120px; + font-weight: bold; + width: 648px; + text-align: center; + margin: 100px 0 70px; +} diff --git a/blocks/feynman/feynman.css b/blocks/feynman/feynman.css new file mode 100644 index 0000000..e2451b9 --- /dev/null +++ b/blocks/feynman/feynman.css @@ -0,0 +1,12 @@ +.feynman { + display: flex; + flex-direction: column; + height: 890px; + background-image: url("/images/feynman.png"); + background-repeat: no-repeat; + background-position: bottom left; + background-size: 867px 637px; + background-color: #f2f2f2; + align-items: center; + position: relative; +} diff --git a/blocks/footer/__author/footer__author.css b/blocks/footer/__author/footer__author.css new file mode 100644 index 0000000..9babfc2 --- /dev/null +++ b/blocks/footer/__author/footer__author.css @@ -0,0 +1,5 @@ +.footer__author { + line-height: 25px; + font-size: 18px; + font-weight: normal; +} diff --git a/blocks/footer/__column-heading/footer__column-heading.css b/blocks/footer/__column-heading/footer__column-heading.css new file mode 100644 index 0000000..af496e9 --- /dev/null +++ b/blocks/footer/__column-heading/footer__column-heading.css @@ -0,0 +1,6 @@ +.footer__column-heading { + line-height: 30px; + font-size: 18px; + font-weight: bold; + margin-top: 0; +} diff --git a/blocks/footer/__column-link/footer__column-link.css b/blocks/footer/__column-link/footer__column-link.css new file mode 100644 index 0000000..08ec984 --- /dev/null +++ b/blocks/footer/__column-link/footer__column-link.css @@ -0,0 +1,12 @@ +.footer__column-link { + line-height: 30px; + font-size: 18px; + font-weight: normal; + text-decoration: none; + color: #fff; + transition: opacity, 0.5s; +} + +.footer__column-link:hover { + opacity: 0.6; +} diff --git a/blocks/footer/__column-links/footer__column-links.css b/blocks/footer/__column-links/footer__column-links.css new file mode 100644 index 0000000..a76ee53 --- /dev/null +++ b/blocks/footer/__column-links/footer__column-links.css @@ -0,0 +1,7 @@ +.footer__column-links { + display: list-item; + list-style-type: none; + list-style-position: outside; + margin: 20px 0 16px; + padding: 0; +} diff --git a/blocks/footer/__column/_content/footer__column_content_copyright.css b/blocks/footer/__column/_content/footer__column_content_copyright.css new file mode 100644 index 0000000..67469ae --- /dev/null +++ b/blocks/footer/__column/_content/footer__column_content_copyright.css @@ -0,0 +1,6 @@ +.footer__column_content_copyright { + display: flex; + flex-direction: column; + flex-basis: 711px; + justify-content: space-between; +} \ No newline at end of file diff --git a/blocks/footer/__columns/footer__columns.css b/blocks/footer/__columns/footer__columns.css new file mode 100644 index 0000000..1952a8e --- /dev/null +++ b/blocks/footer/__columns/footer__columns.css @@ -0,0 +1,8 @@ +.footer__columns { + width: 90%; + min-height: 250px; + margin: 60px auto 40px; + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css new file mode 100644 index 0000000..ab6bba2 --- /dev/null +++ b/blocks/footer/footer.css @@ -0,0 +1,7 @@ +.footer { + display: flex; + min-height: 350px; + background-color: #1f1f1f; + color: #fff; + margin: 0; +} diff --git a/blocks/header/__link/header__link.css b/blocks/header/__link/header__link.css new file mode 100644 index 0000000..dbec851 --- /dev/null +++ b/blocks/header/__link/header__link.css @@ -0,0 +1,9 @@ +.header__link { + color: #2f80ed; + text-decoration: none; + transition: opacity, 0.5s; +} + +.header__link:hover { + opacity: 0.6; +} diff --git a/blocks/header/__main-illustration/header__main-illustration.css b/blocks/header/__main-illustration/header__main-illustration.css new file mode 100644 index 0000000..601801e --- /dev/null +++ b/blocks/header/__main-illustration/header__main-illustration.css @@ -0,0 +1,8 @@ +.header__main-illustration { + position: absolute; + width: 765px; + height: 608px; + bottom: 0; + right: 0; + z-index: 0; +} diff --git a/blocks/header/__square-pic/header__square-pic.css b/blocks/header/__square-pic/header__square-pic.css new file mode 100644 index 0000000..a7e86e9 --- /dev/null +++ b/blocks/header/__square-pic/header__square-pic.css @@ -0,0 +1,8 @@ +.header__square-pic { + height: 568px; + width: 568px; + background-color: #2f80ed; + position: absolute; + right: 0; + top: 64px; +} diff --git a/blocks/header/__subtitle/header__subtitle.css b/blocks/header/__subtitle/header__subtitle.css new file mode 100644 index 0000000..b8f7a3d --- /dev/null +++ b/blocks/header/__subtitle/header__subtitle.css @@ -0,0 +1,10 @@ +.header__subtitle { + position: absolute; + width: 388px; + left: 64px; + bottom: 30px; + line-height: 25px; + font-size: 18px; + z-index: 1; + margin: 0; +} diff --git a/blocks/header/__title/header__title.css b/blocks/header/__title/header__title.css new file mode 100644 index 0000000..1139b61 --- /dev/null +++ b/blocks/header/__title/header__title.css @@ -0,0 +1,8 @@ +.header__title { + width: 730px; + line-height: 96px; + font-size: 102px; + margin: 0 0 0 64px; + z-index: 1; + +} diff --git a/blocks/header/header.css b/blocks/header/header.css new file mode 100644 index 0000000..b7731ea --- /dev/null +++ b/blocks/header/header.css @@ -0,0 +1,12 @@ +.header { + height: 100vh; + min-height: 600px; + max-height: 756px; + background-color: #f2f2f2; + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 0 0 0; + position: relative; + overflow: hidden; +} diff --git a/blocks/kaufman/__triangle/kaufman__triangle.css b/blocks/kaufman/__triangle/kaufman__triangle.css new file mode 100644 index 0000000..5868bad --- /dev/null +++ b/blocks/kaufman/__triangle/kaufman__triangle.css @@ -0,0 +1,10 @@ +.kaufman__triangle { + background-image: url(/images/kaufman-triangle.svg); + background-size: cover; + width: 877px; + height: 877px; + position: absolute; + top: 0; + right: -210px; + z-index: 0; +} diff --git a/blocks/kaufman/kaufman.css b/blocks/kaufman/kaufman.css new file mode 100644 index 0000000..02b5126 --- /dev/null +++ b/blocks/kaufman/kaufman.css @@ -0,0 +1,9 @@ +.kaufman { + background-color: #1f1f1f; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + overflow: hidden; + margin: 0 0 0 0; +} diff --git a/blocks/khan/__author/khan__author.css b/blocks/khan/__author/khan__author.css new file mode 100644 index 0000000..9b0d748 --- /dev/null +++ b/blocks/khan/__author/khan__author.css @@ -0,0 +1,6 @@ +.khan__author { + line-height: 42px; + font-size: 30px; + font-weight: normal; + margin: 0; +} diff --git a/blocks/khan/__book-container/khan__book-container.css b/blocks/khan/__book-container/khan__book-container.css new file mode 100644 index 0000000..d5c0aa4 --- /dev/null +++ b/blocks/khan/__book-container/khan__book-container.css @@ -0,0 +1,3 @@ +.khan__book-container { + display: flex; +} diff --git a/blocks/khan/__book-pic/khan__book-pic.css b/blocks/khan/__book-pic/khan__book-pic.css new file mode 100644 index 0000000..1ae45c1 --- /dev/null +++ b/blocks/khan/__book-pic/khan__book-pic.css @@ -0,0 +1,7 @@ +.khan__book-pic { + width: 620px; + height: 608px; + object-fit: cover; + object-position: top right; + margin: 0 48px 0 0; +} diff --git a/blocks/khan/__buy-link/khan__buy-link.css b/blocks/khan/__buy-link/khan__buy-link.css new file mode 100644 index 0000000..26ec799 --- /dev/null +++ b/blocks/khan/__buy-link/khan__buy-link.css @@ -0,0 +1,13 @@ +.khan__buy-link { + line-height: 42px; + font-size: 30px; + font-weight: normal; + color: #2f80ed; + text-decoration: none; + transition: opacity, 0.5s; + align-self: baseline; +} + +.khan__buy-link:hover { + opacity: 0.6; +} diff --git a/blocks/khan/__container/khan__container.css b/blocks/khan/__container/khan__container.css new file mode 100644 index 0000000..09437ef --- /dev/null +++ b/blocks/khan/__container/khan__container.css @@ -0,0 +1,4 @@ +.khan__container { + width: 80%; + margin: auto; +} diff --git a/blocks/khan/__quote-author-subline/khan__quote-author-subline.css b/blocks/khan/__quote-author-subline/khan__quote-author-subline.css new file mode 100644 index 0000000..6abfe33 --- /dev/null +++ b/blocks/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: 10px 0 68px; +} diff --git a/blocks/khan/__quote-author/khan__quote-author.css b/blocks/khan/__quote-author/khan__quote-author.css new file mode 100644 index 0000000..aeacd5e --- /dev/null +++ b/blocks/khan/__quote-author/khan__quote-author.css @@ -0,0 +1,6 @@ +.khan__quote-author { + line-height: 1.15; + font-size: 24px; + font-weight: bold; + margin: 0; +} diff --git a/blocks/khan/__quote/khan__quote.css b/blocks/khan/__quote/khan__quote.css new file mode 100644 index 0000000..b611f75 --- /dev/null +++ b/blocks/khan/__quote/khan__quote.css @@ -0,0 +1,6 @@ +.khan__quote { + line-height: 34px; + font-size: 24px; + font-weight: normal; + margin: 50px 0 36px; +} diff --git a/blocks/khan/__title/khan__title.css b/blocks/khan/__title/khan__title.css new file mode 100644 index 0000000..156209b --- /dev/null +++ b/blocks/khan/__title/khan__title.css @@ -0,0 +1,6 @@ +.khan__title { + line-height: 1.15; + font-size: 60px; + font-weight: bold; + margin: 0; +} diff --git a/blocks/khan/khan.css b/blocks/khan/khan.css new file mode 100644 index 0000000..42ccd76 --- /dev/null +++ b/blocks/khan/khan.css @@ -0,0 +1,3 @@ +.khan { + background-color: #f2f2f2; +} diff --git a/blocks/logo/_place/logo_place_footer.css b/blocks/logo/_place/logo_place_footer.css new file mode 100644 index 0000000..07c942a --- /dev/null +++ b/blocks/logo/_place/logo_place_footer.css @@ -0,0 +1,5 @@ +.logo_place_footer { + background-image: url(/images/logo_place_footer.svg); + width: 183px; + height: 35px; +} diff --git a/blocks/logo/_place/logo_place_header.css b/blocks/logo/_place/logo_place_header.css new file mode 100644 index 0000000..1c75e63 --- /dev/null +++ b/blocks/logo/_place/logo_place_header.css @@ -0,0 +1,6 @@ +.logo_place_header { + position: absolute; + top: 30px; + left: 64px; + z-index: 1; +} diff --git a/blocks/logo/logo.css b/blocks/logo/logo.css new file mode 100644 index 0000000..c251815 --- /dev/null +++ b/blocks/logo/logo.css @@ -0,0 +1,4 @@ +.logo { + width: 183px; + height: 32px; +} diff --git a/blocks/oakley/oakley.css b/blocks/oakley/oakley.css new file mode 100644 index 0000000..73c99cf --- /dev/null +++ b/blocks/oakley/oakley.css @@ -0,0 +1,6 @@ +.oakley { + background-color: #f2f2f2; + display: flex; + padding: 0; + margin; 0; +} diff --git a/blocks/resources/__logo-zone/resources__logo-zone.css b/blocks/resources/__logo-zone/resources__logo-zone.css new file mode 100644 index 0000000..4bf4465 --- /dev/null +++ b/blocks/resources/__logo-zone/resources__logo-zone.css @@ -0,0 +1,6 @@ +.resources__logo-zone { + display: flex; + width: 1100px; + margin: 80px auto 217px; + justify-content: space-between; +} diff --git a/blocks/resources/__logo/resources__logo.css b/blocks/resources/__logo/resources__logo.css new file mode 100644 index 0000000..be84b75 --- /dev/null +++ b/blocks/resources/__logo/resources__logo.css @@ -0,0 +1,9 @@ +.resources__logo { + width: 270px; + height: 38px; + transition: opacity, 0.5s; +} + +.resources__logo:hover { + opacity: 0.6; +} diff --git a/blocks/resources/resources.css b/blocks/resources/resources.css new file mode 100644 index 0000000..8902bae --- /dev/null +++ b/blocks/resources/resources.css @@ -0,0 +1,3 @@ +.resources { + +} diff --git a/blocks/root/root.css b/blocks/root/root.css new file mode 100644 index 0000000..c5645dc --- /dev/null +++ b/blocks/root/root.css @@ -0,0 +1,10 @@ +.page { + min-width: 1100px; + /* мы ещё не умеем делать мобильную версию сайта, */ + /* поэтому выше установлена минимальная ширина страницы */ + max-width: 1600px; + /* выше установили ограничение по максимальной ширине */ + margin: 0 auto; + /* выше для экранов больше 1600px отцентрировали весь контент */ + font-family: 'Helvetica Neue', Arial, sans-serif; +} diff --git a/blocks/rotation/rotation.css b/blocks/rotation/rotation.css new file mode 100644 index 0000000..9ddf4ab --- /dev/null +++ b/blocks/rotation/rotation.css @@ -0,0 +1,12 @@ +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.rotation { +animation: rotation 20s linear infinite; +} diff --git a/blocks/section-subtitle/_theme/section-subtitle_theme_dark.css b/blocks/section-subtitle/_theme/section-subtitle_theme_dark.css new file mode 100644 index 0000000..3f9c099 --- /dev/null +++ b/blocks/section-subtitle/_theme/section-subtitle_theme_dark.css @@ -0,0 +1,9 @@ +.section-subtitle_theme_dark { + text-align: center; + width: 60%; + color: white; + line-height: 34px; + font-size: 24px; + font-weight: normal; + margin: 20px 0 0 0; +} diff --git a/blocks/section-subtitle/section-subtitle.css b/blocks/section-subtitle/section-subtitle.css new file mode 100644 index 0000000..7ea8121 --- /dev/null +++ b/blocks/section-subtitle/section-subtitle.css @@ -0,0 +1,8 @@ +.section-subtitle { + text-align: center; + width: 60%; + line-height: 34px; + font-size: 24px; + font-weight: normal; + margin: auto; +} diff --git a/blocks/section-title/_theme/section-title_theme_dark.css b/blocks/section-title/_theme/section-title_theme_dark.css new file mode 100644 index 0000000..5fb1cdd --- /dev/null +++ b/blocks/section-title/_theme/section-title_theme_dark.css @@ -0,0 +1,11 @@ +.section-title_theme_dark { + text-align: center; + width: 60%; + line-height: 1.15; + color: white; + font-size: 60px; + font-weight: bold; + margin: 90px 0 0 0; + z-index: 1; + /*border: 1px solid red;*/ +} diff --git a/blocks/section-title/section-title.css b/blocks/section-title/section-title.css new file mode 100644 index 0000000..d518120 --- /dev/null +++ b/blocks/section-title/section-title.css @@ -0,0 +1,10 @@ +.section-title { + text-align: center; + width: 60%; + line-height: 1.15; + font-size: 60px; + font-weight: bold; + margin: auto; + margin-top: 100px; + margin-bottom: 20px; +} diff --git a/blocks/table/__cell/_theme/table__cell_theme_dark.css b/blocks/table/__cell/_theme/table__cell_theme_dark.css new file mode 100644 index 0000000..bdce854 --- /dev/null +++ b/blocks/table/__cell/_theme/table__cell_theme_dark.css @@ -0,0 +1,4 @@ +.table__cell_theme_dark { + width: 200px; + margin-top: 80px; +} diff --git a/blocks/table/__cell/table__cell.css b/blocks/table/__cell/table__cell.css new file mode 100644 index 0000000..4b3e578 --- /dev/null +++ b/blocks/table/__cell/table__cell.css @@ -0,0 +1,4 @@ +.table__cell { + width: 250px; + margin-top: 60px; +} diff --git a/blocks/table/__heading/_theme/table__heading_theme_dark.css b/blocks/table/__heading/_theme/table__heading_theme_dark.css new file mode 100644 index 0000000..ca03362 --- /dev/null +++ b/blocks/table/__heading/_theme/table__heading_theme_dark.css @@ -0,0 +1,7 @@ +.table__heading_theme_dark { + line-height: 1.15; + font-size: 24px; + font-weight: bold; + color: white; + margin: 0 0 0 0; +} diff --git a/blocks/table/__heading/table__heading.css b/blocks/table/__heading/table__heading.css new file mode 100644 index 0000000..a333727 --- /dev/null +++ b/blocks/table/__heading/table__heading.css @@ -0,0 +1,6 @@ +.table__heading { + line-height: 1.15; + font-size: 24px; + font-weight: bold; + margin: 0 0 0 0; +} \ No newline at end of file diff --git a/blocks/table/__text/_theme/table__text_theme_dark.css b/blocks/table/__text/_theme/table__text_theme_dark.css new file mode 100644 index 0000000..28a2279 --- /dev/null +++ b/blocks/table/__text/_theme/table__text_theme_dark.css @@ -0,0 +1,7 @@ +.table__text_theme_dark { + line-height: 1.2; + font-size: 18px; + font-weight: normal; + color: white; + margin: 20px 0 0 0; +} \ No newline at end of file diff --git a/blocks/table/__text/table__text.css b/blocks/table/__text/table__text.css new file mode 100644 index 0000000..66fc5a5 --- /dev/null +++ b/blocks/table/__text/table__text.css @@ -0,0 +1,10 @@ +.table__text { + line-height: 1.2; + font-size: 18px; + font-weight: normal; + margin: 20px 0 0 0; +} + +.table__text:last-child { + margin: 20px 0 0 0; +} diff --git a/blocks/table/_theme/table_theme_dark.css b/blocks/table/_theme/table_theme_dark.css new file mode 100644 index 0000000..ecc32d9 --- /dev/null +++ b/blocks/table/_theme/table_theme_dark.css @@ -0,0 +1,8 @@ +.table_theme_dark { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 1100px; + z-index: 1; + margin-bottom: 90px; +} diff --git a/blocks/table/table.css b/blocks/table/table.css new file mode 100644 index 0000000..424dc9a --- /dev/null +++ b/blocks/table/table.css @@ -0,0 +1,8 @@ +.table { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 1100px; + margin: auto; + margin-bottom: 100px; +} diff --git a/blocks/techniques/techniques.css b/blocks/techniques/techniques.css new file mode 100644 index 0000000..a104881 --- /dev/null +++ b/blocks/techniques/techniques.css @@ -0,0 +1,4 @@ +.techniques { + width: 80%; + margin: auto; +} diff --git a/blocks/two-columns/__brief/two-columns__brief.css b/blocks/two-columns/__brief/two-columns__brief.css new file mode 100644 index 0000000..ed7e7d8 --- /dev/null +++ b/blocks/two-columns/__brief/two-columns__brief.css @@ -0,0 +1,8 @@ +.two-columns__brief { + line-height: 1.2; + font-size: 18px; + font-weight: normal; + color: #2f80ed; + width: 175px; + margin: 0 0 0 0; +} diff --git a/blocks/two-columns/__main-text/two-columns__main-text.css b/blocks/two-columns/__main-text/two-columns__main-text.css new file mode 100644 index 0000000..bb63ab8 --- /dev/null +++ b/blocks/two-columns/__main-text/two-columns__main-text.css @@ -0,0 +1,5 @@ +.two-columns__main-text { + width: 80%; + min-width: 784px; + /*margin: 0 0 0 0;*/ +} diff --git a/blocks/two-columns/__paragraph/two-columns__paragraph.css b/blocks/two-columns/__paragraph/two-columns__paragraph.css new file mode 100644 index 0000000..92f90ad --- /dev/null +++ b/blocks/two-columns/__paragraph/two-columns__paragraph.css @@ -0,0 +1,10 @@ +.two-columns__paragraph { + line-height: 34px; + font-size: 24px; + font-weight: normal; + margin: 30px 0 0 0; +} + +.two-columns__paragraph:first-child { + margin: 0 0 0 0; +} \ No newline at end of file diff --git a/blocks/two-columns/__span-accent/two-columns__span-accent.css b/blocks/two-columns/__span-accent/two-columns__span-accent.css new file mode 100644 index 0000000..edc5683 --- /dev/null +++ b/blocks/two-columns/__span-accent/two-columns__span-accent.css @@ -0,0 +1,5 @@ +.two-columns__span-accent { + line-height: 34px; + font-size: 24px; + font-weight: bold; +} \ No newline at end of file diff --git a/blocks/two-columns/two-columns.css b/blocks/two-columns/two-columns.css new file mode 100644 index 0000000..1a87296 --- /dev/null +++ b/blocks/two-columns/two-columns.css @@ -0,0 +1,7 @@ +.two-columns { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 100px auto 0; + width: 80%; +} diff --git a/blocks/video/__iframe/video__iframe.css b/blocks/video/__iframe/video__iframe.css new file mode 100644 index 0000000..744aa5b --- /dev/null +++ b/blocks/video/__iframe/video__iframe.css @@ -0,0 +1,3 @@ +.video__iframe { + border: 0; +} diff --git a/blocks/video/__iframes/video__iframes.css b/blocks/video/__iframes/video__iframes.css new file mode 100644 index 0000000..dfcaa97 --- /dev/null +++ b/blocks/video/__iframes/video__iframes.css @@ -0,0 +1,7 @@ +.video__iframes { + display: flex; + width: 1050px; + margin: auto; + padding-top: 50px; + justify-content: space-between; +} diff --git a/blocks/video/video.css b/blocks/video/video.css new file mode 100644 index 0000000..b53cff1 --- /dev/null +++ b/blocks/video/video.css @@ -0,0 +1,3 @@ +.video { + margin-bottom: -50px; +} diff --git a/images/cards-attention.png b/images/cards-attention.png new file mode 100644 index 0000000..eb3877c Binary files /dev/null and b/images/cards-attention.png differ diff --git a/images/cards-competence.png b/images/cards-competence.png new file mode 100644 index 0000000..3b0f288 Binary files /dev/null and b/images/cards-competence.png differ diff --git a/images/cards-interliving.png b/images/cards-interliving.png new file mode 100644 index 0000000..fbbafa6 Binary files /dev/null and b/images/cards-interliving.png differ diff --git a/images/cards-question.png b/images/cards-question.png new file mode 100644 index 0000000..a57c83c Binary files /dev/null and b/images/cards-question.png differ diff --git a/images/cards-recall.png b/images/cards-recall.png new file mode 100644 index 0000000..a64595c Binary files /dev/null and b/images/cards-recall.png differ diff --git a/images/khan-book.jpg b/images/khan-book.jpg new file mode 100644 index 0000000..c3ea8f5 Binary files /dev/null and b/images/khan-book.jpg differ diff --git a/images/resources-arzamas.svg b/images/resources-arzamas.svg new file mode 100644 index 0000000..5cd5c0d --- /dev/null +++ b/images/resources-arzamas.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/resources-n1.svg b/images/resources-n1.svg new file mode 100644 index 0000000..c4536f9 --- /dev/null +++ b/images/resources-n1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/resources-polka.svg b/images/resources-polka.svg new file mode 100644 index 0000000..be7e897 --- /dev/null +++ b/images/resources-polka.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/resources-strelka.svg b/images/resources-strelka.svg new file mode 100644 index 0000000..6d17096 --- /dev/null +++ b/images/resources-strelka.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/index.html b/index.html index fd83d6c..f61291b 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,7 @@ - - + Научиться учиться @@ -16,7 +15,7 @@

Научиться учиться

Какие современные и эффективные подходы к обучению вы можете использовать в своей жизни? Узнать →

-
+
Картина Опять двойка @@ -33,72 +32,121 @@

Главные проблемы в обучени +
+

Техники обучения

+

Пять практик от Барбары Оакли

+
+
+ Руки, держащие книгу +

Два вида внимания

+

Глубокие знания возникают, если чередовать сфокусированное и рассеянное мышление.

+
+
+ Скульптура мальчик с трубочкой +

Recall

+

Вспоминайте изученное — это позволит соединить разрозненные порции памяти.

+
+
+ Торговый центр Окулус +

Интерливинг

+

Изучайте несколько навыков одновременно, они обогащают друг друга.

+
+
+ Мужская фигура в зале +

Вопросы

+

Слушая преподавателя, придумывайте хороший вопрос, который вас действительно волнует.

+
+
+ Стопка книг на ладоне +

Иллюзия компетентности

+

Повторите про себя, запишите, расскажите другу: вам только кажется, что вы владеете новой темой.

+
+
+
+ +
+

Видео нa TED

+

Для тех, кто любит прокрастинировать

+
+ + +
+
+ +
+
+

История Барбары Оакли.

+
+

С детства Барбаре не давалась математика. Она считала себя законченным гуманитарием, причём далеко не самым умным. В армии она изучала русский язык, чтобы получить надбавку, да так успешно, что её выдвинули в командиры. Но для продвижения по службе нужно было сдавать математику. И тогда Барбара придумала свой подход к точным наукам. Оказалось, если вам что-то «плохо даётся», ваши добытые трудом знания гораздо глубже, чем у тех, кому всё ясно с первого взгляда.

+
+
+
+ +
+

Метод Фейнмана

+

Выучить и не забыть.

+ Подробнее → +
+

Цифры и факты

-

Про учёбу и мозг

-
-

86 миллиардов

Число нейронов в мозге человека

-

2.1 миллиарда

Число нуждающихся в повышении квалификации

Всемирный Банк, 2017

-

1000 терабайт

Объём памяти человека

-

500 триллионов

Число ответственных за обучение нервных синапсов у взрослого человека

-

20 миллионов

Число взрослых людей моложе 25 лет, не имеющих образования для трудоустройства

Всемирный Банк, 2017

-

17–20 лет

Пик обучаемости

-

1885 год

Открытие кривой забывания

-

1889 год

Открытие условного рефлекса

-
-
-

Метод Фейнмана

-

Выучить и не забыть.

- Подробнее → +
+
+

Салман Хан

+

Весь мир — школа

+

Страсть и новаторство Сала Хана меняют процесс обучения миллионов студентов по всему миру. Книгу «Весь мир — школа» нужно прочитать всем, кто занимается образованием — так учащиеся повсюду смогут получить навыки и знания, которые приносят успех в школе, карьере и жизни.

+

Джордж Лукас

+

Кинорежиссер, продюсер

+
+ Обложка книги Садмана Хана + Купить книгу → +
+
- -
- +

Принципы обучения

-

от Джоша Кауфмана

-
@@ -151,8 +199,18 @@

10

Уделяйте внимание количеству и скорости.

+
-
+
+

Полезные ресурсы

+

Больше материалов о техниках и лайфхаках обучения

+ +
+ + + + +
@@ -163,7 +221,7 @@

10

-

© 2021. Руслан Газиев

+

© 2022. Руслан Газиев