01

by SmychenkoOleg

HTML

<section class="inschool">
          <div class="container">

            <h4 class="inschool__title title">
              В ШКОЛЕ ВЫ ПОЛУЧИТЕ
            </h4>

            <div class="inschool__column">

              <div class="column__item">
                <h5 class="column__title">
                  ПРОЖИВАНИЕ
                </h5>
                <p class="column__text">
                  Наша школа серфинга находится в 100 м от океанского побережья. К услугам гостей открытый бассейн и бесплатный Wi-Fi. Из верхней террасы открывается вид на океан. Расстояние до центра города 15 мин.
                </p>
              </div>

              <div class="column__item">

                <h5 class="column__title">
                  ПЕРЕЛЕТ И СТРАХОВКУ
                </h5>

                <p class="column__text">
                  Все участники программы застрахованы страховой компанией Allianz. Перелет из Тенерифе до острова Лансароте и обратно входит в стоимость программы
                </p>

              </div>

              <div class="column__item">
                <h5 class="column__title">
                  ОБУЧЕНИЕ И ЭКИПИРОВКУ
                </h5>

                <p class="column__text">
                  Все оборудование и экипировка известных производителей и предоставляется на весь курс программы. Тренировочный процесс начинается с определения вашего уровня катания
                </p>
              </div>

            </div>
          </div>
        </section>

CSS

.container {
  max-width: 1220px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.title {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #01353E;
}

.inschool {
  background-color: #f8f8f8;
}

.inschool__title {
  margin-bottom: 20px;
  text-align: center;
  background-color: #E69EFF;
}

.inschool__column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #E69EF1;
  border: 2px solid red;
}

.column__item {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #4CBA00;
  border: 2px solid #00FFFA;
  padding: 0 5px;
  flex: 0 0 350px;
}

.column__title {
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  border: 2px solid #000;
  background-color: #FFEE00;
  margin-bottom: 5px;
}

.column__text {
  font-size: 14px;
  line-height: 18px;
  letter-spacing;
  0.6px;
  text-align: left;
  padding: 0 5px;
  background-color: #E6EEF1;
  border: 2px solid #000;
  flex: 1 0 auto;


}