Эй, ребята, я новичок в веб-дизайне, нужны советы по этому поводу - PullRequest
Новая
       7

Эй, ребята, я новичок в веб-дизайне, нужны советы по этому поводу

0 голосов
/ 07 ноября 2019

Не могу понять, как выровнять этот элемент, как на фотографии

Создание веб-дизайна из моего прототипа, но я здесь сложил, перепробовал много вариантов, не смог понять, вот что яполучил.

Если вы можете как-то помочь, это было бы здорово. [Вот как это должно выглядеть 1 . 

<div class="container-fluid bg-light">
<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
            <h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        </div>
    </div>

    <div class="row">
        <div class="col">
           <h1 class="text-left pqesbtitle">Garantizar </h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

        <div class="col">
           <h1 class="text-left pqesbtitle">Soporte</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

    </div>
    <div class="row">
        <div class="col text-center">
            <img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
        </div>
    </div>

        <div class="row">
        <div class="col">
           <h1 class="text-left pqesbtitle">Instalación</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

        <div class="col">
           <h1 class="text-left pqesbtitle">Innovaciones</h1>

           <img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">

            <p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.</p>
        </div>

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

1 Ответ

0 голосов
/ 07 ноября 2019

Полагаю, вы используете Bootstrap.

Посмотрите, может быть, это то, что вы ищете:) 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid bg-light">
    <div class="container">
      <div class="row">
        <div class="col" style="text-align: center;">
          <h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
          <h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-12">
              <div class="mini-box">

                <h1 class="text-left pqesbtitle">Garantizar </h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="mini-box">
                <h1 class="text-left pqesbtitle">Soporte</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="big-box text-center">
            <img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
          </div>
        </div>
        <div class="col-xs-4">
          <div class="row">
            <div class="col-xs-12">
              <div class="mini-box">

                <h1 class="text-left pqesbtitle">Instalación</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="mini-box">
                <h1 class="text-left pqesbtitle">Innovaciones</h1>

                <img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...