Хочу попробовать себя в вёрстке сайтов. Нашел интересный макет: https://www.behance.net/gallery/72919739/Educational-digital-project-about-Renaissance-Era
Меня заинтересовала кривая с иконками (в приложении выделена зеленым цветом), как я понимаю иконки, это ссылки на страницы.
Как считаете можно как-то сделать похожий слайдер? Я не знаю js. Может есть какие-нибудь готовые решения? Буду благодарен за любую полезную информацию.
Добавить комментарий
|
1 ответ
Ну как вариант
.list {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 1C2 1 2 3 4 3C6 3 6 1 8 1' stroke='%23FF0000' stroke-width='0.1' fill='none'/%3E%3C/svg%3E") repeat-x left center / calc(100% / 2.85) auto;
}
.list .item {
display: flex;
align-items: center;
}
.list .item:nth-child(odd) {
flex-direction: column;
}
.list .item:nth-child(odd) .avatar {
margin-bottom: 1em;
}
.list .item:nth-child(even) {
flex-direction: column-reverse;
}
.list .item:nth-child(even) .avatar {
margin-top: 1em;
}
.list .item .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: green;
}
.list .item .name {
width: 50px;
height: 1em;
background: green;
}
<div class="list">
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
<div class="item">
<div class="avatar"></div>
<div class="name"></div>
</div>
</div>