<?php
require_once ‘include/db.php’;
mysqli = new mysqli('localhost', 'root', '17020575', 'тур');

// Перевірка з'єднання
if (mysqli->connect_error) {
die('Помилка з’єднання: ’ . $mysqli->connect_error);
}

?>






<!DOCTYPE html>
<html lang=“ua”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Назва вашої туристичної компанії</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

header {
background-color: #66CDAA;
padding: 15px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}

nav {
display: flex;

}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

nav li {
margin-right: 20px;
color: #933;
}


section.hero {
height: 500px;
width: 100%;
background-image: url(‘https://wide-w.com/wp-content/uploads/2019/01/gora-jeverest.jpg’);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}

section {
padding: 20px;
}

section#about {
border: 2px solid #333;
background-color: #00FA9A;
padding: 20px;
margin: 20px 0;
overflow: hidden;
}

section#about img {
float: left;
margin-right: 20px;
max-width: 300px;
}

section#about p {
margin: 0 0 20px 0;
}

section#best-tour {
text-align: center;
}

section#best-tour h2 {
margin-bottom: 20px;
}

section#best-tour .feature {
display: inline-block;
margin: 0 20px 20px 0;
border: 10px solid #F0E68C;
padding: 10px;
width: calc((100% - 60px) / 3);
box-sizing: border-box;
}

section#best-tour img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}



section#route-example {


text-align: center;
background-color: #FFF8DC;
}

section#route-example .route-block {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
border: 2px solid #DCDCDC; /* Товщина та колір рамки /
padding: 10px; / Внутрішній відступ між текстом і рамкою /
margin-bottom: 10px; / Зовнішній відступ між блоками /
}

section#route-example .route-block img{
width: 500px;
height: 400px;
}
section#route-example .route-block p {

width: 48%; / Ширина блоків /
margin: 0 2%; / Відступи між блоками /
box-sizing: border-box;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
section#accommodation {
text-align: center;
background-color: #F0FFFF;
}

/ Залиште решту стилів без змін /
section#accommodation .hotel-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40px;
border: 2px solid #DCDCDC;
padding: 10px;
margin-bottom: 10px;
}

/ Залиште решту стилів без змін /
section#accommodation .hotel-block img {
width: 400px;
height: 300px;
}

/ Залиште решту стилів без змін /
section#accommodation .hotel-block p {
width: 70%;
margin: 20px 0;
box-sizing: border-box;
}
#book-tour {
background-color: #F0FFF0;
text-align: center;
padding: 50px 0;
}

.book-button-container {
display: inline-block;
}

.book-button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}

.book-button:hover {
background-color: #45a049;
}
#testimonials {
text-align: center;
padding: 50px;
}

.testimonial-container {
display: flex;
justify-content: space-around; / Щоб блоки були розташовані більш рівномірно /
flex-wrap: wrap;
gap: 20px;
}

.testimonial {
background-color: #ffffff;
border: 1px solid #eaeaea;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
flex-basis: calc(30% - 40px); / Збільшено відступи для кращого розміщення /
margin: 10px;
flex-grow: 1;
}

.testimonial blockquote {
font-style: italic;
color: #555;
}

.testimonial-author, .tour-date {
font-weight: bold;
font-size: 0.9em;
color: #333;
text-align: right;
margin-top: 15px;
}
#map {
margin: 20px;
padding: 20px;
}
#map h2 {
text-align: center;
margin-bottom: 20px;
}
#map iframe {
width: 100%; / Щоб карта була респонсівною, встановіть ширину в 100% /
min-height: 300px; / Встановіть мінімальну висоту, щоб іфрейм виглядав належним чином /
border: none; / Заберіть межу /
}

#contacts {
background-color: #f8f8f8;
padding: 50px 0;
}

#contacts .container {
max-width: 1200px; / Встановіть максимальну ширину для контейнера /
margin: 0 auto; / Вирівнювання контейнера по центру /
padding: 0 15px; / Відступи зі сторін, щоб забезпечити простір на малих екранах /
}

#contacts h2 {
text-align: center; / Заголовок по центру /
margin-bottom: 15px; / Відступ під заголовком /
}

#contacts p {
text-align: center; / Текст по центру /
margin: 10px 0; / Відступи між параграфами /
font-size: 1rem; / Розмір шрифту для параграфів /
}

#contacts a {
color: #007bff; / Колір посилань /
text-decoration: none; / Прибрати підкреслення на посиланнях /
}

#contacts a:hover {
text-decoration: underline;
}

footer{
height: 25px;
}
</style>
</head>

<body>

<header>
<div>
<img src=“your-logo.png” alt=“Логотип”>
</div>
<nav>
<ul>
<li><a href=“#about”>Про нас</a></li>
<li><a href=“newpage.html”>Оформити тур</a></li>
</ul>
</nav>
</header>

<section class=“hero”>
<h1>Ласкаво просимо в нашу туристичну компанію<br>
Тур від агентства “хххххххх”.</h1>
</section>

<section id=“about”>
<img src=“https://seo-evolution.com.ua/imgfly/public/Ej5uSGigkkhfGF9Sq2yBC9xGtsPNaiiNQ7uy0W4i.jpg?h=600” alt=“Про нас”>
<p>
<h1>Фантастична подорож для вас!</h1><br>
</p>
<p>Чому б не відсвяткувати свою наступну літню відпустку в Європі! Відвідайте замки, парки, пляжі під час цього чудового туру… У старій Європі є безліч меморіалів і музеїв з античною архітектурою. Долина Луари відома на весь світ своїми замками,
Рим – автентичною архітектурою, а Амальфі чудово підходить для пляжного відпочинку.</p>

<p>Південь Франції та більша частина сусідньої Італії є майданчиками для захоплення. Це зони, які здавна активізували почуття розкоші та поблажливості. Тепер у вас є чудова нагода випробувати все на собі.</p>
</section>

<section id=“best-tour”>
<h2>Чому наш тур найкращий?</h2>
<div class=“feature”>
<img src=“feature1.jpg” alt=“Особливість 1”>
<h2>
<p>Наша увага зосереджена на вас</p>
</h2>
<p>Наші г

іди та водії з радістю зустрінуть Вас,
детально дадуть відповідь на всі запитання та поділяться з Вами своїми знаннями.</p>
</div>
<div class=“feature”>
<img src=“feature2.jpg” alt=“Особливість 2”>
<h2>
<p>Розстеліться і розслабтеся</p>
</h2>
<p>Відвідайте наші розкішні пляжі, розтягніться на шезлонгах і насолодіться незабутніми враженнями!</p>
</div>
<div class=“feature”>
<img src=“feature3.jpg” alt=“Особливість 3”>
<h2>
<p>Швидкі реєстрації</p>
</h2>
<p>Процес заселення та виїзду в кожному готелі тепер більш швидкий і приємний. Реєстрація займає кілька хвилин.</p>
</div>
<div class=“feature”>
<img src=“feature4.jpg” alt=“Особливість 4”>
<h2>
<p>Особистий досвід крупним планом</p>
</h2>
<p>Дослідіть кожну пам’ятку уважно та особисто. У вас буде достатньо часу, щоб задати питання про те, що вас цікавить.</p>
</div>
<div class=“feature”>
<img src=“feature5.jpg” alt=“Особливість 5”>
<h2>
<p>Цінуйте кожну мить</p>
</h2>
<p>
Цінуйте кожну мить
Насолоджуйтесь кожною миттю відпустки! Скуштуйте автентичну французьку кухню та робіть фотографії, де б ви не були, щоб зберегти свої спогади.</p>
</div>
<div class=“feature”>
<img src=“feature6.jpg” alt=“Особливість 6”>
<h2>
<p>Розслаблюючий темп</p>
</h2>
<p>Досліджуйте Європу у своєму власному темпі. Зрештою,
особливо нікому не подобається бути частиною стада
у вашій довгоочікуваній відпустці.</p>
</div>
</section>



<section id=“route-example”>
<h2>Приклад маршруту</h2>
<div class=“route-block”>
<img src=“https://res2.weblium.site/res/weblium/58d4b086c50d470001caaea8_optimized_1560.jpeg.webp” alt=“Маршрут 1”>
<p><b>Прибуття в Париж, Франція</b><Br>

Після прибуття в аеропорт Парижа вас зустріне наш водій і відвезе до одного з наших готелів з
найвищим рейтингом.
Не забувайте, що ваш виліт буде з Ніцци. Реєстрація та отримання квитка на автобус.</p>
</div>
<div class=“route-block”>
<p><b>Від Парижа до долини Луари</b><Br>

Цього дня ви здійсните екскурсію 3 найпопулярнішими замками, розташованими в долині Луари.
Королівський замок Шамбор є найбільш вражаючим, масивним і відвідуваним.</p>
<img src=“https://res2.weblium.site/res/5cefbc481583c10023c7be47/5cfe420deb3a7e0023924973_optimized_1560.webp” alt=“Маршрут 2”>
</div>
<div class=“route-block”>
<img src=“https://res2.weblium.site/res/weblium/58d4b091c50d470001caaeaa_optimized_1560.jpeg.webp” alt=“Маршрут 3”>
<p><b>Рим і узбережжя Амальфі</b><Br>

Італія – це архітектура, історія, чудова кухня та вражаючі пляжі. Ми подорожуватимемо через Рим і
Венецію до узбережжя Амальфі з
чудовими можливостями для прийняття сонячних ванн і купання в найчистішому
Середземному морі.</p>
</div>
</section>
<section id=“accommodation”>
<h2>Розміщення</h2>

<div class=“hotel-block”>
<img src=“https://res2.weblium.site/res/5cefbc481583c10023c7be47/5cf11a925a3fa20023e79474_optimized_1396.webp” alt=“Розміщення 1”>
<p><b>Готель “Елегантний”</b><br>
Зручне та комфортабельне розміщення в центрі міста. Неймовірний вид з вікна, вишуканий сервіс та
найкращі умови для вашого відпочинку.</p>
</div>

<div class=“hotel-block”>
<img src=“https://res2.weblium.site/res/5cefbc481583c10023c7be47/5cf11b425a3fa20023e79480_optimized_1398_c1398x929-0x0.webp” alt=“Розміщення 2”>
<p><b>Спа-готель “Оазис релаксу”</b><br>
Відмінний вибір для тих, хто цінує спокій та розкіш. Затишні номери, великий спа-центр та
висококласний сервіс.</p>
</div>

<div class=“hotel-block”>
<img src=“https://res2.weblium.site/res/5cefbc481583c10023c7be47/5cf11bbf5a3fa20023e79560_optimized_1395_c1395x930-0x0.webp” alt=“Розміщення 3”>
<p><b>Апартаменти “Затишні куточки”</b><br>
Власний простір та повна автономія. Затишні апартаменти з кухнею та усіма зручностями для вашого
комфорту.</p>
</div>
</section>


<section id=“book-tour”>
<div class=“book-button-container”>
<a href=“newpage.html” class=“book-button”>Оформити тур</a>
</div>
</section>

<section id=“testimonials”>
<h2>Відгуки</h2>
<div class=“testimonial-container”>
<div class=“testimonial”>
<blockquote>

«Ми проводили екскурсію з нашим гідом Хелен Стоун. Вона була справжнім професіоналом, і нам дуже пощастило, що ми були з нею весь тур. Вона розповіла нам багато цікавого про історію Парижа та Риму. Хелен допомогла щоб замовити вечерю з чоловіком в одному з найпопулярніших ресторанів. Дякуємо за чудовий відпочинок!“
</blockquote>
<p class=“testimonial-author”>Дженніфер - Керні, штат Небраска</p>
<p class=“tour-date”>Тур: 03.06.24</p>
</div>

<div class=“testimonial”>
<blockquote>

“Подорож виявилася навіть більш захоплюючою, ніж я очікувала. Ми з чоловіком завжди хотіли відвідати Париж, найромантичніше місце в світі. Дякую за продуманий план нашої відпустки. Все було просто ідеально - починаючи з екскурсій. справді хороше харчування та помешкання. Усі туристичні агенти дуже обізнані та привітні. Велике спасибі!”




</blockquote>
<p class=“testimonial-author”>Аманда-Вашингтон, округ Колумбія</p>
<p class=“tour-date”>Тур: 14.05.24</p>
</div>
<div class=“testimonial”>
<blockquote>
«Мені найбільше запам’яталася поїздка до Парижа з Хелен. Вона зробила все можливе, щоб виправдати всі мої очікування. Я побачив усе, що планував, і ще один плюс: у мене було багато часу, щоб відпочити та відпочити біля басейну. Дуже рекомендую цю туристичну агенцію всім, хто потребує ідеально спланованої відпустки. Велике спасибі Хелен!”




</blockquote>
<p class=“testimonial-author”>Алекс-Дріпінг-Спрінгс, Техас</p>
<p class=“tour-date”>Тур: 05.12.24</p>
</div>
<div class=“testimonial”>
<blockquote>

“Наша подорож до Парижа перевершила всі очікування. Від романтичних вуличок до неперевершених видів, ми насолоджувалися кожним моментом. План відпустки був докладно продуманий, екскурсії захоплюючі, а гастрономічний досвід просто неймовірний. Велике спасибі за ідеально проведений відпочинок!”


</blockquote>
<p class=“testimonial-author”>Амелія, Сіетл, Вашингтон</p>
<p class=“tour-date”>Тур: 05.07.24</p>
</div>

<div class=“testimonial”>
<blockquote>

“Ми завжди мріяли відвідати Париж, і наша подорож перевершила усі наші фантазії. Від кожної екскурсії до вражаючих пам’яток - все було вражаюче. Організація відпустки була ідеальною, від привітних агентів до вишуканого харчування. Дякуємо за незабутні миті!”


</blockquote>
<p class=“testimonial-author”>Наталія і Том, Вашингтон, D.C.</p>
<p class=“tour-date”>Тур: 08.02.24</p>
</div>

<div class=“testimonial”>
<blockquote>

“Наша подорож до Парижа виявилася справжнім райом для нас. Романтичні прогулянки по вуличках, чарівні види з Ейфелевої вежі та вражаючі екскурсії - все перевищило наші очікування. Тур був ідеально спланований, а агенти виявилися чудовими провідниками. Дякуємо за найкращий відпочинок у Парижі!”


</blockquote>
<p class=“testimonial-author”>Девід та Емма, Вашингтон, округ Колумбія</p>
<p class=“tour-date”>Тур: 33.07.24</p>
</div>

</div>
</section>

<section id=“map”>
<h2>Знайдіть нас на карті</h2>
<!-- Тут починається ваш <iframe> код з Google Maps -->
<iframe
src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.687887451887!2d13.377704150979676!3d52.51627494601582!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a851e538dfd437%3A0xcbf4a47b0f80c328!2sBrandenburg Gate!5e0!3m2!1sen!2sde!4v1649677722857!5m2!1sen!2sde”
width=“600” height=“450” style=“border:0;” allowfullscreen=“” loading=“lazy” referrerpolicy=“no-referrer-when-downgrade”>
</iframe>
<!-- Тут закінчується ваш <iframe> код із Google Maps -->
</section>

<section id=“contacts”>
<div class=“container”>
<h2>Контакти</h2>
<p><strong>Адреса:</strong> вул. Велика, 4, м. Київ, Україна</p>
<p><strong>Телефон:</strong> <a href=“tel:+380ххххххх”>+380 ххх ххх ххх</a></p>
<p><strong>Електронна пошта:</strong> <a href="zagrebenukbogdan777@gmail.com
“><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>
</a></p>
</div>
</section>

<footer>
<p>© 2023 Empire of Travel. Усі права захищені.</p>
</footer>



</body>

</html>


newpage.html -<!DOCTYPE html>
<html lang=“ua”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Оформити тур</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #66CDAA;
padding: 15px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
header nav li {
margin-right: 20px;
color: #fff;
}
header nav a {
color: inherit; / Спадкованість кольору лінків /
text-decoration: none;
}
.book-form {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
.book-form label, .book-form input, .book-form select {
display: block;
width: 100%;
padding: 10px;
margin: 10px auto;
}
.book-form input[type=“submit”] {
background-color: #4CAF50;
color: white;
cursor: pointer;
border: none;
border-radius: 5px;
}
/ Додати інші стилі за потреби /
</style>
</head>
<body>
<header>
<div><a href=“index.html”><img src=“your-logo.png” alt=“Логотип”></a></div>
<nav>
<ul>
<li><a href=”#about">Про нас</a></li>
<li><a href=“#book-tour”>Оформити тур</a></li>
</ul>
</nav>
</header>

<main>
<h1 style=“text-align: center;”>Замовлення</h1>
<form class=“book-form” action=“path_to_your_server_script” method=“post”>
<label for=“fullName”>ПІБ</label>
<input type=“text” id=“fullName” name=“fullName” required>

<label for=“phone”>Телефон</label>
<input type=“tel” id=“phone” name=“phone” required>

<label for=“email”>Email*</label>
<input type=“email” id=“email” name=“email” required>

<label for=“departureDate”>Дата відправлення</label>
<input type=“date” id=“departureDate” name=“departureDate”>

<label for=“returnDate”>Дата К</label>
<input type=“date” id=“returnDate” name=“returnDate”>

<label for=“departureCity”>Місто відправки</label>
<input type=“text” id=“departureCity” name=“departureCity”>

<label>Діти</label>
<select name=“children”>
<option value=“no”>Ні</option>
<option value=“yes”>Так</option>
</select>

<label>Харчування</label>
<select name=“food”>
<option value=“no”>Ні</option>
<option value=“yes”>Так</option>
</select>

<label for=“countries”>Країни</label>
<input type=“text” id=“countries” name=“countries” placeholder=“Країни”>

<label for=“travelType”>Вид подорожі</label>
<input type=“text” id=“travelType” name=“travelType” placeholder=“Вид подорожі”>

<label for=“hostel”>Хостел</label>
<input type=“text” id=“hostel” name=“hostel” placeholder=“Хостел”>

<label for=“transport”>Транспорт</label>
<input type=“text” id=“transport” name=“transport” placeholder=“Транспорт”>

<input type=“submit” value=“Підтвердити”>
</form>
</main>

<footer>
<!-- Вміст футера -->
</footer>

</body>
</html>
я маю бд в mysql, хочу щоб дані передавалися туди