<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::-webkit-scrollbar {
    height: 12px !important;
    cursor: pointer;
}
.trust-list::-webkit-scrollbar {
    background: #ececec;
    border-radius: 100px;
    overflow: hidden;
    width: 40%;
}
.trust-list::-webkit-scrollbar-thumb {
  background: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.