Untitled

unknown
plain_text
2 months ago
6.3 kB
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>