FLEX

by helpD54

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>FLEX</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flek">
<div class="verh">
  <h1><strong>Как проверить автомобиль <br> на Б/У рынке?</strong></h1>
</div>
</div>
<br>
<div class="flek">
<div class="card1">
  <h2 class="avtoteka"><strong>Автотека</strong></h2>
  <p class="text1">Сервис "Автотека".Сервис предлагает купить отчет по всем имеющимся сведениям об истории автомобиля.Отчет стоит 129Р.Программа собирает данные из гос. баз и с коммерческих организаций:СТО,страховых компаний,банков и "Авито".Чтобы проверить машину, потребуется только вин-код</p>
</div>
<div class="card2">
  <h2 class="tol"><strong>Толщинометр</strong></h2>
  <p class="text2">Eго можно арендовать,но предварительно изучите,как им пользоваться.Толщиномер показывает толщину лакокрасочного слоя - ЛКП. Слишком большой слой краски - косвенный признак аварии. Посмотрите заранее, какая толщина ЛКП должна быть у выбранной модели, чтобы понимать, где заводская окраска, а где нет.</p>
</div>
<div class="card3">
  <h2 class="docs"><strong>Документы</strong></h2>
  <p class="text3">Во время осмотра в первую очередь проверяем документы: паспорт транспортного средства(ПТС),свидетельство о регистрации транспортного средства (СТС) и паспорт продавца.Проверьте, чтобы ФИО владельца в ПТС и СТС совпадали с данными продавца в паспорте.В крайнем случае машину жены может продавать.</p>
</div>
</div>
<div class="flek">
<div class="niz">
  <h2><strong>Если остались вопросы, то напишите нам на почту</strong></h2>
  <input class="vvod" type="text" name="e-mail" value=" E-mail">
</div>
</div>
</body>
</html>

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;}

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

body{
  background-color: #9a7aa0;
}

.flek{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

}

.verh{
  width: 1400px;
  height: 160px;
  background-color: #3a9c6c;
  color: white;
  font-weight: bolder;
  font-size: 30px;
  text-align: center;
  padding-top: 45px;
  border: 1px solid;
  border-radius: 10px;
  margin-left: 200px;
  margin-top: 30px;
}

.card1{
  width: 400px;
  height: 350px;
  border: 1px solid black;
  margin-left: 200px;
  border-radius: 10px;
  background-color: #87677b;
}

.card2{
  width: 400px;
  height: 350px;
  border: 1px solid black;
  margin-left: 95px;
  border-radius: 10px;
  background-color: #8d94ba;
}

.card3{
  width: 400px;
  height: 350px;
  border: 1px solid black;
  margin-left: 100px;
  border-radius: 10px;
  background-color: #a0cfd3;
}

.niz{
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 200px;
  width: 1400px;
  height: 160px;
  color: white;
  font-weight: bolder;
  font-size: 30px;
  text-align: center;
  padding-top: 15px;
  background-color: #3a9c6c;
}

.vvod{
  width: 650px;
  height: 40px;
  margin-top: 30px;
  color: gray;
}

.avtoteka{
  text-align: center;
  color: white;
  font-size: 30px;
  margin-top: 15px;
}

.text1{
  text-align: left;
  color: white;
  font-size: 15px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
}

.tol{
  text-align: center;
  color: white;
  font-size: 30px;
  margin-top: 15px;
}

.text2{
  text-align: left;
  color: white;
  font-size: 15px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
}

.docs{
  text-align: center;
  color: white;
  font-size: 30px;
  margin-top: 15px;
}

.text3{
 ...