Как из этого кода можно сделать сайт адаптивным??

5 декабря, 16:29 Учеба 4041 0

<!DOCTYPE html>

<html lang="ru">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Єдиний центр послуг</title>

 

 

 <style>

   *{

       padding: 0;

       margin: 0;

   }

   body{

       font-family: Arial, Helvetica, sans-serif;

   }

   .container {

       background: #fff;

       margin: 0;

       width: 100%;

       height: 100%;

       display: inline-block;

      border: 20px solid #ff0000;

   }

 

   

 

    /*Block1*/

   .block1{

       width: 100%;

       height: 700px;

   }

   .image1{

       padding-top: 15px;

       display: block;

       margin-left: auto;

       margin-right: auto;

   }

 

   .image2{

       padding-top: 35px;

       padding-bottom: 20px;

       display: block;

       margin-left: auto;

       margin-right: auto;

   }

   .p{

       display: block;

       text-align: center;

       font-weight: bold;

       font-size: 35px;

   }

 

   /*Block2*/

 

   .block2{

       height: 350px;

       background: #ff0000;

   }

   

   .p1{

       font-weight: bold;

       color: #fff;

       font-size: 42px;

       padding-top: 20px;

       padding-left: 35px;

       padding-bottom: 30px;

   }

   .p2{

       font-weight: bold;

       font-size: 42px;

       padding-top: 80px;

       padding-left: 35px;

       padding-bottom: 30px;

   }

   .p3{

       font-size: 29px;

       padding-top: 20px;

       padding-left: 35px;

       padding-bottom: 30px;

   }

   .ol1{

       color: #fff;

       font-size: 29px;

       padding-left: 70px;

       padding-bottom: 15px;

   }

   .ol2{

       font-size: 29px;

       padding-left: 70px;

       padding-bottom: 15px;

   }

   /*Block3*/

   .block3{

       height: 480px;

   }

 

   .block4{

       height: 380px;

       background: #ff0000;

   }

   .block5{

       height: 560px;

   }

   .pictur{

       margin-top: 35px;

   }

   .block6{

       height: 320px;

       background: #ff0000;

   }

   .block7{

       height: 700px;

   }

    .block8{

       height: 480px;

       background: #ff0000;

   }

   .parag{

       color: #fff;

       font-size: 29px;

       padding-top: 20px;

       padding-left: 35px;

       padding-bottom: 30px;

   }

   .block9{

       height: 280px;

   }

   .auto{

       font-size: 29px;

       padding-top: 30px;

       padding-left: 35px;

       padding-bottom: 30px;

   }

   .element{

       text-align: center;

   }

   .clock i,p{

      display: inline-block;

      color: #000;

      font-size: 45px;

      padding-left: 15px;

     margin: 0 auto;

   }

   </style>

</head>

 

<body>

   <div class='container'>

      <div class='block1'>

         <img class='image1' src="image/logo.png" width="180" height="110" alt="lorem">

         <img class='image2' src='image/222.png' width="500" height="430" alt="lorem">

         <p class='p'>Добрый день!</p>

      </div>

 

      <div class='block2'>

         <p class='p1'><strong> Надеемся Вам будут интересны <br>условия сотрудичества:</strong></p>

      <ol class='ol1'>

          <li>Оплата только за вызов после оказанной услуги.</li>

          <li>Электронный вариант счета получите на свою почту, оригинал и акт<br>

           выполненных работ - при встрече с менеджером.</li>

          <li>Один раз в квартал подписывается акт сверки для понимания состояния расчета<br>

            с ЕЦУ по аварийным работам.</li>

      </ol>

      </div>

 

      <div class='block3'>

         <p class='p2'><strong>Стоимость вызова</strong></p>

            <ol class='ol2'>

          <li><strong>8:00-17:00</strong> - 300* грн. (для Ингульца - 500 грн.).</li>

          <li><strong>17:00 до 8:00</strong> (вечернее и ночное время) - 450* грн. (для Ингульца 650 грн.).<br></li>

            </ol>

           <p class='p3'>300 грн за вызов - лучшая цена в Кривом Роге на аварийное обслуживание. В<br>

             следующем году она точно увеличится, воспользуйтесь нашим предложением<br>

             сейчас и сохраните за собой эти условия на весь будущий год! Ими уже<br>

             воспользовалось около 135 ОСМД в Кривом Роге.</p>

      </div>

 

      <div class='block4'>

         <p class='p1'><strong> “Аварийная служба Единого Центра Услуг (ЕЦУ)” <br>предоставляет:</strong></p>

      <ol class='ol1'>

          <li>Круглосуточный вызов с учетом выходных и праздников через колл-центр<br> Аварийной Службы.</li>

          <li>Прочистка канализации (общедомовая и в квартирах жильцов).</li>

          <li>Прочистка выпусков.</li>

          <li>Ликвидация течи в системе водоснабжения и отопления.</li>

          <li>Устранение замыкания проводки и подача электроснабжения в дом.</li>

      </ol>

      </div>

 

      <div class='block5'>

          <img class='pictur' src="image/picture.png" width="1493" height="780px" alt="lorem">

      </div>

 

      <div class='block6'></div>

 

      <div class='block7'>

          <p class='p2'><strong> А что если аварийная ситуация случится именно в<br>

             момент праздника?</strong></p>

          <p class='p3'><strong>Порой мы идеализируем условия, в которых живем. Считаем, что :</strong></p>

          <p class='p3'>«безоблачное будущее» будет долгим. Но непредвиденные ситуации всгда<br>

             приходят неожиданно. К тому же<br> накануне Нового Года количество засоров канализации возрастает в разы и<br>

             дополнительный страховочный вариант окажется кстати.</p>

          <p class='p3'>Праздник может быть изрядно испорченным, когда в самый неподходящий момент<br>

             вам начинают названивать жильцы ОСМД: “ Спасите, помогите! Нас топят!”Вы<br>

             начинаете звонить знакомым сантехникам. Но… праздники, отпуска, уехал,<br>

             заболел. Ситуации могут быть разные и стоит иметь вариант на все случаи жизни.</p>

      </div>

       

      <div class='block8'>

         <p class='p1'><strong>Аварийна Служба ЕЦУ:</strong></p>

      <ol class='ol1'>

          <li>Это свой круглосуточный колл-центр</li>

          <li>Обученные профессионалы</li>

          <li>Новые автомобили и современное оборудование</li>

      </ol>

          <p class='parag'><strong>Наша бригада быстро, слаженно и профессионально выполнит работы!</strong></p>

          <p class='parag'>Единый Ценр Услуг - это очень эффектно и эффективно! На вызов БЫСТРО<br>

             приезжает новенький ФИАТ с сотрудниками одетыми в красивую спецформу. По их<br>

             слаженным действиям становится понятно, что дело делают профессионалы и им<br>

             можно доверять!</p>

      </div>

       

      <div class='block9'>

         <p class='p2'><strong> Готовы заключить договор или есть еще вопросы?</strong></p>  

         <p class='auto'>Позвоните нам по телефону:</p>  

         <a class='clock' href="#"><i class="fas fa-phone-alt"></i></a>

         <p class='clock'><strong>+380957333718</strong></p>

      </div>

 

   </div>

 

 <script src="https://kit.fontawesome.com/96510ad6b6.js" crossorigin="anonymous"></script>

</body>

</html>

0 комментариев
Сортировка:
Добавить комментарий

IT Новости

Смотреть все