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

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>
  </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">
      <img src="" alt="" />
      Кабинет ученика</h2>
    <h2 class="page__navigation_text3">
      <img src="" alt="" />
      Учебный класс</h2>
    <h2 class="page__navigation_text3">
      <img src="" alt="" />
      Методичка</h2>
    <h2 class="page__navigation_text3">
      <img src="" alt="" />
      Домашняя работа</h2>
    <h2 class="page__navigation_text3">
      <img src="" alt="" />
      Экзамены</h2>
    <h2 class="page__navigation_text4">
      <img src="" alt="" />
      Настройки</h2>

  </section>
  <section class="page__search page__block">
    <input class="posik_str" type="text" name="" value="Поиск…">
 <img width="28px" style="padding-top:20px;margin-left:5px;" src="" alt="" />
     Неопознанный Енот 
  </section>
  <main class="page__content content page__block">

    <div class="content__banner page__block">
      <h2 class="first_zag">«Бифтер», «Кокни», «Даблдекер»…</h2>
      <br>
      <br>
      <h2 class="gotest">Пройдите тест и узнайте насколько хорошо вы знакомы с жизнью в Лондоне</h2>
      <br>
      <br>
      <button class="but" 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="button1">Записаться→</h2>
    </div>
    <div class="content__event event_two page__block">
      <h2 class="zag_ivent">Лето в Лондоне</h2>
      <h2...

CSS

.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('') no-repeat;
  background-size: 1050px;
  color: white;
}

.content__contacts {
  grid-area: contacts;
}

 h2[class="profile"] {margin-left:-30px;}
    
.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('');
  background-size: 680px;
}

.page__navigation_text1{
  display: flex;
  justify-content: center;
  padding-top: 21px;
  font-size: 36px;
  font-weight: 700;
}

.page__navigation_text2{
  display: flex;
  justify-content: center;
  font-size: 17px;
  font-weight: 300;
}
.page__navigation_text3{
  display: flex;
  justify-content: center;
  padding-top: 48px;
  font-size: 16px;
  font-weight: 900;
}

.page__navigation_text4{
  padding-top: 400px;
  padding-left: 86.59px;
  font-size: 14px;
  font-weight: 400;
}

.posik_str{
  padding-left: 30px;
  width: 731px;
  height: 76px;
}

.first_zag{
  font-size: 24px;
  font-weight: 700px;
 ...