Untitled
plain_text
2 months ago
6.3 kB
1
Indexable
Never
<!-- button.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>My Bootstrap Page</title> <!-- Подключаем файлы Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; animation: fadeInAnimation 1s ease-in-out; /* Плавный появление страницы */ } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .bg-image { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; } .top-block { background-image: url("BACK.png"); position: relative; } .bottom-block { background-image: url("White.png"); position: relative; } .text-container { position: absolute; top: 50%; transform: translateY(-50%); color: white; } .text-container h1 { font-size: 36px; line-height: 1.2; } .text-container p { font-size: 18px; line-height: 1.5; } .logo-image { position: absolute; top: 20px; left: 20px; max-width: 100px; } .white-text { color: white; } .btn-oval { border-radius: 50px; padding: 5px 10px; font-size: 18px; width: auto; transition: transform 0.3s, background-color 0.3s; /* Плавная анимация для кнопки "Оставить заявку" */ } .btn-oval:hover { transform: scale(1.1); /* Увеличение кнопки при ховере */ background-color: #E6A94F; /* Изменение цвета кнопки при ховере */ } /* Добавленное CSS-правило */ .col-12 { padding-left: 0; padding-right: 0; width: 100%; } /* New CSS rules for responsiveness and positioning of the burger image */ .burger-image { position: absolute; top: 20px; right: 20px; width: 30px; height: auto; } /* Additional CSS for the images below the text content in the top-block */ .image-container { margin-top: 30px; display: flex; /* Use flexbox to align images horizontally */ } .image-container img { width: 100%; height: auto; margin-bottom: 10px; transition: transform 0.3s; /* Плавная анимация при ховере */ } /* Hover для изображений в image-container */ .image-container img:hover { transform: scale(1.1); /* Увеличение изображения при ховере */ } /* CSS for smaller images on mobile devices */ @media (max-width: 767px) { .image-container img { max-width: 80px; } } .social-button img:hover { transform: scale(1.1); /* Увеличение изображения при ховере */ } /* Плавная анимация для кнопки соцсетей */ .social-button { transition: transform 0.3s; } .social-button:hover { transform: scale(1.1); /* Увеличение кнопки при ховере */ } </style> </head> <body> <div class="bg-image top-block"> <img src="iconLogoWhite1.png" alt="Logo" class="logo-image"> <div class="col-12"> <div class="d-flex justify-content-center"> <p class="fw-bold white-text">Все туры Отзывы Контакты</p> </div> <!-- Remove d-md-none class to make the image visible on all devices --> <img src="Burger.png" alt="Соцсети" class="burger-image"> </div> <div class="container"> <div class="row"> <div class="col-lg-12 text-left mt-5"> <div class="text-container"> <h1 class="display-4">Открой для себя Новую<br>Ирландию</h1> <p class="lead mt-4">Авторские туры по экзотическим уголкам<br>от Ивана Иванова</p> <div class="d-flex align-items-center"> <!-- Заменяем кнопку на ссылку --> <a href="button.php" class="btn btn-primary btn-lg btn-oval" style="background-color: #DD9428;">Оставить заявку</a> <img src="iconPlay 1.png" alt="Play" style="vertical-align: middle; margin-left: 10px; width: 50px; height: 50px; display: inline-block;"> <span style="margin-left: 10px;">Посмотрите <br> видео-отчет <br> 2018-2019</span> </div> <!-- New section for the images below the text content in the top-block --> <div class="row image-container"> <div class="col-4 col-md-4"> <img src="02.png" alt="Image 02" class="horizontal-image"> </div> <div class="col-4 col-md-4"> <img src="3.png" alt="Image 03" class="horizontal-image"> </div> <div class="col-4 col-md-4"> <img src="4.png" alt="Image 04" class="horizontal-image"> </div> </div> <a href="socialmedia.php" class="social-button"> <img src="socseti.png" alt="Соцсети" style="vertical-align: middle; width: 100px; height: auto;"> </a> </div> </div> </div> </div> </div> <div class="bg-image bottom-block"> <div class="container"> <div class="row"> <div class="col-lg-12 text-left mt-5"> <div class="text-container"> <!-- Ваш текст для нижнего блока --> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>