Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
<style>
  .shirina{
   background:none !important; right: 0 !important;left: 0 !important;}  
  .parpadding{padding:0 !important;}
  .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup { z-index: 9999999 !important; }
  </style>
<script>
$( document ).ready(function() {
var ZeroPopID = '#rec166004976';//ID Zero
var PopWindID = '#rec166004978';//ID PopUp окна BF503

   $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding");
   $('a[href^="#popupzero"]').click(function(e) {e.preventDefault();
   setTimeout(function(){window.dispatchEvent(new Event('resize')); }, 10);
   });
   $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e){e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));});
   $(ZeroPopID).delegate(".t-submit", "click", function(){
   setTimeout(function(){if($(ZeroPopID+" .t-form").hasClass("js-send-form-success")){t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))}}, 1000);});
});  
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){
//Полуаем нужные элементы
let popupBtn =  document.querySelectorAll('[href^="#uc-zw"]');
let popupZero = document.querySelectorAll('div[class*="uc-zw-"]');
let mainPopup = document.querySelector('.uc-main-popup');

if(popupBtn.length&&popupZero.length&&mainPopup){
    let popupCont = mainPopup.querySelector('.t-popup__container');
    let popupCloseIcon = mainPopup.querySelector('.t-popup__close');
    
    //Очищаем popup и получаем ссылку его вызова
    popupCont.innerHTML = '';
    let popupHook = mainPopup.querySelector('.t-popup').getAttribute('data-tooltip-hook');
    
    //Создаём элемент со ссылкой вызова popup
    let popupLink = document.createElement('a');
    popupLink.href = popupHook; popupLink.className = "bf503-zero";
    mainPopup.appendChild(popupLink);

    //Размечаем наши Zero для привязки к нужной ссылке
    for (let i = 0; i < popupZero.length; i++) {
        popupZero[i].classList.add("popup-zero" , "hide-popup-zero");
        
        //Закрываем окно при клике на вне элементов
        popupZero[i].querySelector('.t396__filter').addEventListener('click', function() { popupCloseIcon.click() });
        
        //Закрываем окно при клике на кнопку #popup-close
        setTimeout(function(){
            let closeIcon = popupZero[i].querySelector('a[href="#popup-close"]');
            if(closeIcon != null){
                popupCloseIcon.classList.add("hide-popup-zero");
                closeIcon.addEventListener('click', function(e) {
                    popupCloseIcon.click();e.preventDefault();
                });
            };
        }, 1000);
        
        //Закрываем окно при отправке формы
        popupZero[i].addEventListener('click', function(e){
            let type = e.target.getAttribute('type');
            if(type=="submit"){
                setTimeout(function(){
                    let form = e.target.closest('.t-form');
                    if (form.classList.contains('js-send-form-success')) popupCloseIcon.click();
                }, 1000);
            };
        });
        
        //Добавляем атрибут в виде ссылки
        let classZeroPopup = popupZero[i].getAttribute('class');
        let classArrZeroPopup = classZeroPopup.split(' '); 
        classArrZeroPopup.forEach(function(item, j) {
            if(item.includes('uc-zw-')) {
                popupZero[i].setAttribute('data-zero-popup', item);
                popupZero[i].classList.remove(item);
            };
        });
    };
    
    //Отслеживаем закрытие окна
    let popupShow = mainPopup.querySelector('.t-popup');
    let observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            setTimeout(function(){
                popupShow = mainPopup.querySelector('.t-popup');
                if (!popupShow.classList.contains('t-popup_show')) {
                    let activeZero = mainPopup.querySelector('.active-popup-zero');
                    
                    let frame = activeZero.querySelectorAll('iframe');
                    if(frame.length){frame.forEach(i => i.src = i.src)};
                    
                    let video = activeZero.querySelectorAll('video');
                    if(video.length){video.forEach(i => i.pause())};
                };
            }, 500);
        });
    });
    observer.observe( popupShow, {  attributes: true, attributeFilter: ['class'] });
    
    //Отслеживаем нажатие кнопок для вызова окна
    for (let i = 0; i < popupBtn.length; i++) {
        popupBtn[i].addEventListener('click', function(e) {e.preventDefault();
            let link = (this.getAttribute('href')).replace('#' , '');
            let popupZeroActive = document.querySelector('div[data-zero-popup="'+link+'"]');
            if(popupZeroActive){
                if (!popupZeroActive.hasAttribute("zero-popup-mode")) {
                    popupCont.append(popupZeroActive);
                    popupZeroActive.setAttribute('zero-popup-mode','');  
                };
                let zeroInside = popupCont.querySelectorAll('.popup-zero');
                if(zeroInside){ 
                    zeroInside.forEach(i => i.classList.add("hide-popup-zero"));
                    zeroInside.forEach(i => i.classList.remove("active-popup-zero")) 
                };
                popupZeroActive.classList.remove('hide-popup-zero'); 
                popupZeroActive.classList.add('active-popup-zero'); 
                popupLink.click();
            };
        });
    };
};
});
</script>

<style>
div[class*="uc-zw-"], .hide-popup-zero {
    opacity: 0!important;
    min-height: 0!important;
    max-height: 0!important;
    pointer-events: none!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}
.uc-main-popup .t-popup {padding: 0}
.uc-main-popup .t-popup__container {left:0; right:0}
.tn-atom .t-form__errorbox-wrapper, 
.tn-form__errorbox-popup, 
.t-form-success-popup { z-index: 9999999 !important}
div#tilda-popup-for-error {display: none !important}
</style>
Let's go!
Let's go!
Light tomorrow with today
Always celebrate small wins. Even if you failed at the beginning, it’s okay. You can always start all over again.
About us
Zero block1
Zero block2
create your own block from scratch
LET'S GO!
Zero block3
create your own block from scratch
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
<script>
document.addEventListener("DOMContentLoaded", function(){
//Полуаем нужные блоки
let popupBtn =  document.querySelectorAll('[href^="#uc-zw"]');
let popupZero = document.querySelectorAll('div[class*="uc-zw-"]');
let mainPopup = document.querySelector('.uc-main-popup');

if(popupBtn.length&&popupZero.length&&mainPopup){
    
    let popupCont = mainPopup.querySelector('.t-popup__container');
    let popupCloseIcon = mainPopup.querySelector('.t-popup__close');
    
    //Очищаем popup и и получаем ссылку его вызова
    popupCont.innerHTML = '';
    let popupHook = mainPopup.querySelector('.t-popup').getAttribute('data-tooltip-hook');
    
    //Создаём элемент со ссылкой вызова popup'
    let popupLink = document.createElement('a');
    popupLink.href = popupHook; popupLink.className = "bf503-zero";
    mainPopup.appendChild(popupLink);

    //Размечаем наши Zero для привязки к нужной ссылке
    for (let i = 0; i < popupZero.length; i++) {
        popupZero[i].classList.add("popup-zero" , "hide-popup-zero");
        
        //Закрываем окно при клике на вне элементов
        popupZero[i].querySelector('.t396__filter').addEventListener('click', function() { popupCloseIcon.click() });
        
        //Закрываем окно при клике на кнопку #popup-close
        setTimeout(function(){
            let closeIcon = popupZero[i].querySelector('a[href="#popup-close"]');
            if(closeIcon != null){
                popupCloseIcon.classList.add("hide-popup-zero");
                closeIcon.addEventListener('click', function(e) {
                    popupCloseIcon.click();e.preventDefault();
                });
            };
        }, 1000);
        
        //Закрываем окно при отправки формы
        popupZero[i].addEventListener('click', function(e){
            let type = e.target.getAttribute('type');
            if(type=="submit"){
                setTimeout(function(){
                    let form = e.target.closest('.t-form');
                    if (form.classList.contains('js-send-form-success')) popupCloseIcon.click();
                }, 1000);
            };
        });
        
        //Добавляем атрибут в виде ссылки
        let classZeroPopup = popupZero[i].getAttribute('class');
        let classArrZeroPopup = classZeroPopup.split(' '); 
        classArrZeroPopup.forEach(function(item, j) {
            if(item.includes('uc-zw-')) {
                popupZero[i].setAttribute('data-zero-popup', item);
                popupZero[i].classList.remove(item);
            };
        });
    };
    
    //Отслеживаем закрытие окна
    let popupShow = mainPopup.querySelector('.t-popup');
    let observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            setTimeout(function(){
                popupShow = mainPopup.querySelector('.t-popup');
                if (!popupShow.classList.contains('t-popup_show')) {
                    let activeZero = mainPopup.querySelector('.active-popup-zero');
                    
                    let frame = activeZero.querySelectorAll('iframe');
                    if(frame.length){frame.forEach(i => i.src = i.src)};
                    
                    let video = activeZero.querySelectorAll('video');
                    if(video.length){video.forEach(i => i.pause())};
                };
            }, 500);
        });
    });
    observer.observe( popupShow, {  attributes: true, attributeFilter: ['class'] });
    
    //Отслеживаем нажатие кнопок для вызова окна
    for (let i = 0; i < popupBtn.length; i++) {
        popupBtn[i].addEventListener('click', function(e) {e.preventDefault();
            let link = (this.getAttribute('href')).replace('#' , '');
            let popupZeroActive = document.querySelector('div[data-zero-popup="'+link+'"]');
            if(popupZeroActive){
                if (!popupZeroActive.hasAttribute("zero-popup-mode")) {
                    popupCont.append(popupZeroActive);
                    popupZeroActive.setAttribute('zero-popup-mode','');  
                };
                let zeroInside = popupCont.querySelectorAll('.popup-zero');
                if(zeroInside){ 
                    zeroInside.forEach(i => i.classList.add("hide-popup-zero"));
                    zeroInside.forEach(i => i.classList.remove("active-popup-zero")) 
                };
                popupZeroActive.classList.remove('hide-popup-zero'); 
                popupZeroActive.classList.add('active-popup-zero'); 
                popupLink.click();
            };
        });
    };
};
});
</script>

<style>
div[class*="uc-zw-"], .hide-popup-zero {
    opacity: 0!important;
    min-height: 0!important;
    max-height: 0!important;
    pointer-events: none!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}
.uc-main-popup .t-popup {padding: 0}
.uc-main-popup .t-popup__container {left:0; right:0}
.tn-atom .t-form__errorbox-wrapper, 
.tn-form__errorbox-popup, 
.t-form-success-popup { z-index: 9999999 !important}
div#tilda-popup-for-error {display: none !important}
</style>
<style>
    a[href="#msum"] , a[href="#ovsum"] {pointer-events:none;}
</style>
<script>
    $( document ).ready(function() {
    //Значение процента    
    let percentArr = [ 0.01 , 1 , 5 , 11 , 17];
    
    function showRes(){
      
        let place = $('select[name="percent"]')[0].selectedIndex;
         
         let percent = percentArr[place];
         
         let summa = $('input[name="summa"]').next('.t-range__value-txt').html();
         let srok = $('input[name="srok"]').next('.t-range__value-txt').html();
         let monthPercent = percent/100/12;
         //Возведение в степень
         let degree = Math.pow( 1+monthPercent , -srok);
         let monthCredit = summa*(monthPercent/(1-degree));
         let overCredit = monthCredit*srok-summa
         //Выводим итоги в текст
         monthCredit = monthCredit.toFixed();
         overCredit = overCredit.toFixed();
         monthCredit = monthCredit.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
         overCredit = overCredit.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');   
         $('a[href="#msum"]').html(monthCredit+' руб.');
         $('a[href="#ovsum"]').html(overCredit+' руб.');
         //Добавляем данные в форму
         $('input[name="Ssumma"]').val(summa);
         $('input[name="Ssrok"]').val(srok);
         $('input[name="Spercent"]').val(percent);
         $('input[name="Smsum"]').val(monthCredit);
         $('input[name="Sovsum"]').val(overCredit);  
        
    };
    
    setTimeout(function(){ showRes();
        $(".tn-atom__form").on('change input', "input, select", function() { showRes() });        
    }, 1500);
    

});
</script>
Made on
Tilda