1 ответ
Если что то не ясно спросите - я поясню
Здесь лучше отображается: https://codepen.io/topicstarter/pen/GVMvjM
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
.items {
display: inline-flex;
justify-content: space-between;
}
.item {
display: inline-flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 280px;
height: 320px;
text-align: center;
position: relative;
box-sizing: border-box;
}
ion-icon {
font-size: 60px;
}
.item p {
width: 90%;
}
.item:nth-of-type(1):after,
.item:nth-of-type(2):after {
content: "";
position: absolute;
top: 40px;
}
.item:nth-of-type(1):after {
width: 20%;
height: 3px;
background: #000;
right: 0;
}
.item:nth-of-type(2):after {
width: 20%;
height: 3px;
background: #000;
left: 0;
}
<div class="items">
<div class="item">
<ion-icon name="analytics"></ion-icon>
<h2>
<b>
analitics & insinght
</b>
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, sequi beatae. Dolor voluptatem a repellendus rem quaerat, sunt enim laboriosam?</p>
</div>
<div class="item">
<ion-icon name="calendar"></ion-icon>
<h2>
<b>
organize your deadline
</b>
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis similique officiis doloremque perferendis praesentium a quae commodi </p>
</div>
</div>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
position:absolute
...или еще что нить.