<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Демо приглашение #2</title>
        
    </head>
    <body>
        <div class="screen flex col hidden">
            <div class="backscreen roller"></div>

            <div class="titlescreen">
                <div class="titleblock flex col center">
                    <h1 class="name1 hidden fadein-left delay1">Алексей</h1>
                    <div class="amp hidden">&</div>
                    <h1 class="name2 hidden fadein-right delay1">Карина</h1>
                </div>
                <h3 class="invite hidden fadein-scale05">
                    ПРИГЛАШАЕМ ВАС РАЗДЕЛИТЬ
                    <br />
                    С НАМИ САМЫЙ СЧАСТЛИВЫЙ ДЕНЬ
                </h3>
                <div class="date flex row invite hidden fadein-scale0">
                    <div class="left updown">ПЯТНИЦА</div>
                    <div class="center flex col">
                        <div class="month">ФЕВРАЛЬ</div>
                        <div class="day">21</div>
                        <div class="year"> 2025</div>
                    </div>
                    <div class="right updown">15:00</div>
                </div>
            </div>

            <h1 class="dear hidden fadein-bottom">Дорогие родные и друзья!</h1>
            <p class="dear_p hidden fadein-bottom">
                Мы счасиливы пригласить Вас на
                <br />
                важное событие - нашу свадьбу. С
                <br />
                нетерпением ждем встречи с каждым
                <br />
                из Вас, чтобы разделить счастье этого
                <br />
                знаменательного дня.
            </p>
            <div class="calendar_area">
                <div class="title hidden fadein-bottom">
                    <div class="vetkaL bg contain hidden fadein-right"></div>
                    <h1 class="month">Февраль</h1>
                    <div class="vetkaR bg contain hidden fadein-left"></div>
                </div>
            </div>
            <div class="calendar hidden fadein-scale0 fadein-bottom"></div>
            <div class="tree">
                <div class="tO hidden"></div>
                <div class="tT hidden"></div>
            </div>
            <h1 class="margin_t hidden fadein-bottom">Место проведения</h1>
            <div class="place w row flex center icenter">
                <div class="first">
                    <span>
                        Церемония
                        <br />
                        бракосочетания
                    </span>
                </div>
                <div class="vhr"></div>
                <div class="last">
                    <span>
                        ул. Парковая, 68а
                    </span>
                </div>
            </div>
            <div class="place w row flex center icenter">
                <div class="first">
                    <span>
                        Банкет
                    </span>
                </div>
                <div class="vhr"></div>
                <div class="last">
                    <span>
                        ул. Диктатуры Пролетариата, 11
                    </span>
                </div>
            </div>
            <h1 class="margin_t hidden fadein-bottom">Тайминг дня</h1>
            <div class="timing_row flex row center">
                <div class="time">15:00</div>
                <div class="hr"></div>
                <div class="title">
                    Торжественная
                    <br />
                    церемония
                </div>
            </div>
            <div class="timing_row flex row center">
                <div class="time">17:00</div>
                <div class="hr"></div>
                <div class="title">Начало банкета</div>
            </div>
            <h1 class="margin_t hidden fadein-bottom">Пожелания</h1>
            <p class="wishes">
                В качестве подарка будем рады вкладу
                <br />
                в бюджет нашей семьи!
                <br />
                Он точно поможет воплотить нашу
                <br />
                мечту в реальность!
                <br />
                <br />
            </p>
            <div class="lastflwer bg"></div>
            <h1 class="margin_t hidden fadein-bottom">Дресс-код</h1>
            <p class="wishes">
                Для нас главное - ваше присутствие!
                <br />
                Но будем рады, если в своих нарядах Вы
                <br />
                придержитесь палитры нашей свадьбы:
            </p>
            <div class="circles">
                <div class="circle ci1"></div>
                <div class="circle ci2"></div>
                <div class="circle ci3"></div>
                <div class="circle ci4"></div>
                <div class="circle ci5"></div>
            </div>
            <div class="kust">
                <div class="flo1 bg contain"></div>
                <div class="flo2 bg contain"></div>
            </div>
            <h1 class="margin_t hidden fadein-bottom">
                Анкета
                <span>Г</span>
                остя
            </h1>
            <p class="wishes">
                Будем очень признательны, если Вы
                <br />
                сообщите нам о своём присутствии до 21 января 2025г.
            </p>
            <div class="form">
                <h3 class="ank">Ваше имя и фамилия</h3>
                <input class="ankinput" id="guestName" type="text" placeholder="Имя и Фамилия" />
                <h3 class="ank">Подтвердите своё присутствие:</h3>
                <input type="radio" name="attendance" value="Я с удовольствием приду" id="yesans" />
                <label for="yesans">Я с удовольствием приду</label>
                <br />
                <input type="radio" name="attendance" value="К сожалению, не смогу" id="noans" />
                <label for="noans">К сожалению, не смогу</label>
                <h3 class="ank">Какой алкоголь Вы предпочитаете?</h3>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option1" value="Шампанское" type="checkbox" />
                        <label for="option1">
                            Шампанское
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option2" value="Красное вино" type="checkbox" />
                        <label for="option2">
                            Красное вино
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option3" value="Белое вино" type="checkbox" />
                        <label for="option3">
                            Белое вино
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option4" value="Коньяк" type="checkbox" />
                        <label for="option4">
                            Коньяк
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option5" value="Виски" type="checkbox" />
                        <label for="option5">
                            Виски
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option6" value="Водка" type="checkbox" />
                        <label for="option6">
                            Водка
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option7" value="Пиво" type="checkbox" />
                        <label for="option7">
                            Пиво
                        </label>
                    </span>
                </div>
                <div class="checker flex row icenter">
                    <span>
                        <input class="checker" name="alcohol" id="option8" value="Не буду пить алкоголь" type="checkbox" />
                        <label for="option8">
                            Не буду пить алкоголь
                        </label>
                    </span>
                </div>
                <button id="sendButton" onclick="sendForm()">Отправить</button>
            </div>
            <h1 class="margin_t">Ждём Вас!</h1>
            <div class="spacer"></div>
        </div>
    </body>
</html>
