<div class="portfolio__blocks">
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img smile"></div>
<div class="portfolio__blocks--text">Проектов</div>
<div class="portfolio__blocks--numbers">1000+</div>
</div>
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img diacussion"></div>
<div class="portfolio__blocks--text">Клиентов</div>
<div class="portfolio__blocks--numbers">350</div>
</div>
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img ok"></div>
<div class="portfolio__blocks--text">Работаю с</div>
<div class="portfolio__blocks--numbers">2015</div>
</div>
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img smile"></div>
<div class="portfolio__blocks--text">Проектов</div>
<div class="portfolio__blocks--numbers">1000+</div>
</div>
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img diacussion"></div>
<div class="portfolio__blocks--text">Клиентов</div>
<div class="portfolio__blocks--numbers">350</div>
</div>
<div class="portfolio__blocks-item">
<div class="portfolio__blocks--img ok"></div>
<div class="portfolio__blocks--text">Работаю с</div>
<div class="portfolio__blocks--numbers">2015</div>
</div>
</div>
//:root { --bor: 4px; } // толщина рамки
//Блок с портфолио
.portfolio{
background: #f0f0f0;
//Блоки с предварительной инфой
&__blocks{
display: flex;
justify-content: center;
flex-wrap: wrap;
//Сами блоки
&-item{
flex-direction: column;
box-sizing: border-box;
padding: 10px;
margin: -.5px; /* calc(-.5 * var(--bor)); половина толщины рамки*/
border: 1px solid gray; // var(--bor)
//Предварительные блоки обо мне
}
&--img{
background: url(../img/spl-sprit.png) no-repeat;
width: 72px;
height: 64px;
margin: 40px 80px;
}
&--text{
text-align: center;
color: #999999;
font-size: 20px;
}
&--numbers{
text-align: center;
color: #00ccff;
font-size: 40px;
padding: 10px;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.