Модуль 1

Начало работы

Основной текст

Дополнительный

Основной текст

Дополнительный

Основной текст

Дополнительный

Код тут

Смотреть
1
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
2
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
3
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
4
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch

<!--Табы тарифов-->
<script>
$(document).ready(function() {
    var hidden = ['#rec410352131', '#rec410329132', '#rec410329193', '#rec410343707'];
    $(hidden[0]).addClass('tarif');
    var i = 0;
    var number = 1;
    for (let i = 1; i < hidden.length; i++) {
        $(hidden[i]).addClass('tarif hidden');
    };
    $('.choise-tarif').wrapAll('<div class="filter-wrapper">')
    $('.filter-wrapper .choise-tarif:first').addClass('active');
    $('.filter-wrapper .choise-tarif').click(function(e) {
        e.preventDefault();
        number = $('.filter-wrapper .choise-tarif').index(this);
        $('.filter-wrapper .choise-tarif').removeClass('active');
        $('.filter-wrapper .choise-tarif:eq(' + number + ')').addClass('active');
        $('.tarif').addClass('hidden');
        $(hidden[number]).removeClass('hidden');
        $(hidden[number]).removeClass('hidden');
        setTimeout(function() {
            t_lazyload_update()
        }, 100);
    });
});
</script>
<style>
    :root {
        --btn-bg: #000; /*цвет фона кнопок*/
        --btn-bg-active: #fff; /*цвет фона активной кнопки*/
        --btn-bg-hover: #fff; /*цвет фона кнопки при наведении мыши*/
        --btn-bg-active-hover: #fff; /*цвет фона активной кнопки при наведении мыши*/
        --btn-color: #fff; /*цвет текста*/
        --btn-color-active: #000; /*цвет текста активной кнопки*/
        --btn-color-hover: #000; /*цвет текста  при наведении мыши*/
        --btn-color-active-hover: #000; /*цвет текста активной кнопки активной кнопки*/
        --font-family: 'Helvetica',sans-serif; /*введи свой шрифт*/
        --iner:10px; /*внутренний отступ*/
        --radius:10px; /*скругление*/
        --h-size: 20px; /*размер шрифта основного текста*/
        --span-size: 14px; /*размер шрифта доп текста*/
        --h-m-b: 10px;/*отступ основного текста*/
    }
    @media screen and (max-width: 1200px) {
        :root {
            --h-size: 16px;
            --span-size: 12px;
            --h-m-b: 10px;/*отступ основного текста*/
        }
    }
    @media screen and (max-width: 960px) {
        :root {
            --h-size: 16px;
            --span-size: 12px;
            --h-m-b: 10px;/*отступ основного текста*/
        }
    }
    @media screen and (max-width: 640px) {
        :root {
            --h-size: 16px;
            --span-size: 12px;
            --h-m-b: 10px;/*отступ основного текста*/
        }
    }
    @media screen and (max-width: 480px) {
        :root {
            --h-size: 16px;
            --span-size: 12px;
            --h-m-b: 10px;/*отступ основного текста*/
        }
    }
    .hidden {
        display: none !important;
    }
    /*Кнопки*/
    .choise-tarif .tn-atom {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--btn-bg);
        padding: var(--iner);
        box-sizing: border-box;
        color: var(--btn-color);
        font-family: var(--font-family);
        cursor:pointer;
        height: 100%;
        width: 100%;
        transition: all .3s ease-in-out;
    }
    .choise-tarif h4 {
        font-size: var(--h-size);
        margin-bottom: var(--h-m-b);
    }
    .choise-tarif span {
        font-size: var(--span-size);
    }
    .choise-tarif.active .tn-atom {
        background: var(--btn-bg-active);
        color: var(--btn-color-active);
    }
    .choise-tarif .tn-atom:hover {
        background: var(--btn-bg-hover);
        color: var(--btn-color-hover);
    }
    .choise-tarif.active .tn-atom:hover {
        background: var(--btn-bg-active-hover);
        color: var(--btn-color-active-hover);
    }
</style>
Made on
Tilda