﻿html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <style>
        /* Базовые стили страницы */
        body, button {
            font-family: 'Helvetica Neue', Segoe UI, Helvetica, Arial, sans-serif;
            font-size: 14px;
        }
        body {
            overflow-y: auto;
            background: #ffffff;
            color: #000000;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .wrapper {
            text-align: center;
            max-width: 400px;
            width: 100%;
            padding: 20px;
        }

        /* Логотип/Картинка */
        header {
            margin-bottom: 30px;
        }
        header .image-url {
            display: block;
            height: 120px;
            width: 120px;
            margin: 0 auto;
            border-radius: 10px;
            object-fit: cover;
        }

        /* Текстовые блоки */
        .headline-text {
            margin-bottom: 10px;
            font-size: 32px;
            font-weight: 300;
        }
        .message-text {
            color: #666;
            font-size: 18px;
            margin-bottom: 30px;
        }

        /* СТИЛИ КНОПОК */
        .button-section {
            display: flex;
            flex-direction: column;
            gap: 15px; /* Расстояние между кнопками */
            align-items: center;
        }
        .button-shape {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 22px; /* Размер текста в кнопке */
            font-weight: bold;
            height: 65px; /* Высота кнопки */
            width: 100%; /* Ширина на весь контейнер */
            max-width: 300px; /* Но не шире 300px */
            border-radius: 15px; /* Закругление краев */
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
            border: none;
        }

        /* Цвета кнопок */
        .btn-green {
            background-color: #92d428;
            color: #ffffff;
        }
        
        /* Измененный синий цвет (Telegram style) */
        .btn-blue {
            background-color: #24A1DE; 
            color: #ffffff;
        }

        /* АНИМАЦИЯ МИГАНИЯ */
        @keyframes blink-animation {
            0% { opacity: 1; }
            50% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        /* Эффект при наведении мышки */
        .button-shape:hover {
            animation: blink-animation 0.5s infinite; 
            transform: scale(1.03); 
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
        }
    </style>
</head>
<body>

    <main class="wrapper">
        <header>
            <!-- Замените ссылку на вашу картинку, если нужно -->
            <img class="image-url" src="https://via.placeholder.com" alt="Logo">
        </header>

        <section class="section">
            <div class="headline-text">Are you 18 years old?</div>
            <div class="message-text">Welcome</div>

            <div class="button-section">
                <!-- ПЕРВАЯ КНОПКА ТЕПЕРЬ СИНЯЯ (btn-blue) -->
                <a href="#" class="button-shape btn-blue">Telegram</a>
                
                <!-- ВТОРАЯ КНОПКА ОСТАЕТСЯ ЗЕЛЕНОЙ ИЛИ ТОЖЕ СИНЕЙ -->
                <a href="#" class="button-shape btn-green">WhatsApp</a>
            </div>
        </section>
    </main>

</body>