Code Pasta

Untitled

4 years ago in CSS

                            <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Научиться учиться</title>
  <style>
  /*div {
  border: 2px solid red;
}
*/
.page {
  min-width: 1100px;
  /* мы ещё не умеем делать мобильную версию сайта, */
  /* поэтому выше установлена минимальная ширина страницы */
  max-width: 1600px;
  /* выше установили ограничение по максимальной ширине */
  margin: 0 auto;
  /* выше для экранов больше 1600px отцентрировали весь контент */
  font-family: 'Inter', 'Arial', sans-serif;
}
.header {
  height: 100vh;
  min-height: 600px;
  max-height: 756px;
  /* выше установили ограничения для секции */
  background-color:#F2F2F2;
  padding-left: 64px;
  display: flex;
  flex-direction: row;
  position: relative;
}
/* ниже мы привели пример двух селекторов, чтобы вы вспомнили запись элемента */
.header__square-pic {
  height: 568px;
  width: 568px;
}
/* и элемента с модификатором вида ключ-значение */
.table__cell_theme_dark {
  width: 200px;
  color: white;
  margin-right: 0;
  margin-top: 80px;
}
/* стили для красивого лого */
.logo {
  
  background-repeat: no-repeat;
  width: 183px;
  z-index: 1;
}
.logo_place_header{
  background-image: url(../images/logo_place_header.svg);
  margin-top: 30px;
  height: 32px;
  position: absolute;
}
.header__title {
  position: absolute;
  width: 730px;
  z-index: 1;
  margin: 0 auto;
  align-self: center;
  line-height: 96px;
  font-size: 102px;
  font-weight: bold;
}
.header__subtitle{
  position: absolute;
  z-index: 1;
  width: 388px;
  margin: 0;
  bottom: 30px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
}
.header__link {
  color: #2F80ED;
  text-decoration: none;
}
.header__main-illustration {
  position: absolute;
  width: 765px;
  height: 608px;
  bottom: 0;
  right: 0;
}
.description {
  margin-top: 100px;
  align-content: center;
}
.two-columns {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 80%;
}
.two-columns__brief {
  width: 175px;
  align-self: stretch;
  height: 100%;
  color: #2F80ED;
  line-height: 1.2em;
  font-size: 18px;
  font-weight: normal;
}
.two-columns__main-text {
  width: 80%;
  min-width: 784px;
}
.two-columns__paragraph {
  margin-bottom: 30px;
  line-height: 34px;
  font-size: 24px;
  font-weight: normal;
}
.two-columns__paragraph_buttom {
  margin-bottom: 0px;
}
.span-accent {
  font-weight: bold;
  line-height: 34px;
  font-size: 24px;
}
.techniques {
  position: relative;
  width: 80%;
  margin: 0 auto;
  margin-top: 100px;
}
.section-title {
  margin: 0 auto;
  text-align: center;
  width: 60%;
  margin-bottom: 20px;
  line-height: 1.15em;
  font-size: 60px;
  font-weight: bold;
}
.section-subtitle {
  text-align: center;
  width: 60%;
  margin: 0 auto;
  line-height: 34px;
  font-size: 24px;
  font-weight: normal;
}
.cards {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 920px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cards__item {
  padding-top: 60px;
  width: 240px;
}
.cards__image {
  width: 160px;
  height: 160px;
  margin: 0 40px 43px 40px;
  border-radius: 100%;
}
.cards__title {
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.15em;
  font-size: 24px;
  font-weight: bold;
}
.cards__description {
  text-align: center;
  line-height: 23px;
  font-size: 18px;
  font-weight: normal;
}
.digits{
margin-top: 100px;
margin-bottom: 100px;
}
.table {
  display: flex;
  flex-direction: row;
  width: 1100px;
  margin: 0 auto;
  align-self: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table__cell {
  width: 250px;
  margin-top: 60px;
}
.table__heading {
  line-height: 1.15em;
  font-size: 24px;
  font-weight: bold;
}
.table__text {
  margin-top: 20px;
  line-height: 1.2em;
  font-size: 18px;
  font-weight: normal;
}
.kaufman {
  background-color: #1f1f1f;
  padding-top: 90px;
  padding-bottom: 90px;
}
.section-title_theme_dark {
  margin: 0 auto;
  text-align: center;
  width: 60%;
  margin-bottom: 20px;
  line-height: 1.15em;
  font-size: 60px;
  font-weight: bold;
  color: white;
}
.section-subtitle_theme_dark {
  text-align: center;
  width: 60%;
  margin: 0 auto;
  line-height: 34px;
  font-size: 24px;
  font-weight: normal;
  color: white;
}
.table_theme_dark {
  display: flex;
  flex-direction: row;
  width: 1100px;
  margin: 0 auto;
  align-self: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table__cell_theme_dark {
  width: 200px;
  margin-top: 80px;
}
.table__heading_theme_dark {
  line-height: 1.15em;
  font-size: 24px;
  font-weight: bold;
}
.table__text_theme_dark {
  margin-top: 20px;
  line-height: 1.2em;
  font-size: 18px;
  font-weight: normal;
}
.resources{
  padding-top: 100px;
  padding-bottom: 217px;
}
.resources__logo-zone {
  margin: 0 auto;
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  align-self: center;
  width: 1100px;
  justify-content: space-between;
}
.resources__logo {
  width: 270px;
  height: 38px;
}
.resources__logo_firm_arzamas {
  background-image: url(../images/arzamas.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.resources__logo_firm_n1 {
  background-image: url(../images/n1.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.resources__logo_firm_strelka {
  background-image: url(../images/strelka.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.resources__logo_firm_polka {
  background-image: url(../images/polka.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.footer{
  padding-top: 60px;
  padding-bottom: 40px;
  background-color: #1f1f1f;
}
.footer__columns{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: white;
}
.footer__column_content_copyright{
  display: flexbox;
  position: relative;
  flex-basis: 711px;
  height: 200px;
}
.logo_place_footer{
  background-image: url(../images/logo_place_footer.svg);
  height: 35px;
}
.footer__author{
  position: absolute;
  bottom: 18px;
}
.footer__column-heading{
  margin-bottom: 20px;
  line-height: 18px;
  font-size: 18px;
  font-weight: bold;
}
.footer__column-links_info{
  text-decoration: none;
  color: gray;
  margin-bottom: 4px;
}
.footer__column-links{
  list-style: none;
  margin-bottom: 6px;
  line-height: 18px;
  font-size: 18px;
  font-weight: normal;
}
.footer__column-links_icons{
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.footer__socail{
  margin-bottom: 10px;
}
  </style>
</head>
<body>
  <div class="page">
    <header class="header">
        <div class="logo logo_place_header"></div>
        <div class="header__title">Научиться </br> учиться</div>
        <div class="header__subtitle">Какие современные и эффективные</br>подходы к обучению вы можете</br>использовать в своей жизни?<a class="header__link" href=""> Узнать →</a></div>
        <img class="header__main-illustration" src="./images/header-image.png" alt="Здесь должна быть картинка)">
    </header>
    <main class="content">
      <section class="description">
        <div class="two-columns">
          <div class="two-columns__brief"><h>Главные проблемы в обучении</h></div>
          <div class="two-columns__main-text">
            <div class="two-columns__paragraph">Ни в школе, ни в институте нас не учат тому, как правильно изучать материал. Мы готовимся к экзаменам и учим билеты. Мы тренируемся решать однообразные задачи, чтобы лучше сдать тест, но часто в итоге это не дает нам реального знания. Зубрежка быстро выветривается и не приносит пользы.</div>
            <div class="two-columns__paragraph"><span class="span-accent">Вывод:</span> учиться тоже нужно уметь, но почему-то этому мало где учат. Что с этим делать?</div>
            <div class="two-columns__paragraph two-columns__paragraph_buttom">Конкретные техники и упражнения помогают изменить подход к обучению, сделать его эффективным и захватывающим. Эти же техники применяются на примере обучения в Практикуме.</div>
          </div>
        </div>
      </section>
      <section class="techniques">
        <div class="section-title">Техники обучения</div>
        <div class="section-subtitle">Пять практик от Барбары Оакли</div>
        <div class="cards">
          <div class="cards__item">
            <img class="cards__image" src="./images/attention.png" alt="Здесь должна быть картинка">
            <div class="cards__title">Два вида внимания</div>
            <div class="cards__description">Глубокие знания возникают, если чередовать сфокусированное и рассеянное мышление.</div>
          </div>
          <div class="cards__item">
            <img class="cards__image" src="./images/recall.png" alt="Здесь должна быть картинка">
            <div class="cards__title">Recall</div>
            <div class="cards__description">Вспоминайте изученное — это позволит соединить разрозненные порции памяти.</div>
          </div>
          <div class="cards__item">
            <img class="cards__image" src="./images/interliving.png" alt="Здесь должна быть картинка">
            <div class="cards__title">Интерливинг</div>
            <div class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</div>
          </div>
          <div class="cards__item">
            <img class="cards__image" src="./images/question.png" alt="Здесь должна быть картинка">
            <div class="cards__title">Вопросы</div>
            <div class="cards__description">Слушая преподавателя, придумывайте хороший вопрос, который вас действительно волнует.</div>
          </div>
          <div class="cards__item">
            <img class="cards__image" src="./images/competence.png" alt="Здесь должна быть картинка">
            <div class="cards__title">Иллюзия компетентности</div>
            <div class="cards__description">Повторите про себя, запишите, расскажите другу: вам только кажется, что вы владеете новой темой.</div>
          </div>
          <div class="cards__item">
            <div class="cards__image"></div>
            <div class="cards__title"></div>
            <div class="cards__description"></div>
          </div>
        </div>
    </section>
      <section class="digits"> 
        <div class="section-title">Цифры и факты</div>
        <div class="section-subtitle">Про учёбу и мозг</div>
        <div class="table">
          <div class="table__cell">
            <div class="table__heading">86 миллиардов</div>
            <div class="table__text">Число нейронов в мозге человека</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">2,1 миллиарда</div>
            <div class="table__text">Число нуждающихся в повышении квалификации</div>
            <div class="table__text">Всемирный Банк, 2017</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">1000 терабайт</div>
            <div class="table__text">Объём памяти человека</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">500 триллионов</div>
            <div class="table__text">Число ответственных за обучение нервных синапсов у взрослого человека</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">420 миллионов</div>
            <div class="table__text">Число взрослых людей моложе 25 лет, не имеющих образования для трудоустройства</div>
            <div class="table__text">Всемирный Банк, 2017</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">17–20 лет</div>
            <div class="table__text">Пик обучаемости</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">1885 год</div>
            <div class="table__text">Открытие кривой забывания</div>
          </div>
          <div class="table__cell">
            <div class="table__heading">1889 год</div>
            <div class="table__text">Открытие условного рефлекса</div>
          </div>
        </div>
      </section>
      <section class="feynman">
      </section>
      <section class="kaufman">
        <div class="section-title_theme_dark">Принципы обучения</div>
        <div class="section-subtitle_theme_dark">от Джоша Кауфмана</div>
        <div class="table_theme_dark">
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">1</div>
            <div class="table__text_theme_dark">Выберите привлекательный проект.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">2</div>
            <div class="table__text_theme_dark">Сосредоточьтесь на каком-то одном навыке.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">3</div>
            <div class="table__text_theme_dark">Определите целевой уровень мастерства.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">4</div>
            <div class="table__text_theme_dark">Разбейте навык на элементы.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">5</div>
            <div class="table__text_theme_dark">Приготовьте всё необходимое для занятий.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">6</div>
            <div class="table__text_theme_dark">Устраните препятствия для занятий.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">7</div>
            <div class="table__text_theme_dark">Выделите специальное время для занятий.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">8</div>
            <div class="table__text_theme_dark">Создайте быстрые петли обратной связи.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">9</div>
            <div class="table__text_theme_dark">Занимайтесь по расписанию, короткими интенсивными интервалами.</div>
          </div>
          <div class="table__cell_theme_dark">
            <div class="table__heading_theme_dark">10</div>
            <div class="table__text_theme_dark">Уделяйте внимание количеству и скорости.</div>
          </div>
        </div>
      </section>
      <section class="resources">
        <div class="section-title">Полезные ресурсы</div>
        <div class="section-subtitle">Больше материалов о техниках и лайфхаках обучения</div>
        <div class="resources__logo-zone">
          <div class="resources__logo resources__logo_firm_arzamas"></div>
          <div class="resources__logo resources__logo_firm_n1"></div>
          <div class="resources__logo resources__logo_firm_strelka"></div>
          <div class="resources__logo resources__logo_firm_polka"></div>
        </div>
      </section>
    </main>
    <footer class="footer">
      <div class="footer__columns">
        <div class="footer__column_content_copyright">
          <div class="logo logo_place_footer"></div>
          <div class="footer__author">&copy; Литовченко Руслан</div>
        </div>
        <div class="footer__column_content_info">
          <div class="footer__column-heading">О Практикуме</div>
          <lu class="footer__column-links">
            <li class="footer__socail">
              <a class="footer__column-links_info" href="">Главная</a></br>
            </li>
            <li class="footer__socail">
              <a class="footer__column-links_info" href="">Концепция</a></br>
            </li>
            <li class="footer__socail">
              <a class="footer__column-links_info" href="">Наставники</a>
            </li>
            </lu>
        </div>
        <div class="footer__column_content_social">
          <div class="footer__column-heading">Соцсети</div>
          <lu class="footer__column-links">
            <li class="footer__socail">
              <a class="footer__column-links_info" href=""><img class="footer__column-links_icons" src="./images/facebook_color_white.svg">Facebook</a>
            </li>
            <li class="footer__socail">
              <a class="footer__column-links_info" href=""><img class="footer__column-links_icons" src="./images/vk_color_white.svg">Вконтакте</a>
            </li>
            <li class="footer__socail">
              <a class="footer__column-links_info" href=""><img class="footer__column-links_icons" src="./images/instagram_color_white.svg">Instagram</a>
            </li>
      
          </lu>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>

                        
Recent Public Pastes
Untitled - 1 hour ago Untitled - 1 day ago Untitled - 1 day ago Untitled - 1 day ago Untitled - 1 day ago Italiano - 1 day ago Untitled - 1 day ago Untitled - 1 day ago Untitled - 1 day ago Untitled - 1 day ago