Блоки одной высоты
Задача заключается в том, чтобы сделать блоки с рамкой одинаковой высоты в независимости от содержимого. Сейчас это все держится на min-height, но это не то что нужно(
.about-main-title {
span {
display: block;
}
width: 750px;
margin: 0 auto;
h2 {
font-family: 'Dela Gothic One';
font-style: normal;
font-weight: 400;
font-size: 80px;
line-height: 116px;
text-align: center;
color: #ADBCC9;
}
}
.about-img {
img {
width: 100%;
border-radius: 20px;
}
margin: 80px 0 200px 0;
text-align: center;
}
.about-item {
position: relative;
}
.about-item-container:after {
content: '';
height: 100%;
width: 1px;
border: 1px solid rgba(173, 188, 201, 0.2);
left: 50%;
// margin: 34px 0;
position: absolute;
clip-path: inset(34px 0);
top: 50%;
}
.about-item:last-child .about-item-container:after {
content: '';
height: 0;
width: 0px;
}
.about-item-container {
justify-content: space-between;
align-items: center;
}
.about-item:nth-child(even) .about-item-container {
display: flex;
flex-direction: row-reverse;
}
.about-item-block {
p {
padding: 10px 0;
}
padding: 53px;
position: relative;
width:40%;
min-height: 456px;
height: 100%;
background: #464646;
border: 1px solid #C4D0D9;
border-radius: 20px;
}
.about-item-title {
margin: 0 0 20px 0;
font-family: 'Sreda';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 36px;
color: #FFFFFF;
}
.about-item-side-title {
width: 40%;
}
.about-item-text {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: #FFFFFF;
}
.about-item-cirle {
position: relative;
background: rgba(173, 188, 201, 0.5);
border-radius: 50%;
width: 68px;
display: flex;
justify-content: center;
align-items: center;
height: 68px;
}<div class="about-items">
<div class="about-items-container">
<div class="about-item">
<div class="about-item-container row">
<div class="about-item-block">
<div class="about-item-title">Working since 2020</div>
<div class="about-item-text">
<p>Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p> Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item-cirle">
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.4085 3.55212L17.1085 16.8917C16.9501 17.05 16.7786 17.1625 16.5939 17.229C16.4092 17.2955 16.2112 17.3282 16.0001 17.3271C15.789 17.3271 15.5911 17.2939 15.4064 17.2274C15.2217 17.1609 15.0501 17.049 14.8918 16.8917L1.55221 3.55212C1.18277 3.18268 0.998047 2.72087 0.998047 2.16671C0.998047 1.61254 1.19596 1.13754 1.5918 0.741707C1.98763 0.345873 2.44944 0.147957 2.97721 0.147957C3.50499 0.147957 3.9668 0.345873 4.36263 0.741707L16.0001 12.3792L27.6376 0.741707C28.0071 0.372263 28.4625 0.18754 29.004 0.18754C29.5455 0.18754 30.0137 0.385456 30.4085 0.78129C30.8043 1.17712 31.0022 1.63893 31.0022 2.16671C31.0022 2.69448 30.8043 3.15629 30.4085 3.55212Z" fill="#747474" fill-opacity="0.5" />
</svg>
</div>
<div class="about-item-title about-item-side-title">Working since 2020</div>
</div>
</div>
<div class="about-item">
<div class="about-item-container row">
<div class="about-item-block">
<div class="about-item-title">Committed to great results</div>
<div class="about-item-text">
<p>Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p> Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item-cirle">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.4854 3.37565L17.9693 2.3069L18.4838 3.37565H18.4854ZM4.75 16.2038L5.93275 16.1025C5.90549 15.7983 5.76212 15.5164 5.53242 15.3152C5.30272 15.114 5.00435 15.009 4.69927 15.0221C4.39419 15.0351 4.10586 15.1652 3.89417 15.3852C3.68248 15.6053 3.5637 15.8985 3.5625 16.2038H4.75ZM32.0403 19.0902L30.9225 25.5502L33.2643 25.9556L34.3805 19.4956L32.0403 19.0902ZM20.9713 33.6458H13.6103V36.0208H20.9713V33.6458ZM12.1679 32.3206L10.8823 17.4483L8.51517 17.6526L9.80242 32.5248L12.1679 32.3206ZM30.9225 25.5502C30.1198 30.1894 25.9366 33.6458 20.9713 33.6458V36.0208C27.0291 36.0208 32.2541 31.7949 33.2643 25.9556L30.9225 25.5502ZM20.9871 8.07498L19.9373 14.4796L22.2807 14.8627L23.3304 8.45973L20.9871 8.07498ZM11.381 16.2228L13.6594 14.2595L12.1077 12.4608L9.8325 14.4242L11.381 16.2228ZM17.803 7.87232L18.5567 4.96848L16.2577 4.37315L15.504 7.2754L17.803 7.87232ZM19.6935 4.39848L19.9231 4.4729L20.6498 2.2119L20.4203 2.13748L19.6935 4.39848ZM16.6614 10.792C17.156 9.86731 17.5392 8.88724 17.803 7.87232L15.504 7.2754C15.2875 8.10924 14.9729 8.91446 14.5667 9.67415L16.663 10.792H16.6614ZM19.9231 4.4729C20.149 4.54137 20.354 4.6658 20.5189 4.83465C20.6839 5.0035 20.8035 5.21129 20.8668 5.43873L23.1658 4.8434C23.0021 4.22828 22.6857 3.6645 22.2459 3.20443C21.806 2.74437 21.257 2.40295 20.6498 2.2119L19.9231 4.4729ZM18.5567 4.96848C18.5882 4.85444 18.6442 4.74863 18.7208 4.65841C18.7973 4.56818 18.8926 4.49569 19 4.44598L17.9693 2.3069C17.1269 2.71223 16.4936 3.46273 16.2577 4.37315L18.5567 4.96848ZM19 4.44598C19.2167 4.34249 19.4647 4.3255 19.6935 4.39848L20.4203 2.13748C19.6117 1.87832 18.7345 1.93896 17.9693 2.3069L18.9984 4.44598H19ZM22.4105 17.3913H30.6122V15.0163H22.4105V17.3913ZM7.47175 33.8928L5.93275 16.1025L3.56725 16.3067L5.10308 34.0971L7.47175 33.8928ZM5.9375 34.0622V16.2038H3.5625V34.0622H5.9375ZM5.10308 34.0971C5.09825 34.0395 5.10703 33.9816 5.12578 33.927C5.14453 33.8724 5.17444 33.8223 5.2136 33.7798C5.25276 33.7374 5.30032 33.7036 5.35325 33.6805C5.40619 33.6574 5.46334 33.6456 5.52108 33.6458V36.0208C6.67058 36.0208 7.56992 35.036 7.47175 33.8928L5.10467 34.0986L5.10308 34.0971ZM23.3304 8.45973C23.5279 7.25597 23.4718 6.02423 23.1658 4.8434L20.8668 5.44032C21.0899 6.30058 21.1309 7.19797 20.9871 8.07498L23.3304 8.45973ZM13.6103 33.6458C13.2478 33.6452 12.8986 33.5088 12.6316 33.2635C12.3646 33.0182 12.1992 32.6818 12.1679 32.3206L9.80242 32.5248C9.88481 33.4782 10.3216 34.3662 11.0265 35.0134C11.7314 35.6605 12.6534 36.02 13.6103 36.0208V33.6458ZM13.6594 14.2595C14.7361 13.3317 15.8951 12.2281 16.663 10.792L14.5667 9.67415C14.0188 10.7017 13.1464 11.5678 12.1077 12.4608L13.6594 14.2595ZM34.3805 19.4956C34.4758 18.9461 34.4499 18.3825 34.3045 17.8441C34.159 17.3058 33.8977 16.8057 33.5387 16.379C33.1797 15.9523 32.7318 15.6092 32.2262 15.3738C31.7207 15.1384 31.1698 15.0164 30.6122 15.0163V17.3913C31.5099 17.3913 32.1955 18.202 32.0403 19.0902L34.3805 19.4956ZM5.52108 33.6458C5.75225 33.6458 5.9375 33.8327 5.9375 34.0622H3.5625C3.5625 35.1421 4.43808 36.0208 5.52108 36.0208V33.6458ZM19.9373 14.4796C19.8783 14.8383 19.898 15.2056 19.9952 15.556C20.0923 15.9063 20.2644 16.2314 20.4997 16.5086C20.735 16.7857 21.0278 17.0084 21.3578 17.1611C21.6877 17.3138 22.0469 17.3913 22.4105 17.3913V15.0163C22.3912 15.0164 22.3721 15.0138 22.3546 15.0057C22.337 14.9975 22.3215 14.9856 22.3091 14.9708C22.2967 14.956 22.2878 14.9386 22.2828 14.92C22.2779 14.9013 22.2772 14.8817 22.2807 14.8627L19.9373 14.4796ZM10.8823 17.4483C10.8627 17.219 10.8962 16.9884 10.9832 16.7753C11.0702 16.5623 11.2065 16.3729 11.381 16.2228L9.82933 14.4226C9.37019 14.8185 9.01163 15.3177 8.78316 15.8793C8.55468 16.4408 8.46283 17.0486 8.51517 17.6526L10.8823 17.4467V17.4483Z" fill="#747474" />
</svg>
</div>
<div class="about-item-title about-item-side-title">Committed to great results</div>
</div>
</div>
<div class="about-item">
<div class="about-item-container row">
<div class="about-item-block">
<div class="about-item-title">500 satisfied customers</div>
<div class="about-item-text">
<p>Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p> Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item-cirle">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.9761 5.6811C20.0983 5.6811 21.1745 6.1269 21.9681 6.92042C22.7616 7.71394 23.2074 8.79019 23.2074 9.9124C23.2074 11.0346 22.7616 12.1109 21.9681 12.9044C21.1745 13.6979 20.0983 14.1437 18.9761 14.1437C17.8536 14.1437 16.7771 13.6978 15.9834 12.9041C15.1897 12.1104 14.7438 11.0339 14.7438 9.91145C14.7438 8.78899 15.1897 7.7125 15.9834 6.9188C16.7771 6.1251 17.8536 5.6811 18.9761 5.6811ZM18.9761 7.5811C18.3578 7.5811 17.7648 7.82672 17.3276 8.26392C16.8904 8.70112 16.6448 9.2941 16.6448 9.9124C16.6448 10.5307 16.8904 11.1237 17.3276 11.5609C17.7648 11.9981 18.3578 12.2437 18.9761 12.2437C19.5946 12.2437 20.1878 11.998 20.6252 11.5606C21.0626 11.1232 21.3083 10.53 21.3083 9.91145C21.3083 9.2929 21.0626 8.69968 20.6252 8.2623C20.1878 7.82492 19.5946 7.5811 18.9761 7.5811ZM5.73118 21.8501C5.73118 22.1021 5.63109 22.3437 5.45293 22.5219C5.27477 22.7 5.03314 22.8001 4.78118 22.8001C4.52923 22.8001 4.28759 22.7 4.10943 22.5219C3.93127 22.3437 3.83118 22.1021 3.83118 21.8501V17.1267C3.83124 16.6613 4.0021 16.2122 4.31134 15.8644C4.62058 15.5166 5.0467 15.2944 5.50888 15.24L5.73118 15.2267H10.9695C10.693 15.7037 10.5244 16.2355 10.4755 16.7847L10.4603 17.1267H5.72928L5.73118 21.8501ZM33.2318 22.8001C33.4837 22.8001 33.7254 22.7 33.9035 22.5219C34.0817 22.3437 34.1818 22.1021 34.1818 21.8501V17.1267L34.1685 16.9063C34.1145 16.4438 33.8925 16.0172 33.5447 15.7076C33.1969 15.3979 32.7474 15.2268 32.2818 15.2267H26.9922C27.2696 15.7074 27.4482 16.2584 27.49 16.8436L27.4995 17.1286H32.2818V21.8501C32.2818 22.1021 32.3819 22.3437 32.56 22.5219C32.7382 22.7 32.9798 22.8001 33.2318 22.8001ZM23.7014 15.2267C24.167 15.2268 24.6165 15.3979 24.9643 15.7076C25.3121 16.0172 25.5341 16.4438 25.5881 16.9063L25.5995 17.1267V21.8501C25.5995 22.1021 25.4994 22.3437 25.3212 22.5219C25.1431 22.7 24.9014 22.8001 24.6495 22.8001C24.3975 22.8001 24.1559 22.7 23.9777 22.5219C23.7996 22.3437 23.6995 22.1021 23.6995 21.8501V17.1267H14.2603V21.8501C14.2603 22.1021 14.1602 22.3437 13.982 22.5219C13.8039 22.7 13.5622 22.8001 13.3103 22.8001C13.0583 22.8001 12.8167 22.7 12.6385 22.5219C12.4604 22.3437 12.3603 22.1021 12.3603 21.8501V17.1267C12.3603 16.6613 12.5312 16.2122 12.8404 15.8644C13.1497 15.5166 13.5758 15.2944 14.038 15.24L14.2603 15.2267H23.6995H23.7014ZM32.088 10.509C32.088 9.54476 31.7049 8.62002 31.0231 7.93821C30.3413 7.25639 29.4166 6.87335 28.4523 6.87335C27.4881 6.87335 26.5634 7.25639 25.8815 7.93821C25.1997 8.62002 24.8167 9.54476 24.8167 10.509C24.8167 11.4732 25.1997 12.398 25.8815 13.0798C26.5634 13.7616 27.4881 14.1446 28.4523 14.1446C29.4166 14.1446 30.3413 13.7616 31.0231 13.0798C31.7049 12.398 32.088 11.4732 32.088 10.509ZM26.7167 10.509C26.7167 10.0487 26.8995 9.60721 27.225 9.28171C27.5505 8.95621 27.992 8.77335 28.4523 8.77335C28.9127 8.77335 29.3541 8.95621 29.6796 9.28171C30.0051 9.60721 30.188 10.0487 30.188 10.509C30.188 10.9693 30.0051 11.4108 29.6796 11.7363C29.3541 12.0618 28.9127 12.2446 28.4523 12.2446C27.992 12.2446 27.5505 12.0618 27.225 11.7363C26.8995 11.4108 26.7167 10.9693 26.7167 10.509ZM9.53118 6.8724C10.4954 6.8724 11.4202 7.25544 12.102 7.93726C12.7838 8.61907 13.1668 9.54381 13.1668 10.508C13.1668 11.4723 12.7838 12.397 12.102 13.0788C11.4202 13.7607 10.4954 14.1437 9.53118 14.1437C8.56695 14.1437 7.64221 13.7607 6.96039 13.0788C6.27857 12.397 5.89553 11.4723 5.89553 10.508C5.89553 9.54381 6.27857 8.61907 6.96039 7.93726C7.64221 7.25544 8.56695 6.8724 9.53118 6.8724ZM9.53118 8.7724C9.07086 8.7724 8.62939 8.95526 8.30389 9.28076C7.97839 9.60626 7.79553 10.0477 7.79553 10.508C7.79553 10.9684 7.97839 11.4098 8.30389 11.7353C8.62939 12.0608 9.07086 12.2437 9.53118 12.2437C9.9915 12.2437 10.433 12.0608 10.7585 11.7353C11.084 11.4098 11.2668 10.9684 11.2668 10.508C11.2668 10.0477 11.084 9.60626 10.7585 9.28076C10.433 8.95526 9.9915 8.7724 9.53118 8.7724ZM4.75078 24.7001C4.49883 24.7001 4.25719 24.8002 4.07903 24.9783C3.90087 25.1565 3.80078 25.3981 3.80078 25.6501V27.5501C3.80078 28.8099 4.30123 30.0181 5.19202 30.9089C6.08282 31.7997 7.291 32.3001 8.55078 32.3001H29.4508C30.7106 32.3001 31.9187 31.7997 32.8095 30.9089C33.7003 30.0181 34.2008 28.8099 34.2008 27.5501V25.6501C34.2008 25.3981 34.1007 25.1565 33.9225 24.9783C33.7444 24.8002 33.5027 24.7001 33.2508 24.7001H4.75078ZM5.70078 27.5501V26.6001H32.3008V27.5501C32.3008 28.306 32.0005 29.0309 31.466 29.5654C30.9316 30.0998 30.2066 30.4001 29.4508 30.4001H8.55078C7.79491 30.4001 7.07001 30.0998 6.53553 29.5654C6.00105 29.0309 5.70078 28.306 5.70078 27.5501Z" fill="#747474" fill-opacity="0.5" />
</svg>
</div>
<div class="about-item-title about-item-side-title">500 satisfied customers</div>
</div>
</div>
<div class="about-item">
<div class="about-item-container row">
<div class="about-item-block">
<div class="about-item-title">Innovative approach</div>
<div class="about-item-text">
<p>Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p> Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item-cirle">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 4.75V9.5H4.75V4.75H9.5ZM2.375 2.375V11.875H11.875V2.375H2.375ZM21.375 8.3125V13.0625H16.625V8.3125H21.375ZM14.25 5.9375V15.4375H23.75V5.9375H14.25ZM9.5 19V23.75H4.75V19H9.5ZM2.375 16.625V26.125H11.875V16.625H2.375Z" fill="#747474" fill-opacity="0.5" />
<path d="M26.125 11.875V19H19V26.125H11.875V35.625H35.625V11.875H26.125ZM21.375 21.375H26.125V26.125H21.375V21.375ZM19 33.25H14.25V28.5H19V33.25ZM26.125 33.25H21.375V28.5H26.125V33.25ZM33.25 33.25H28.5V28.5H33.25V33.25ZM33.25 26.125H28.5V21.375H33.25V26.125ZM28.5 19V14.25H33.25V19H28.5Z" fill="#747474" fill-opacity="0.5" />
</svg>
</div>
<div class="about-item-title about-item-side-title">Innovative approach</div>
</div>
</div>
<div class="about-item">
<div class="about-item-container row">
<div class="about-item-block">
<div class="about-item-title">A complex approach</div>
<div class="about-item-text">
<p>Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p> Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item-cirle">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.8327 16.6251V19.0001C34.8327 26.4639 34.8327 30.1958 32.5131 32.5138C30.1967 34.8334 26.4632 34.8334 18.9993 34.8334C11.5355 34.8334 7.8036 34.8334 5.48402 32.5138C3.16602 30.1974 3.16602 26.4639 3.16602 19.0001C3.16602 17.2141 3.16602 15.6402 3.19768 14.2501M21.3743 3.16675H18.9993C11.5355 3.16675 7.8036 3.16675 5.48402 5.48475C4.78735 6.183 4.2981 7.0095 3.95768 8.02758" stroke="#747474" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" />
<path d="M11.082 22.1668L13.9273 18.7532C15.0546 17.3994 15.6183 16.7233 16.3593 16.7233C17.1019 16.7233 17.6655 17.3994 18.7929 18.7532L19.2045 19.2472C20.3319 20.6009 20.8955 21.277 21.6381 21.277C22.3791 21.277 22.9428 20.6009 24.0701 19.2472L26.9154 15.8335" stroke="#747474" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" />
<path d="M30.082 12.6667C32.7054 12.6667 34.832 10.5401 34.832 7.91675C34.832 5.2934 32.7054 3.16675 30.082 3.16675C27.4587 3.16675 25.332 5.2934 25.332 7.91675C25.332 10.5401 27.4587 12.6667 30.082 12.6667Z" stroke="#747474" stroke-opacity="0.5" stroke-width="1.5" />
</svg>
</div>
<div class="about-item-title about-item-side-title">A complex approach</div>
</div>
</div>
</div>
</div>Ответы (1 шт):
Автор решения: UserTest013
→ Ссылка
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #3b3b3d;
color: #ADBCC9;
min-width: 600px;
}
.about {
display: grid;
grid-auto-rows: 1fr;
align-items: stretch;
padding: 2rem;
}
.about-item {
display: flex;
position: relative;
align-items: center;
justify-content: center;
gap: 1rem;
}
.about-item:not(:first-child):before {
content: '';
position: absolute;
background: #C4D0D9;
inset: 0 calc(50% - 1px) calc(50% + 2rem) calc(50% - 1px);
}
.about-item:not(:last-child):after {
content: '';
position: absolute;
background: #C4D0D9;
inset: calc(50% + 2rem) calc(50% - 1px) 0 calc(50% - 1px);
}
.about-item>* {
flex-grow: 1;
flex-basis: 33%;
}
.about-item:nth-child(odd) {
flex-direction: row-reverse;
}
.about-item:nth-child(even) .about-item-title {
text-align: right;
}
.about-item-block {
padding: 1rem;
background: #464646;
border: 1px solid #C4D0D9;
border-radius: 20px;
place-self: stretch;
}
.about-item-block h2 {
font-weight: 400;
font-size: 2rem;
text-align: center;
}
.about-item-block p {
padding-block: 0.5rem;
text-align: justify;
}
.about-item-cirle {
background: #747b83;
border-radius: 50%;
/* width: 4rem; */
flex-grow: 0;
flex-basis: 4rem;
aspect-ratio: 1/1;
}
.about-item-title {
font-size: 2.4rem;
}<div class="about">
<div class="about-item">
<div class="about-item-title">Working since 2020</div>
<div class="about-item-cirle"></div>
<div class="about-item-block">
<h2>Working since 2020</h2>
<p>1. Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p>2.</p>
</div>
</div>
<div class="about-item">
<div class="about-item-title">Committed to great results</div>
<div class="about-item-cirle"></div>
<div class="about-item-block">
<h2>Committed to great results</h2>
<p>1. Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p>2.</p>
<p>3.</p>
</div>
</div>
<div class="about-item">
<div class="about-item-title">500 satisfied customers</div>
<div class="about-item-cirle"></div>
<div class="about-item-block">
<h2>500 satisfied customers</h2>
<p>1. Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item">
<div class="about-item-title">Innovative approach</div>
<div class="about-item-cirle"></div>
<div class="about-item-block">
<h2>Innovative approach</h2>
<p>1. Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
</div>
</div>
<div class="about-item">
<div class="about-item-title">A complex approach</div>
<div class="about-item-cirle"></div>
<div class="about-item-block">
<h2>A complex approach</h2>
<p>1. Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in.</p>
<p>2.</p>
<p>3.</p>
<p>4.</p>
<p>5.</p>
</div>
</div>
</div>