Макет английской школы

by helpD54

HTML

<!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">
  <title>Let's speak</title>
  <link rel="stylesheet" href="style%20(5).css">
</head>
<body class="page">
  <section class="page__navigation page__block">
    <h2 class="page__navigation_text1">Let’s Speak</h2>
    <h2 class="page__navigation_text2">ЯЗЫКОВАЯ ШКОЛА</h2>
    <h2 class="page__navigation_text3">Кабинет ученика</h2>
    <h2 class="page__navigation_text3">Учебный класс</h2>
    <h2 class="page__navigation_text3">Методичка</h2>
    <h2 class="page__navigation_text3">Домашняя работа</h2>
    <h2 class="page__navigation_text3">Экзамены</h2>
    <h2 class="page__navigation_text4">Настройки</h2>

  </section>
  <section class="page__search page__block">
    <input class="posik_str" type="text" name="" value="🔍Поиск…">

  </section>
  <main class="page__content content page__block">

    <div class="content__banner page__block">
      <h2 class="first_zag">«Бифтер», «Кокни», «Даблдекер»…</h2>
      <br>
      <br>
      <h2 class="podpis">Пройдите тест и узнайте насколько хорошо вы знакомы с жизнью в Лондоне</h2>
      <br>
      <br>
      <button class="knopka" type="button" name="button">Пройти тест</button>
    </div>
    <div class="content__event event_one page__block">
      <h1 class="zag_ivent">Английский завтрак</h1>
      <h2 class="podzag_ivent">Разговорный клуб</h2>
      <h2 class="time_ivent">10:30 — 11:00 (Пн-Пт)</h2>
      <h2 class="knopka_zapis">Записаться→</h2>
    </div>
    <div class="content__event event_two page__block">
      <h2 class="zag_ivent">Лето в Лондоне</h2>
      <h2 class="podzag_ivent">Месяц экскурсий и практики</h2>
      <h2 class="time_ivent">19 июня — 3 июля</h2>
      <h2 class="knopka_zapis">Отправиться→</h2>
    </div>
    <div class="content__event event_three page__block">
      <h2 class="zag_ivent">Надоел...

CSS

html,body{
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,button,textarea{font-family: inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding: 0;border: 0;}
a, a:visited{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size: inherit;font-weight: 400;}

* {
  box-sizing: border-box;
}

.page {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 75px 1fr 50px;
}

.page__block {
  border: 1px solid rgba(136, 136, 160, 0.35);
  background-color: #fff;
}

.page__navigation {
  grid-column: 1;
  grid-row: span 2;
}

.page__search {
  grid-column: 2;
  grid-row: 1;
}

.page__content {
  grid-column: 2;
  grid-row: 2;
  background-color: #F3F3FD;
}

.page__footer {
  grid-column: span 2;
  grid-row: 3;
  background-color: #3F4161;
}

.content {
  display: grid;
  padding: 30px;
  grid-gap: 20px;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2.5fr 1fr 2.5fr;
  grid-template-areas:"banner     banner     banner          contacts"
                      "event-one  event-two  event-three      contacts"
                      "video      video      current-course  contacts";
}

.content__banner {
  grid-area: banner;
  background: url('.idea/unknown1.jpg') no-repeat;
  background-size: 1050px;
  color: white;
}

.content__contacts {
  grid-area: contacts;
}

.event_one {
  grid-area: event-one;
}

.event_two {
  grid-area: event-two;
}

.event_three {
  grid-area: event-three;
}

.content__video {
  grid-area: video;
}

.content__current-course {
  grid-area: current-course;
}

.content__video{
  background: url('.idea/unknown2.jpg');
  background-size: 680px;
}

.page__navigation_text1{
  padding-top: 21px;
  padding-left: 58px;
  font-size: 36px;
 ...