<!-- Include Bootstrap Tour CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.min.css">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.highlight {
background-color: #f0f8ff;
padding: 10px;
border: 2px solid #007BFF;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
This is a simple website tour using Bootstrap Tour plugin. Click "Start Tour" to begin!
Start Tour <hr>
<h2 id="tourStep1" class="highlight">Step 1: Learn More About Us</h2>
<p>This section gives you an introduction to our website and our services.</p>
<h2 id="tourStep2" class="highlight">Step 2: Check Our Features</h2>
<p>We offer a variety of features designed to help you get the most out of our website.</p>
<h2 id="tourStep3" class="highlight">Step 3: Contact Us</h2>
<p>If you have any questions, feel free to reach out via our contact form or customer support.</p>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<!-- Include Bootstrap Tour JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js"></script>
<script>
// Define the tour
var tour = new Tour({
steps: [
{
element: "#tourStep1",
title: "Introduction",
content: "This is the introduction to our website. Here you can learn more about what we do."
},
{
element: "#tourStep2",
title: "Features",
content: "Here are some of the key features that our website offers to help you."
},
{
element: "#tourStep3",
title: "Contact",
content: "Need help? Contact us through this section!"
}
]
});
// Initialize the tour
tour.init();
// Function to start the tour
function startTour() {
tour.start();
}