<ul class="trust-list">
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
<li>
<img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
<h4>Работа по договору</h4>
<p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
</li>
</ul>
.trust-list li {
flex: 0 0 auto;
width: 269px;
height: 326px;
border-radius: 10px;
padding: 22px 14px 9px 14px;
background: #fdfdfd;
box-shadow: 0px 5px 18px -4px #00000026;
border: 1px solid #0000000a;
margin: 0 36px 51px 0px;
}
.trust-list h4 {
text-align: center;
color: black;
font-weight: 600;
margin-top: 18px;
margin-bottom: 18px;
}
.trust-list img {
width: 77%;
margin: 0 auto !important;
display: block;
}
.powercode-trust {
padding-top: 40px;
padding-bottom: 48px;
background: url(/images/myelements/background-wallpaper.jpg);
height: 433px;
position: relative;
}
.powercode-trust .custom-overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(41, 35, 255, 0.71);
}
.powercode-trust .container {
position: relative;
}
.powercode-trust .reg-hm-ttl {
margin-bottom: 39px;
margin-top: 20px;
color: white;
}
.trust-list:active {
cursor: grabbing;
}
.trust-list {
display: flex;
justify-content: space-between;
padding: 0;
width: 100%;
margin: 65px auto -54px auto;
list-style: none;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
cursor: grab;
}
.trust-list p {
font-size: 18px;
text-align: center;
font-family: Futura, sans-serif;
color: black;
padding: 0 11px;
font-weight: 300;
}
.trust-list::scrollbar {
height: 12px !important;
cursor: pointer;
}
.trust-list::scrollbar {
background: #ececec;
border-radius: 100px;
overflow: hidden;
width: 40%;
}
.trust-list::scrollbar-thumb {
background: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.