HTML

HTML Tips

• Используй семантику:
  • Все блоки оборачивай в <section></section>;
  • Используй заголовки h1-h6 где это нужно;
  • Текст всегда в <p></p>;
• Итерируемые блоки пиши через Функции рендера шаблонов;
• Правильно работай с графикой. Для лучшего понимания изучи Доклад Яндекса;
• Используй lazy-load картинок, если они не на первом экране;
• Подключай и настраивай все сторонние скрипты в блоке Custom CSS\JS в конце лендинга;
• Используй defer\async при загрузке скриптов;
• Разделяй все логические блоки на отдельные блоки T123 в Т;
• Atomic CSS + BEM. Детальнее в разделе CSS;
• Пиши разметку с правилом mobilefirst;
• Главное на рекламных лендингах - формы. Всегда тестируй и проверяй их;

HTML шаблоны

• Блок родитель

<section class="section_program pd-main">
    <div class="container">
      <!-- some beautiful code... -->
    <div>
<section>

• Графика

<picture class="ctr_img">
    <source media="(max-width: 768px)" srcset="">
    <source media="(min-width: 768px)" srcset="">
    <img loading="lazy" decoding="async" class="pointer-events" src="" alt="">
</picture>

• Бегущая строка

<div class="marquee relative uppercase fw900 pointer-events">
    <div class="track absolute">
        {TEXT}
    </div>
</div>

<style>
    .marquee {
        width: 100vw;
        max-width: 100%;
        font-size: 50px;
        height: 60px;
        overflow-x: hidden;
        letter-spacing: .03em;
    }

    .track {
        white-space: nowrap;
        will-change: transform;
        animation: marquee 35s linear infinite;
        color: #141414;
        -webkit-text-stroke-width: 2px;
        letter-spacing: .03em;
        -webkit-text-stroke-color: var(--main-color);
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }
</style>

• Слайдер с фото

<section class="section_slider pd-main">
    <div class="slider_section">
        <div class="flex align-center">
            <h3 class="title">
               {TITLE}
            </h3>
            <div class="movedArrow">
                <!-- moved arrow js -->
            </div>
        </div>
        <div class="slider_item">

            <div class="splide {customClassName} relative">
                <div class="splide__track">
                    <ul class="splide__list {customClassName}-js">
                        <!-- render js -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // array of items
        const arrayItems = ['',''];

        const sliderItem = arrayItems.map(function (photo) {
            return photo
        });

        // insert modified items
        const parent = document.querySelector('.items-feedback-js');
        parent.insertAdjacentHTML('afterbegin', sliderItem.join(' '));
    </script>


    <!-- to footer -->
    <link rel="stylesheet" href="https://forstas.bizconstructor.com/tilda-assets/src/libs/splide.min.css">
    <script src="https://forstas.bizconstructor.com/tilda-assets/src/libs/splide.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // some settings
            new Splide('{customClassName}'}).mount();

            // move arrows to title
            const modevArrows = document.querySelector('.movedArrow');
            const arrows = document.querySelector('{customClassName} .splide__arrows');

            modevArrows.replaceWith(arrows);
        });
    </script>
</section>

• Первый экран

<section class="section_hero relative">
    <div class="container">
        <div class="hero_items flex-d align-center-d space-between-d">
            <div class="hero_item">
                <div class="type-event flex align-center sm-small-text">
                    <span class="type-event-icon border-color border-color-two active_color-two">Вебинар</span>
                    <span class="block type-event-text">для собственников бизнеса</span>
                </div>
                <div class="type-title">
                    <h1 class="title-text uppercase default-spacing no-break-text">
                        <span class="active_color no-break-text">Должностная инструкция</span> <br> собственника бизнеса
                    </h1>
                </div>
                <div class="fix-width-hero">
                    <div class="type-description">
                        <h2 class="type-description-item sub-color fw500 default-text border-color">Превращайте рабочее
                            время <br> в результаты компании</h2>
                    </div>
                    <div class="type-info-list">
                        <ul class="no-list-style flex space-between fw900 lg-small-text active_color">
                            <li class="cDate"></li>
                            <li class="cDuration"></li>
                            <li class="cLocation"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="hero_item">
                <div class="card relative">
                    <form class="form__fields zoho_url" method="POST"
                        action="https://crm-oz.constructor.biz.ua/landing/save">
                        <h5 class="form__title lg-medium-text">Регистрация</h5>
                        <div class="form__field">
                            <label class="block sm-small-text sub-color" for="phone-h">Телефон</label>
                            <input class="lg-small-text w100" type="tel" name="phone" id="phone-h" required autocomplete="tel">
                        </div>
                        <button class="button button-color button--submit send-form w100">Принять участие</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

Header, Footer лежат так же в репозитории.

• CSS
• JavaScript