Надеюсь, вы не делаете блок, а потом судорожно под него адаптив пишите, как некоторые товарищи?
Как вариант, можно сначала набросать структуру, а потом оформлять, но это если у вас в голове структура выстраивается хотя бы на 90%.
используйте готовые css/js либы.
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному.
Главное, что бы в вашей разметке самих блоков, с которых оул делает слайды, было на 1 больше чем количество итемов, указанных в коде. Или просто добавьте еще парочку
<section class="partners">
<div class="container">
<p class="partners__title">Наши партнеры</p>
<div class="partners__slider owl-carousel">
<div class="partners__item item">
<img class="partners__image" src=" img/partners-1.png" alt="Royal tulip">
</div>
<div class="partners__item item">
<img class="partners__image" src=" img/partners-2.png" alt="Avrora holding">
</div>
<div class="partners__item item">
<img class="partners__image" src=" img/partners-3.png" alt="kasp bank">
</div>
<div class="partners__item item">
<img class="partners__image" src=" img/partners-4.png" alt="OBIS">
</div>
<div class="partners__item item">
<img class="partners__image" src=" img/partners-5.png" alt="The Ritz-Carlton">
</div>
<div class="partners__item item">
<img class="partners__image" src=" img/partners-6.png" alt="Paris tower">
</div>
</div>
</div>
</section>.partners {
padding-top: 40px;
padding-bottom: 7px;
}
.container {
max-width: 1230px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.partners .container {
padding-left: 30px;
padding-right: 30px;
}
.partners__title {
position: relative;
display: inline-block;
margin: 0;
margin-left: 30px;
margin-bottom: 47px;
color: #1b1b1b;
font-size: 30px;
font-weight: 700;
line-height: 32px;
text-transform: uppercase;
}
.partners__title::after {
position: absolute;
content: '';
bottom: -10px;
left: 0;
width: 100%;
height: 3px;
background-color: #285e8a;
}
.partners .owl-item {
height: 125px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.partners__image {
max-height: 125px;
width: auto !important;
max-width: none !important;
}
Посмотрела портфолио - разные сайты. Есть простые, есть сложные.
Что-то типа такого https://projects.invisionapp.com/share/FESQ62JGBDK...
Это в моем понимании средне сложное