Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как оформить TX16N и добавить картинку справа в Tilda

Как оформить TX16N и добавить картинку справа в Tilda

1
Создали блок TX16N 7 колонок
2
Добавили код в блок другое Т123
Библиотека для примера: стиль для аккордеона

<style>
.t585__accordion {
    margin-bottom: 25px;
}
.t585__header {
    border: none !important;
    background-color: #fff;
    border-radius: 45px;
    padding: 20px 60px 20px 110px;
    box-shadow: 0 10px 20px #d2d2d2;
}
.t585__border {
    display: none;
}
.t585__icon {
    right: 20px;
}
.t585__content {
    background-color: #fff;
    margin: -10px auto 0 5px;
    padding: 0 25px 0;
    width: calc(100% - 70px);
    border-radius: 10px;
    box-shadow: 0 4px 10px #e2e2e2;
}
.t585__textwrapper {
    padding-top: 35px;
}
.t585__text {
    margin-bottom: 10px;
}
.t585__header:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3137-3839-4363-a266-316163373138/right-arrow-solid-sq.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 99;
    left: 0px;
    top: -6px;
}
@media screen and (max-width:640px){
.t585__title{ font-size: 18px}
.t585__header:before {
    width: 65px;
    height: 65px;
    left: -10px;
    top: 0px;
}
.t585__header {padding: 20px 60px 20px 70px}
}
@media screen and (max-width:400px){
.t585__header:before {display:none;}
.t585__header { padding: 20px 60px 20px 30px}
}
</style>
Библиотека для примера: картинка справа

<style>
.t585 .t-container{
  display: flex;
  align-items: center;    
}
.lfaccord , .rhaccord{ width:50%;}
.rhaccord{
    clear: both;
    background-image: url(https://static.tildacdn.com/tild3237-3637-4365-b334-356365643738/77755e565ef7ddbff254.png);
    height: 500px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.t585 .t-col{max-width: calc(100% - 40px)}
@media screen and (max-width:960px){
 .rhaccord{display:none;}
 .lfaccord{width:100%;}
 .t585 .t-col {max-width: inherit;}
}
</style>

<script>
$(document).ready(function() {
$('.t585 .t-container .t-col').wrapAll('<div class="lfaccord acccont"></div>');
$('.t585 .t-container').append('<div class="rhaccord acccont"></div>');
});
</script>

Html code will be here

Made on
Tilda