Помогите, разместить блоки как на макете

28 марта 2022, 08:50

body, 
h1, 
h2, 
h3, 
h4, 
p, 
a { 
  margin: 0; 
  font-size: 100%; 
  font-weight: normal; 
} 
 
body { 
  font-family: 'Roboto', serif; 
  overflow-x: hidden; 
} 
 
a { 
  text-decoration: none; 
} 
 
.principle { 
  color: #000; 
} 
 
.d1 { 
  width: 25px; 
  height: 25px; 
  background: #6d163d; 
  border-radius: 50%; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="style.css" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
  <link href="http://allfont.ru/allfont.css?fonts=arial-narrow-bold" rel="stylesheet" type="text/css" /> 
  <title>Свила</title> 
</head> 
 
<body> 
  <main> 
    <div class="principle"> 
      <h2>Принципы</h2> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Гибкость в решение бизннес-задач</h3> 
        <p>Мы открыто обсуждаем варианты <br> организации мероприятия и подбираем<br> свое решение для каждого случая </p> 
      </div> 
    </div> 
    <div class="item"> 
      <div class="d1"></div> 
      <h3>Мы собрали команду из лучших</h3> 
      <p>МГлубокий опыт в кейтеринге и энергичный <br>настрой команды позволят легко добиться<br> целей мероприятия </p> 
    </div> 
    <div class="item"> 
      <div class="d1"></div> 
      <h3>Заботимся о своих клиентах</h3> 
      <p>Находимся на связи с клиентом 24/7,<br> чтобы напрямую услышать потребности 
        <br>и приоритетно решить задачи </p> 
    </div> 
    <div class="item"> 
      <div class="d1"></div> 
      <h3>Гарантируем лучшие цены</h3> 
      <p>Конкурентноспособные цены на меню и <br>условия оплаты для развития 
        <br> долгосрочных партнерских отношений </p> 
    </div> 
    <div class="item"> 
      <div class="d1"></div> 
      <h3>Каждое событие уникально</h3> 
      <p>Душевный подход к организации 
        <br>кейтеринга создаст нужную атмосферу и <br>сделать событие особенным</p> 
    </div> 
 
 
 
 
 
  </main> 
 
 
</body> 
 
</html>

Answer 1

.grid{ 
  display: grid; 
  grid-template-rows: auto auto; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 20px; 
  align-item: center; 
} 
.circle{ 
  margin-left: 50px; 
  position: relative; 
} 
.circle:before{ 
  position: absolute; 
  content: ''; 
  left: -50px; 
  width: 30px; 
  height: 30px; 
  background-color: #6D163D; 
  border-radius: 50%; 
} 
 
span{ 
  font-weight: bold; 
  font-size: 25px; 
 display: block; 
}

<div class="grid"> 
 <div class='circle'> 
    <span>Мы открыто обсуждаем варианты</span> 
    организации мероприятия и подбираем 
    свое решение для каждого случая 
 </div> 
  <div class='circle'> 
    <span>Мы открыто обсуждаем варианты</span> 
    организации мероприятия и подбираем 
    свое решение для каждого случая 
 </div> 
  <div class='circle'> 
    <span>Мы открыто обсуждаем варианты</span> 
    организации мероприятия и подбираем 
    свое решение для каждого случая 
 </div> 
  <div class='circle'> 
    <span>Мы открыто обсуждаем варианты</span> 
    организации мероприятия и подбираем 
    свое решение для каждого случая 
 </div> 
  <div class='circle'> 
    <span>Мы открыто обсуждаем варианты</span> 
    организации мероприятия и подбираем 
    свое решение для каждого случая 
 </div> 
</div>

Answer 2

Для блоков .item в этом случае нужно задать свойство display: inline-block;

body, 
h1, 
h2, 
h3, 
h4, 
p, 
a { 
  margin: 0; 
  font-size: 100%; 
  font-weight: normal; 
} 
 
body { 
  font-family: 'Roboto', serif; 
  overflow-x: hidden; 
} 
 
a { 
  text-decoration: none; 
} 
 
.principle { 
  max-width: 800px; 
  color: #000; 
} 
 
.item { 
  display: inline-block; 
  overflow: hidden; 
  vertical-align: top; 
  max-width: 200px; 
  padding-left: 40px; 
  margin: 0 20px 20px 0; 
} 
 
.d1 { 
  float: left; 
  width: 25px; 
  height: 25px; 
  background: #6d163d; 
  border-radius: 50%; 
  margin-left: -35px; 
  margin-top: 5px; 
} 
 
h2 { 
  display: inline-block; 
  margin: 20px 0 40px 10px; 
  padding-bottom: 5px; 
  text-transform: uppercase; 
  border-bottom: 1px solid black; 
} 
 
h3 { 
  font-weight: bold; 
  padding-bottom: 10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="style.css" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
  <link href="http://allfont.ru/allfont.css?fonts=arial-narrow-bold" rel="stylesheet" type="text/css" /> 
  <title>Свила</title> 
</head> 
 
<body> 
  <main> 
    <h2>Принципы</h2> 
    <div class="principle"> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Гибкость в решение бизннес-задач</h3> 
        <p>Мы открыто обсуждаем варианты <br> организации мероприятия и подбираем<br> свое решение для каждого случая </p> 
      </div> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Мы собрали команду из лучших</h3> 
        <p>МГлубокий опыт в кейтеринге и энергичный <br>настрой команды позволят легко добиться<br> целей мероприятия </p> 
      </div> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Заботимся о своих клиентах</h3> 
        <p>Находимся на связи с клиентом 24/7,<br> чтобы напрямую услышать потребности 
          <br>и приоритетно решить задачи </p> 
      </div> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Гарантируем лучшие цены</h3> 
        <p>Конкурентноспособные цены на меню и <br>условия оплаты для развития 
          <br> долгосрочных партнерских отношений </p> 
      </div> 
      <div class="item"> 
        <div class="d1"></div> 
        <h3>Каждое событие уникально</h3> 
        <p>Душевный подход к организации 
          <br>кейтеринга создаст нужную атмосферу и <br>сделать событие особенным</p> 
      </div> 
    </div> 
  </main> 
</body> 
 
</html>