Лэндинг

by helpD54

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Madrid</title>
    <link rel="stylesheet" href="styleL.css">
</head>
<body>
<div class="block">
    <div class="text">
        <h1>Новые туры в Мадрид</h1>
        <p>Отправляйтесь в незабываемое путешествие по сердцу Испании прямо сейчас!</p>
        <p class="button">Заказать тур</p>
    </div>
</div>
<div class="madrid_capital">
  <img class="pic" src=".idea/image1.png" alt="fontan">
  <h2>
    <span class="yellow_text">Мадрид — <br> столица и <br> культурный <br> центр Испании.</span> <br>Он напоминает курортный город: <br> узкие улочки, пальмы и разморенные <br> жарой люди. Разве что моря <br> поблизости нет. Еще Мадрид создает <br> впечатление сильно разросшейся <br> испанской деревушки. Стоит свернуть <br> с центральных улиц, как попадаешь в <br> атмосферные дворы с односторонним <br> движением. Дороги там настолько <br> узкие, что даже одному автомобилю <br> приходится складывать зеркала.
  </h2>
</div>
<div class="otzivy">
  <h2 class="otz_zag">Отзывы клиентов</h2>
 <div class="otz_flex">
  <div class="otz_left">
    <br>
    <br>
    <br>
    <h2 class="otz_1">Мадрид. Ездила в мае 2014 года. Ехала из <br> Барселоны на поезде AVE скоростном -2 <br> часа. Скорость у поезда была 450 км/час, <br> при заезде в тоннель закладывало уши, <br> было больновато. Скорость вообще не <br> ощущалась. <br> <br><span class="name">Александр</span></h2>
    <h2 class="otz_1">Была в Мадриде всего 5 дней, и считаю <br> этот город одним из лучших в Европе с <br> точки зрения... да со всех точек зрения. <br> <br><span class="name">Эмилия</span></h2>
  </div>
  <div class="otz_right">
    <h2 class="otz_2">Отличное бюджетное место для отдыха в <br> холодное время года. Моря там нет, да, <br> оно и не нужно, летом в Мадриде ужасная <br> жара, поэтому осень, зима и весна, то <br> время, когда надо ехать в этот прекрасный <br> город. <br> <br><span...

CSS

.block {
    display: block;
    background:yellow; width: 110%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    border: 0px black solid;
}

.pic{
    width: 1250px;
    height: 800px;
}

.text{
    position: relative;
    display: block;
    border: 0px black solid;
    text-align: center;
    width: 880px;
    top:500px;
    margin: 0 auto;
    color: #fff3b0;
    font-family: Arial;
}

.button {
    text-transform:uppercase;
    display: block;
    background:#9e2a2b;
    padding: 10px;
    border-radius: 40px;
    width: 250px;
    margin: 0 auto;
}

.madrid_capital{
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #9e2a2b;
  color: white;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.yellow_text{
  font-weight: bold;
  color: yellow;
  font-size: 26px;
}

.otzivy{
  background-color: #335c67;
  padding-top: 80px;
  padding-bottom: 80px;
}

.otz_flex{
  display: flex;
  justify-content: center;
  gap: 12rem;
  color: white;
}

.otz_zag{
  text-align: center;
  font-weight: bold;
  font-size: 26px;
  color: yellow;
}

.otz_1{
  padding-left: 400px;
  color: white;
}

.name{
  color: yellow;
}

.otz_left{
  margin-left: -350px;
}

.other_city{
  padding-top: 120px;
  padding-bottom: 220px;
  background-color: #fff3b0;
  text-align: center;
}

.other_city_1{
  font-size: 48px;
}

.polevvoda{
  width: 600px;
  height: 50px;
  padding-left: 30px;
  color: grey;
  border: none;
}

.knopka{
  background-color: red;
  width: 200px;
  height: 50px;
  border: none;
  color: white;
  border-radius: 60px;
  margin-left: 15px;
}

.vopr{
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #335c67;
}

.otvety{
  text-align: center;
  font-size: 48px;
}

.otv_1{
  font-size: 18px;
  padding-left: 600px;
  padding-top: 50px;
  color: yellow;
}

.question{
  font-weight: bold;
  color: white;
}

.madrid_waiting{
  background-color: pink;
  text-align: center;
  color: white;
  padding-top: 80px;
  padding-bottom:...