Как сделать линию как на макете?

Question

Вот как на фото, есть линия, и в конце линни такой кружок, как мне сделать такое не ломая адаптивную верстку?

.template__content{
    position: relative;

    }

    .template__modern-loyaut {
        top: 0;
        position: absolute;
    }


    .template__customize {
        position: absolute;
        text-align: right;
        right: 0;
        bottom: 20%;
    }

.template__analityc-title--line2::after {
    content: "";
    height: 2px;
    position: absolute;
    width: 50%;
    background-color: #5584ff;
    display: block;
    margin: 10px 0;
}

.template__analityc-title--line1::after {
    content: "";
    height: 2px;
    position: absolute;
    width: 50%;
    background-color: #5584ff;
    display: block;
    margin: 10px 0;
}

    .template__analityc-title {
        font-size: 24px;
        font-family: Roboto;
        color: #0e1a35;
        font-weight: 700;
    }

    .template__text {
        margin-top: 20px;
        font-size: 18px;
        font-family: Roboto;
        color: #8492af;
        width: 220px;
        height: 60px;
        overflow: hidden;
    }

    .template__img-murcup {
        display: block;
        max-width: 100%;
    }

  <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
    </head>
    <body>
          <div class="template__content">
                   <div class="template__modern-loyaut">
                      <h3 class="template__analityc-title template__analityc-title--line1">Clean & modern layout</h3>
                      <p class="template__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua. </p>
                   </div>
                   <div class="template__screen-murcup">
                      <img src="http://placehold.it/500x629" alt="screen" class="template__img-murcup">
                   </div>
                   <div class="template__customize">
                      <h3 class="template__analityc-title template__analityc-title--line2">Easy to customize</h3>
                      <p class="template__text ">Lorem ipsum dolor sit amet, consectetur adipisicing
                         elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua. </p>
                   </div>
                </div>
    </body>
    </html>

    
    <html>

Answer 1

Учитывая то, что многие значения являются фиксированными, повсюду присутствует position: absolute;, выравнивание с помощью TRBL и margin, а position: relative; есть только у главного контейнера, то никакой адаптивности здесь не наблюдается.

В общем, подход неверный, а я делал из того, что дали:

.template__content {
  position: relative;
}

.template__modern-loyaut {
  position: absolute;
  top: 10%;
  width: 45%;
}

.template__customize {
  position: absolute;
  bottom: 10%;
  right: 0;
  width: 45%;
  text-align: right;
}

.template__analityc-title--line::after,
.template__analityc-title--line::before {
  content: "";
  position: absolute;
  display: block;
}

.template__analityc-title--line::after {
  margin: 10px 0;
  height: 2px;
  width: 100%;
  background-color: #5584ff;
}

.template__analityc-title--line::before {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #5584ff;
}
.template__modern-loyaut .template__analityc-title--line::before {
  margin: 30px 0 0 100%;
}
.template__customize .template__analityc-title--line::before {
  margin: 30px 0 0 -15px;
}

.template__analityc-title {
  font-size: 24px;
  font-family: Roboto;
  color: #0e1a35;
  font-weight: 700;
}

.template__text {
  margin-top: 0px;
  height: 60px;
  width: 220px;
  overflow: hidden;
  font-size: 18px;
  font-family: Roboto;
  color: #8492af;
}
.template__modern-loyaut .template__text {
  float: left;
}
.template__customize .template__text {
  float: right;
}

.template__img-murcup {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="template__content">
    <div class="template__modern-loyaut">
      <h3 class="template__analityc-title template__analityc-title--line">Clean & modern layout</h3>
      <p class="template__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div class="template__screen-murcup">
      <img src="http://placehold.it/500x629" alt="screen" class="template__img-murcup">
    </div>
    <div class="template__customize">
      <h3 class="template__analityc-title template__analityc-title--line">Easy to customize</h3>
      <p class="template__text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </div>
</body>

</html>

Answer 2

Вообщем можно просто создать пустой див, а в css указать примерно это:

.line {
    display:          block;
    width:            50px;
    height            2px;
    background-color: #00a4e5;
    margin-top:       10px; 
}

Дальше уже сам указываешь длину и положение в блоке

БЛОГ НА HUSL

Как сделать линию как на макете?

Ответы (2 шт):