expo

Expo East African – AI SkillForce Events

<section class="web-tech-expo">

  <div class="expo-hero">
    <span class="expo-badge">EAST AFRICAN EXPO</span>
    <h1>Explore the World of <span>Web Development</span></h1>
    <p>
      Discover how HTML, CSS and JavaScript work together to create
      modern, interactive and beautiful websites.
    </p>

    <a href="#technologies" class="expo-btn">Explore Technologies ↓</a>
  </div>

  <div class="tech-intro" id="technologies">
    <h2>Three Technologies Behind the Web</h2>
    <p>
      Every modern website you visit is built using a combination of
      structure, design and interaction. Learn how HTML, CSS and
      JavaScript work together.
    </p>
  </div>

  <div class="tech-grid">

    <!-- HTML -->
    <article class="tech-card html-card">
      <div class="tech-icon">&lt;/&gt;</div>
      <h3>HTML</h3>
      <h4>HyperText Markup Language</h4>

      <p>
        HTML provides the structure and content of a website. It tells
        the browser what elements should appear on the page.
      </p>

      <div class="example-box">
        <strong>Example:</strong>
        <pre>&lt;h1&gt;Welcome to Our Expo&lt;/h1&gt;
&lt;p&gt;Learn Web Development&lt;/p&gt;</pre>
      </div>

      <ul>
        <li>Creates headings and paragraphs</li>
        <li>Adds images and videos</li>
        <li>Creates links and buttons</li>
        <li>Builds forms and page structure</li>
      </ul>
    </article>

    <!-- CSS -->
    <article class="tech-card css-card">
      <div class="tech-icon">#</div>
      <h3>CSS</h3>
      <h4>Cascading Style Sheets</h4>

      <p>
        CSS controls the appearance of a website. It makes pages
        beautiful, responsive and easy to use.
      </p>

      <div class="example-box">
        <strong>Example:</strong>
        <pre>h1 {
  color: #1769aa;
  font-size: 40px;
  text-align: center;
}</pre>
      </div>

      <ul>
        <li>Controls colors and fonts</li>
        <li>Creates layouts and animations</li>
        <li>Makes websites responsive</li>
        <li>Improves visual design</li>
      </ul>
    </article>

    <!-- JavaScript -->
    <article class="tech-card js-card">
      <div class="tech-icon">JS</div>
      <h3>JavaScript</h3>
      <h4>Interactive Web Programming</h4>

      <p>
        JavaScript gives websites life. It allows users to interact
        with buttons, forms, menus, games and other dynamic features.
      </p>

      <div class="example-box">
        <strong>Example:</strong>
        <pre>function welcome() {
  alert("Welcome to
  Web Development!");
}</pre>
      </div>

      <ul>
        <li>Creates interactive buttons</li>
        <li>Builds games and applications</li>
        <li>Validates forms</li>
        <li>Creates dynamic content</li>
      </ul>
    </article>

  </div>

  <!-- How they work together -->
  <div class="how-section">
    <h2>How HTML, CSS & JavaScript Work Together</h2>

    <div class="web-flow">

      <div class="flow-item">
        <span>1</span>
        <h3>HTML</h3>
        <p>Builds the structure</p>
      </div>

      <div class="flow-arrow">→</div>

      <div class="flow-item">
        <span>2</span>
        <h3>CSS</h3>
        <p>Creates the design</p>
      </div>

      <div class="flow-arrow">→</div>

      <div class="flow-item">
        <span>3</span>
        <h3>JavaScript</h3>
        <p>Adds interaction</p>
      </div>

      <div class="flow-arrow">→</div>

      <div class="flow-item result">
        <span>✓</span>
        <h3>Website</h3>
        <p>Interactive web experience</p>
      </div>

    </div>
  </div>

  <!-- Interactive Demo -->
  <div class="interactive-demo">
    <h2>Try JavaScript!</h2>
    <p>Click the button and see JavaScript in action.</p>

    <button id="demoButton" onclick="runExpoDemo()">
      Click Me
    </button>

    <div id="demoMessage">
      Your interactive message will appear here.
    </div>
  </div>

  <!-- Learning section -->
  <div class="learning-section">
    <h2>What Can Young Innovators Create?</h2>

    <div class="project-grid">
      <div class="project">
        <span>🌐</span>
        <h3>Websites</h3>
        <p>Create personal, school and business websites.</p>
      </div>

      <div class="project">
        <span>🎮</span>
        <h3>Games</h3>
        <p>Use JavaScript to create fun browser games.</p>
      </div>

      <div class="project">
        <span>💡</span>
        <h3>Web Apps</h3>
        <p>Build useful applications that solve real problems.</p>
      </div>

      <div class="project">
        <span>🚀</span>
        <h3>Future Skills</h3>
        <p>Develop skills for technology and digital careers.</p>
      </div>
    </div>
  </div>

  <div class="expo-footer">
    <h2>Start Building the Future Today!</h2>
    <p>
      HTML gives you the structure. CSS gives you the style.
      JavaScript gives you the power to interact.
    </p>

    <a href="https://www.aiskillforce.co.ke/expo" class="expo-btn">
      Visit the Expo
    </a>
  </div>

</section>


<style>

.web-tech-expo {
  font-family: Arial, Helvetica, sans-serif;
  color: #172033;
  background: #f5f8ff;
  overflow: hidden;
  line-height: 1.6;
}

.expo-hero {
  padding: 90px 25px;
  text-align: center;
  color: white;
  background:
    radial-gradient(circle at 10% 20%, rgba(0,180,255,.35), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(125,50,255,.4), transparent 35%),
    linear-gradient(135deg, #07152f, #123d75, #24105b);
}

.expo-badge {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50px;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.expo-hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.1;
  margin: 10px auto 20px;
  max-width: 950px;
}

.expo-hero h1 span {
  color: #54d9ff;
}

.expo-hero p {
  max-width: 760px;
  margin: auto auto 30px;
  font-size: 19px;
  opacity: .9;
}

.expo-btn {
  display: inline-block;
  background: #ffffff;
  color: #123d75;
  padding: 13px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: .3s;
}

.expo-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.tech-intro {
  text-align: center;
  padding: 70px 20px 35px;
}

.tech-intro h2,
.how-section h2,
.learning-section h2,
.interactive-demo h2 {
  font-size: 38px;
  margin-bottom: 12px;
}

.tech-intro p {
  max-width: 750px;
  margin: auto;
  color: #657087;
}

.tech-grid {
  max-width: 1200px;
  margin: 30px auto 80px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.tech-card {
  background: white;
  padding: 32px;
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(20,40,80,.09);
  transition: .3s;
  border-top: 5px solid #1769aa;
}

.tech-card:hover {
  transform: translateY(-8px);
}

.css-card {
  border-top-color: #7a42f4;
}

.js-card {
  border-top-color: #e9a900;
}

.tech-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f6ff;
  color: #1769aa;
  border-radius: 16px;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

.css-card .tech-icon {
  background: #f0eaff;
  color: #7a42f4;
}

.js-card .tech-icon {
  background: #fff6d9;
  color: #bd8500;
}

.tech-card h3 {
  font-size: 30px;
  margin: 5px 0;
}

.tech-card h4 {
  color: #657087;
  margin-top: 0;
}

.example-box {
  background: #101827;
  color: #d9e7ff;
  border-radius: 12px;
  padding: 15px;
  margin: 20px 0;
  overflow-x: auto;
}

.example-box pre {
  margin: 10px 0 0;
  font-size: 13px;
}

.tech-card li {
  margin: 8px 0;
}

.how-section {
  padding: 80px 20px;
  text-align: center;
  background: #eaf2ff;
}

.web-flow {
  max-width: 1100px;
  margin: 45px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.flow-item {
  background: white;
  padding: 25px;
  border-radius: 18px;
  width: 180px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.flow-item span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #1769aa;
  color: white;
  font-weight: bold;
}

.flow-item h3 {
  margin-bottom: 3px;
}

.flow-item p {
  margin-top: 0;
  color: #697386;
}

.flow-arrow {
  font-size: 30px;
  font-weight: bold;
}

.interactive-demo {
  max-width: 900px;
  margin: 70px auto;
  padding: 55px 25px;
  text-align: center;
  background: white;
  border-radius: 25px;
  box-shadow: 0 15px 45px rgba(20,40,80,.1);
}

#demoButton {
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  background: #1769aa;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
}

#demoButton:hover {
  transform: scale(1.05);
}

#demoMessage {
  margin-top: 25px;
  min-height: 30px;
  font-weight: bold;
}

.learning-section {
  padding: 70px 20px;
  text-align: center;
  background: #f8faff;
}

.project-grid {
  max-width: 1100px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.project {
  background: white;
  padding: 30px 20px;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.07);
}

.project span {
  font-size: 40px;
}

.project h3 {
  margin-bottom: 5px;
}

.project p {
  color: #687286;
}

.expo-footer {
  padding: 80px 20px;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #07152f, #183d70);
}

.expo-footer p {
  max-width: 650px;
  margin: 0 auto 30px;
}

@media (max-width: 900px) {
  .tech-grid {
    grid-template-columns: 1fr;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-arrow {
    display: none;
  }
}

@media (max-width: 600px) {
  .expo-hero {
    padding: 65px 18px;
  }

  .expo-hero h1 {
    font-size: 40px;
  }

  .tech-intro h2,
  .how-section h2,
  .learning-section h2,
  .interactive-demo h2 {
    font-size: 30px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .tech-card {
    padding: 25px;
  }
}

</style>


<script>

function runExpoDemo() {

  const message = document.getElementById("demoMessage");
  const button = document.getElementById("demoButton");

  message.innerHTML =
    "🚀 Great! JavaScript is working. You just created an interactive web experience!";

  button.innerHTML = "JavaScript Works ✓";

}

</script>

<!-- ==========================================
HERO SECTION
========================================== -->
<section class="hero-section">
    <div class="hero-content">

        <!-- Expo Badge -->
        <div class="expo-badge">
            <i class="fas fa-trophy"></i> Expo East African 2026
        </div>

        <!-- Main Title -->
        <h1 class="hero-title">
            AI SkillForce <br>
            <span class="highlight">Events</span>
        </h1>

        <!-- Subtitle -->
        <p class="hero-subtitle">
            Empowering East Africa's workforce with cutting-edge AI skills, 
            innovation, and transformative learning experiences.
        </p>

        <!-- CTA Buttons -->
        <div class="hero-buttons">
            <a href="#" class="btn-primary">
                <i class="fas fa-ticket-alt"></i> Register Now
            </a>
            <a href="#events" class="btn-secondary">
                <i class="fas fa-calendar-alt"></i> View Events
            </a>
        </div>

        <!-- Breadcrumbs -->
        <div class="breadcrumbs">
            <a href="#">Home</a>
            <span class="separator">/</span>
            <a href="#">Events</a>
            <span class="separator">/</span>
            <span class="current">Expo East African</span>
        </div>

    </div>
</section>

<!-- ==========================================
COUNTDOWN SECTION
========================================== -->
<section class="countdown-section">
    <h3>Next Event in <strong>Expo East African</strong></h3>
    <div class="countdown-timer" id="countdown">
        <div class="countdown-item">
            <span class="number" id="days">00</span>
            <span class="label">Days</span>
        </div>
        <div class="countdown-item">
            <span class="number" id="hours">00</span>
            <span class="label">Hours</span>
        </div>
        <div class="countdown-item">
            <span class="number" id="minutes">00</span>
            <span class="label">Minutes</span>
        </div>
        <div class="countdown-item">
            <span class="number" id="seconds">00</span>
            <span class="label">Seconds</span>
        </div>
    </div>
</section>

<!-- ==========================================
EVENTS SECTION
========================================== -->
<section class="events-section" id="events">
    <div class="section-header">
        <h2>Upcoming <span style="color:#f7a100;">Events</span></h2>
        <p>Discover our curated events designed to accelerate your AI journey</p>
    </div>

    <div class="events-grid">

        <!-- Event Card 1 -->
        <div class="event-card">
            <div class="event-icon">
                <i class="fas fa-robot"></i>
            </div>
            <h3>AI Masterclass</h3>
            <p>Deep dive into generative AI, prompt engineering, and real-world applications.</p>
            <div class="event-meta">
                <span><i class="fas fa-calendar"></i> March 15, 2026</span>
                <span><i class="fas fa-map-marker-alt"></i> Nairobi</span>
                <span class="event-status upcoming">Upcoming</span>
            </div>
        </div>

        <!-- Event Card 2 -->
        <div class="event-card">
            <div class="event-icon">
                <i class="fas fa-users"></i>
            </div>
            <h3>Expo East African Summit</h3>
            <p>East Africa's premier AI conference featuring 20+ speakers and 500+ attendees.</p>
            <div class="event-meta">
                <span><i class="fas fa-calendar"></i> April 20, 2026</span>
                <span><i class="fas fa-map-marker-alt"></i> Kampala</span>
                <span class="event-status upcoming">Upcoming</span>
            </div>
        </div>

        <!-- Event Card 3 -->
        <div class="event-card">
            <div class="event-icon">
                <i class="fas fa-laptop-code"></i>
            </div>
            <h3>Hackathon 2026</h3>
            <p>Build AI-powered solutions to real-world challenges and win exciting prizes.</p>
            <div class="event-meta">
                <span><i class="fas fa-calendar"></i> May 10, 2026</span>
                <span><i class="fas fa-map-marker-alt"></i> Dar es Salaam</span>
                <span class="event-status">Coming Soon</span>
            </div>
        </div>

    </div>
</section>

<!-- ==========================================
JAVASCRIPT
========================================== -->
<script>
    // ==========================================
    // COUNTDOWN TIMER
    // ==========================================
    function startCountdown(targetDate) {
        const daysEl = document.getElementById('days');
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        const secondsEl = document.getElementById('seconds');

        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

            if (distance < 0) {
                daysEl.textContent = '00';
                hoursEl.textContent = '00';
                minutesEl.textContent = '00';
                secondsEl.textContent = '00';
                return;
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            daysEl.textContent = String(days).padStart(2, '0');
            hoursEl.textContent = String(hours).padStart(2, '0');
            minutesEl.textContent = String(minutes).padStart(2, '0');
            secondsEl.textContent = String(seconds).padStart(2, '0');
        }

        updateCountdown();
        setInterval(updateCountdown, 1000);
    }

    // Set target date: April 20, 2026 at 09:00 AM
    const targetDate = new Date('April 20, 2026 09:00:00').getTime();
    startCountdown(targetDate);

    // ==========================================
    // SMOOTH SCROLL FOR NAVIGATION
    // ==========================================
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                e.preventDefault();
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // ==========================================
    // EVENT CARD CLICK (Demo Interaction)
    // ==========================================
    document.querySelectorAll('.event-card').forEach(card => {
        card.addEventListener('click', function() {
            const title = this.querySelector('h3').textContent;
            alert(`📢 You selected: "${title}"\n\nStay tuned for more details about this event!`);
        });
    });

    // ==========================================
    // SCROLL ANIMATION FOR CARDS
    // ==========================================
    const cards = document.querySelectorAll('.event-card');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 150);
            }
        });
    }, {
        threshold: 0.1
    });

    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = `all 0.6s ease ${index * 0.1}s`;
        observer.observe(card);
    });

    // ==========================================
    // CONSOLE WELCOME MESSAGE
    // ==========================================
    console.log('%c🏆 Expo East African 2026', 'font-size: 24px; font-weight: bold; color: #ffd700;');
    console.log('%cEmpowering East Africa with AI Skills', 'font-size: 14px; color: #6b7280;');
    console.log('%c🚀 Visit aiskillforce.co.ke for more', 'font-size: 14px; color: #6b7280;');

    console.log('%c✨ Page loaded successfully!', 'font-size: 12px; color: #10b981;');
</script>