🏆 Advanced AI Training Presentation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Advanced AI Training</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.slide-container {
width: 1280px;
min-height: 720px;
position: relative;
background-color: white;
color: #333;
}
.blue-accent {
background-color: #0078d4;
}
.title {
font-size: 48px;
font-weight: 700;
color: #0078d4;
line-height: 1.2;
}
.subtitle {
font-size: 28px;
font-weight: 400;
color: #555;
}
.welcome-text {
font-size: 18px;
line-height: 1.6;
color: #444;
max-width: 800px;
}
.circle-graphic {
width: 220px;
height: 220px;
border-radius: 50%;
border: 15px solid #0078d4;
position: absolute;
opacity: 0.1;
}
.quiz-container {
background-color: #f5f9fe;
border-radius: 12px;
border: 2px solid #0078d4;
padding: 1.5rem;
margin-top: 1rem;
width: 90%;
max-width: 800px;
}
.quiz-question {
font-weight: 500;
margin-bottom: 0.75rem;
color: #0078d4;
}
.quiz-option {
padding: 0.5rem;
margin: 0.25rem 0;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
}
.quiz-option:hover {
background-color: #e6f0ff;
}
.quiz-option.selected {
background-color: #0078d4;
color: white;
}
.quiz-feedback {
margin-top: 1rem;
font-weight: 500;
display: none;
}
.badge {
background-color: #0078d4;
color: white;
border-radius: 16px;
padding: 4px 12px;
font-size: 14px;
font-weight: 500;
display: inline-block;
margin-bottom: 12px;
}
/* Responsive styles */
@media screen and (max-width: 1024px) {
.slide-container {
width: 100%;
padding: 2rem 1rem;
}
.title {
font-size: 40px;
}
.subtitle {
font-size: 24px;
}
.welcome-text {
font-size: 16px;
max-width: 90%;
}
.circle-graphic {
width: 180px;
height: 180px;
border-width: 12px;
}
}
@media screen and (max-width: 768px) {
.slide-container {
padding: 1.5rem 1rem;
}
.title {
font-size: 32px;
}
.subtitle {
font-size: 20px;
}
.welcome-text {
font-size: 15px;
}
.circle-graphic {
width: 150px;
height: 150px;
border-width: 10px;
}
.quiz-container {
padding: 1.25rem;
width: 95%;
}
}
@media screen and (max-width: 480px) {
.slide-container {
padding: 1rem 0.75rem;
}
.title {
font-size: 28px;
}
.subtitle {
font-size: 18px;
}
.welcome-text {
font-size: 14px;
line-height: 1.4;
}
.circle-graphic {
width: 120px;
height: 120px;
border-width: 8px;
}
.quiz-container {
padding: 1rem;
}
.quiz-option {
padding: 0.75rem 0.5rem;
margin: 0.5rem 0;
}
}
/* Touch-friendly enhancements */
@media (pointer: coarse) {
.quiz-option {
padding: 0.75rem;
min-height: 44px;
display: flex;
align-items: center;
}
.quiz-option i {
font-size: 1.25rem;
min-width: 24px;
}
button,
[role="button"] {
min-height: 44px;
min-width: 44px;
}
}
</style>
</head>
<body>
<div class="slide-container flex flex-col items-center justify-center p-16 relative overflow-hidden">
<!-- Background design elements -->
<div class="circle-graphic" style="top: -50px; right: -50px;"></div>
<div class="circle-graphic" style="bottom: -100px; left: -80px;"></div>
<!-- Accent bar -->
<div class="blue-accent absolute top-0 left-0 h-2 w-full"></div>
<!-- Main content -->
<div class="z-10 flex flex-col items-center text-center">
<div class="badge">Advanced Level</div>
<div class="mb-2">
<i class="fas fa-brain text-5xl text-blue-500 mb-2"></i>
<i class="fas fa-cogs text-4xl text-blue-400 ml-2 mb-2"></i>
</div>
<h1 class="title mb-2">Advanced AI Training</h1>
<h2 class="subtitle mb-4">Architectures and Enterprise Solutions</h2>
<div class="welcome-text mb-6">
<p>Welcome to the Advanced AI Training program! In this course we will explore advanced architectures, deep learning optimization, large language model techniques, fine-tuning, enterprise strategies, AI ethics, and more.</p>
</div>
<!-- Interactive Quiz Section -->
<div class="quiz-container">
<h3 class="text-xl font-semibold mb-3">Advanced Readiness Assessment</h3>
<div class="quiz-question" id="question1">
<p>Which of these concepts are you already comfortable with? (Choose the most advanced)</p>
<div class="quiz-options">
<div class="quiz-option" data-value="intermediate" onclick="selectOption(this, 'question1')" role="button" tabindex="0">
<i class="far fa-circle mr-2"></i> <span>Neural networks, supervised learning, and basic ML frameworks</span>
</div>
<div class="quiz-option" data-value="advanced" onclick="selectOption(this, 'question1')" role="button" tabindex="0">
<i class="far fa-circle mr-2"></i> <span>Transformer architectures, fine-tuning, and prompt engineering</span>
</div>
<div class="quiz-option" data-value="expert" onclick="selectOption(this, 'question1')" role="button" tabindex="0">
<i class="far fa-circle mr-2"></i> <span>Implementing enterprise AI systems with MLOps and governance</span>
</div>
</div>
<div class="quiz-feedback text-green-600" id="feedback1"></div>
</div>
</div>
<!-- Footer with date -->
<div class="mt-5">
<p class="text-gray-500">July 2025</p>
</div>
</div>
<!-- Bottom bar with light blue -->
<div class="blue-accent opacity-80 absolute bottom-0 left-0 h-6 w-full"></div>
</div>
<script>
function selectOption(element, questionId) {
// Remove selected class from all options in this question
const options = document.querySelectorAll(`#${questionId} .quiz-option`);
options.forEach(option => {
option.classList.remove('selected');
option.querySelector('i').className = 'far fa-circle mr-2';
});
// Add selected class to clicked option
element.classList.add('selected');
element.querySelector('i').className = 'fas fa-check-circle mr-2';
// Show feedback based on selection
const feedback = document.getElementById(`feedback1`);
feedback.style.display = 'block';
const value = element.getAttribute('data-value');
if (value === 'intermediate') {
feedback.innerText = "You have a solid foundation! This course will introduce you to more advanced concepts.";
} else if (value === 'advanced') {
feedback.innerText = "Excellent! You're well prepared for this advanced training.";
} else if (value === 'expert') {
feedback.innerText = "Perfect! You'll be able to apply enterprise-level concepts immediately.";
}
}
// Add keyboard support for accessibility
document.querySelectorAll('.quiz-option').forEach(option => {
option.addEventListener('keypress', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
selectOption(this, this.closest('.quiz-question').id);
}
});
});
// Add touch event listeners for mobile
document.querySelectorAll('.quiz-option').forEach(option => {
option.addEventListener('touchstart', function() {
this.classList.add('hover:bg-blue-100');
}, {passive: true});
option.addEventListener('touchend', function() {
this.classList.remove('hover:bg-blue-100');
}, {passive: true});
});
</script>
</body>
</html>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.