0

Вот макет

введите сюда описание изображения

Вот HTML и CSS

 
.items_2 {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin: 53px 0;
}

.item_2 {
    display: flex;
    display: -webkit-flex;
    width: 50%;
    padding: 5px 25px;
}

.item_2 p {
    display: block;
    position: relative;
    font-size: 20px;
    line-height: 30px;
    color: #584A45;
}

.item_2 p:before {
    width: 9px;
    height: 9px;
    border: 1px solid #584A45;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 8px;
    left: -25px;
}
<div class="items_2">
    <div class="item_2">
        <p>Comprehensive approach to your health</p>
    </div>
    <div class="item_2">
        <p>Experienced and expert trainers</p>
    </div>
    <div class="item_2">
        <p>High quality equipment</p>
    </div>
    <div class="item_2">
        <p>Location in the city center with a private garden</p>
    </div>
    <div class="item_2">
        <p>Wellness area with steam bath and infrared sauna</p>
    </div>
    <div class="item_2">
        <p>All-inclusive service - from coffee and shakes to shower products</p>
    </div>
</div>
Как сделать розовые линии под текcтом как на макете?

2 ответа 2

3

Фон делается элементарно - с помощью linear-gradient().

Но, чтобы фон переносился по строкам, нужно преобразовать блочные параграфы в строчные, задав им display: inline; :

.items_2 {
  display: flex;
  flex-wrap: wrap;
  margin: 53px 0;
}

.item_2 {
  width: 50%;
  padding: 5px 25px;
}

.item_2 p {
  position: relative;
  display: inline;
  padding: 5px 0;
  font: 20px/30px sans-serif;
  color: #584A45;
  background-image: linear-gradient(to top, #f9f1ee, transparent);
}

.item_2 p:before {
  content: "";
  position: absolute;
  top: .6em;
  left: -25px;
  height: 9px;
  width: 9px;
  border: 1px solid #584A45;
  border-radius: 50%;
}
<div class="items_2">
  <div class="item_2">
    <p>Comprehensive approach to your health</p>
  </div>
  <div class="item_2">
    <p>Experienced and expert trainers</p>
  </div>
  <div class="item_2">
    <p>High quality equipment</p>
  </div>
  <div class="item_2">
    <p>Location in the city center with a private garden</p>
  </div>
  <div class="item_2">
    <p>Wellness area with steam bath and infrared sauna</p>
  </div>
  <div class="item_2">
    <p>All-inclusive service - from coffee and shakes to shower products</p>
  </div>
</div>

2

Можно сделать только нижний border и тогда, линию можно анимировать/изменить как-то

То есть:

.item_2 p{
    border-bottom: 1px solid #584A45;
}
2
  • Не является ответом на вопрос. Чтобы оставить свои замечания или попросить у автора внести уточнения, оставьте комментарий к соответствующему сообщению. — из очереди проверок 6 ноя 2020 в 16:47
  • 1
    @PeterLavreniuk, изменил ответ. К сожалению писал то сообщение с телефона и не было возможности написать пример😅
    – DGDays
    6 ноя 2020 в 17:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.