A Code Master Academy

A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda

👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 03-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Header Hero Heading Other

Author Code Master(Mfuranziza Dusabe Hamza)

696

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A Code Master Academy - Software Development & Training">
  <meta name="keywords" content="coding, programming, web development, software, academy">
  <meta name="author" content="Mfuranziza Dusabe Hamza">
  <title>A Code Master Academy</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* Base Styles */
    :root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --secondary: #8b5cf6;
      --dark: #1e293b;
      --light: #f8fafc;
      --gray: #94a3b8;
      --success: #10b981;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    section {
      padding: 80px 0;
    }
    
    h1, h2, h3, h4 {
      font-weight: 700;
      line-height: 1.2;
    }
    
    h1 {
      font-size: 3.5rem;
      margin-bottom: 20px;
    }
    
    h2 {
      font-size: 2.5rem;
      margin-bottom: 40px;
      text-align: center;
      position: relative;
    }
    
    h2::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: var(--primary);
      border-radius: 2px;
    }
    
    h3 {
      font-size: 1.8rem;
      margin-bottom: 15px;
    }
    
    p {
      margin-bottom: 20px;
      font-size: 1.1rem;
    }
    
    a {
      text-decoration: none;
      color: var(--primary);
      transition: all 0.3s ease;
    }
    
    a:hover {
      color: var(--primary-dark);
    }
    
    .btn {
      display: inline-block;
      padding: 12px 28px;
      background: var(--primary);
      color: white;
      border-radius: 30px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .btn:hover {
      background: var(--primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .btn-outline {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
    }
    
    .btn-outline:hover {
      background: var(--primary);
      color: white;
    }
    
    /* Header Styles */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      padding: 15px 0;
      transition: all 0.3s ease;
    }
    
    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      display: flex;
      align-items: center;
    }
    
    .logo img {
      height: 50px;
      margin-right: 15px;
    }
    
    .logo-text {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--primary);
    }
    
    .logo-text span {
      color: var(--secondary);
    }
    
    nav ul {
      display: flex;
      list-style: none;
    }
    
    nav ul li {
      margin-left: 30px;
    }
    
    nav ul li a {
      color: var(--dark);
      font-weight: 600;
      position: relative;
    }
    
    nav ul li a::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: width 0.3s ease;
    }
    
    nav ul li a:hover::after,
    nav ul li a.active::after {
      width: 100%;
    }
    
    .mobile-toggle {
      display: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    /* Hero Section */
    .hero {
      height: 100vh;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
      position: relative;
      overflow: hidden;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -30%;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
      z-index: -1;
    }
    
    .hero-content {
      max-width: 600px;
    }
    
    .hero h1 span {
      color: var(--secondary);
    }
    
    .hero-btns {
      margin-top: 30px;
      display: flex;
      gap: 15px;
    }
    
    .hero-image {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 45%;
      max-width: 600px;
      animation: float 5s ease-in-out infinite;
    }
    
    @keyframes float {
      0% {
        transform: translateY(-50%);
      }
      50% {
        transform: translateY(-53%);
      }
      100% {
        transform: translateY(-50%);
      }
    }
    
    /* Services Section */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }
    
    .service-card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      text-align: center;
      padding: 40px 30px;
    }
    
    .service-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .service-icon {
      font-size: 3rem;
      color: var(--primary);
      margin-bottom: 20px;
    }
    
    /* Portfolio Section */
    .portfolio {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    }
    
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    
    .portfolio-item {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }
    
    .portfolio-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .portfolio-img {
      height: 250px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
    }
    
    .portfolio-content {
      padding: 25px;
    }
    
    /* About Section */
    .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }
    
    .about-image {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .about-image img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .skills {
      margin-top: 30px;
    }
    
    .skill-bar {
      margin-bottom: 20px;
    }
    
    .skill-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .skill-progress {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .skill-progress span {
      display: block;
      height: 100%;
      background: var(--primary);
      border-radius: 4px;
    }
    
    /* Contact Section */
    .contact {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    }
    
    .contact-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
    }
    
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }
    
    .contact-item {
      display: flex;
      gap: 15px;
    }
    
    .contact-icon {
      font-size: 1.5rem;
      color: var(--primary);
      min-width: 40px;
    }
    
    .contact-form {
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      font-family: inherit;
      font-size: 1rem;
      transition: all 0.3s ease;
    }
    
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .form-group textarea {
      min-height: 150px;
      resize: vertical;
    }
    
    .services-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .service-option {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    /* Footer */
    footer {
      background: var(--dark);
      color: white;
      padding: 60px 0 30px;
    }
    
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }
    
    .footer-logo {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 15px;
      color: white;
    }
    
    .footer-logo span {
      color: var(--secondary);
    }
    
    .footer-links h3 {
      color: white;
      margin-bottom: 20px;
      font-size: 1.3rem;
    }
    
    .footer-links ul {
      list-style: none;
    }
    
    .footer-links ul li {
      margin-bottom: 10px;
    }
    
    .footer-links ul li a {
      color: var(--gray);
      transition: all 0.3s ease;
    }
    
    .footer-links ul li a:hover {
      color: white;
    }
    
    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }
    
    .social-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .social-links a:hover {
      background: var(--primary);
      transform: translateY(-5px);
    }
    
    .copyright {
      text-align: center;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--gray);
      font-size: 0.9rem;
    }
    
    /* Responsive Styles */
    @media (max-width: 992px) {
      h1 {
        font-size: 2.8rem;
      }
      
      h2 {
        font-size: 2.2rem;
      }
      
      .about-content,
      .contact-container {
        grid-template-columns: 1fr;
      }
      
      .about-image {
        max-width: 500px;
        margin: 0 auto;
      }
      
      .hero-image {
        display: none;
      }
      
      .hero-content {
        max-width: 100%;
        text-align: center;
      }
      
      .hero-btns {
        justify-content: center;
      }
    }
    
    @media (max-width: 768px) {
      nav {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 80%;
        height: calc(100vh - 80px);
        background: white;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: all 0.4s ease;
      }
      
      nav.active {
        right: 0;
      }
      
      nav ul {
        flex-direction: column;
        padding: 30px;
      }
      
      nav ul li {
        margin: 0 0 20px 0;
      }
      
      .mobile-toggle {
        display: block;
      }
      
      .services-options {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 576px) {
      section {
        padding: 60px 0;
      }
      
      h1 {
        font-size: 2.2rem;
      }
      
      h2 {
        font-size: 1.8rem;
      }
      
      .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
      }
      
      .hero-btns {
        flex-direction: column;
        align-items: center;
      }
      
      .contact-form {
        padding: 25px;
      }
    }
  </style>
</head>
<body>
  
  <header>
    <div class="container header-container">
      <a href="#" class="logo">
        <div class="logo-text">A Code<span>Master</span></div>
      </a>
      
      <div class="mobile-toggle">
        <i class="fas fa-bars"></i>
      </div>
      
      <nav>
        <ul>
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#hire" class="btn">Hire Us</a></li>
        </ul>
      </nav>
    </div>
  </header>

<section id="home" class="hero">
    <div class="container">
      <div class="hero-content">
        <h1>Welcome to <span>A Code Master</span> Academy</h1>
        <p>We transform ideas into powerful digital solutions through cutting-edge software development and comprehensive training programs.</p>
        <div class="hero-btns">
          <a href="#services" class="btn">Our Services</a>
          <a href="#contact" class="btn btn-outline">Contact Us</a>
        </div>
      </div>
    </div>
    
    <div class="hero-image">
      <div style="background: linear-gradient(135deg, #2563eb, #8b5cf6); width: 100%; height: 100%; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; padding: 20px; text-align: center;">
        Transforming Ideas into Digital Reality
      </div>
    </div>
  </section>

<section id="services" class="services">
    <div class="container">
      <h2>Our Services</h2>
      
      <div class="services-grid">
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-laptop-code"></i>
          </div>
          <h3>Software Development</h3>
          <p>Custom software solutions tailored to your business needs, built with modern technologies and best practices.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-paint-brush"></i>
          </div>
          <h3>UI/UX Design</h3>
          <p>Creating intuitive, user-friendly interfaces that enhance user experience and drive engagement.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <h3>Software Analytics</h3>
          <p>Data-driven insights to optimize your software performance and make informed business decisions.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-mobile-alt"></i>
          </div>
          <h3>Mobile Development</h3>
          <p>Native and cross-platform mobile applications for iOS and Android that deliver exceptional experiences.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-graduation-cap"></i>
          </div>
          <h3>Training & Mentorship</h3>
          <p>Comprehensive coding courses and mentorship programs to develop the next generation of developers.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">
            <i class="fas fa-cloud"></i>
          </div>
          <h3>Cloud Solutions</h3>
          <p>Scalable cloud infrastructure and services to support your business growth and digital transformation.</p>
        </div>
      </div>
    </div>
  </section>

<section id="portfolio" class="portfolio">
    <div class="container">
      <h2>Featured Projects</h2>
      
      <div class="portfolio-grid">
        <div class="portfolio-item">
          <div class="portfolio-img">
            <i class="fas fa-shopping-cart"></i>
          </div>
          <div class="portfolio-content">
            <h3>E-Commerce Platform</h3>
            <p>A full-featured online shopping solution with payment integration and inventory management.</p>
            <a href="#" class="btn btn-outline">View Details</a>
          </div>
        </div>
        
        <div class="portfolio-item">
          <div class="portfolio-img">
            <i class="fas fa-school"></i>
          </div>
          <div class="portfolio-content">
            <h3>Learning Management System</h3>
            <p>A comprehensive platform for online education with course management and student tracking.</p>
            <a href="#" class="btn btn-outline">View Details</a>
          </div>
        </div>
        
        <div class="portfolio-item">
          <div class="portfolio-img">
            <i class="fas fa-mobile-alt"></i>
          </div>
          <div class="portfolio-content">
            <h3>Fitness Tracking App</h3>
            <p>Mobile application for tracking workouts, nutrition, and health metrics with personalized plans.</p>
            <a href="#" class="btn btn-outline">View Details</a>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="about" class="about">
    <div class="container">
      <h2>About Us</h2>
      
      <div class="about-content">
        <div class="about-text">
          <h3>We're Passionate About Technology</h3>
          <p>A Code Master Academy was founded by Mfuranziza Dusabe Hamza with a mission to bridge the gap between technology education and industry needs. We believe in empowering individuals and businesses through innovative software solutions and comprehensive training.</p>
          <p>Our team of experienced developers, designers, and educators are dedicated to delivering exceptional results and helping our clients achieve their digital transformation goals.</p>
          
          <div class="skills">
            <div class="skill-bar">
              <div class="skill-info">
                <span>Web Development</span>
                <span>95%</span>
              </div>
              <div class="skill-progress">
                <span style="width: 95%"></span>
              </div>
            </div>
            
            <div class="skill-bar">
              <div class="skill-info">
                <span>Mobile Development</span>
                <span>90%</span>
              </div>
              <div class="skill-progress">
                <span style="width: 90%"></span>
              </div>
            </div>
            
            <div class="skill-bar">
              <div class="skill-info">
                <span>UI/UX Design</span>
                <span>85%</span>
              </div>
              <div class="skill-progress">
                <span style="width: 85%"></span>
              </div>
            </div>
            
            <div class="skill-bar">
              <div class="skill-info">
                <span>Cloud Solutions</span>
                <span>80%</span>
              </div>
              <div class="skill-progress">
                <span style="width: 80%"></span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="about-image">
          <div style="background: linear-gradient(135deg, #8b5cf6, #2563eb); width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; padding: 20px; text-align: center;">
            Empowering Developers, Transforming Businesses
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="contact">
    <div class="container">
      <h2>Contact Us</h2>
      
      <div class="contact-container">
        <div class="contact-info">
          <h3>Get In Touch</h3>
          <p>Have a project in mind or want to learn more about our training programs? Reach out to us!</p>
          
          <div class="contact-item">
            <div class="contact-icon">
              <i class="fas fa-map-marker-alt"></i>
            </div>
            <div>
              <h4>Location</h4>
              <p>Rubavu, Rwanda</p>
            </div>
          </div>
          
          <div class="contact-item">
            <div class="contact-icon">
              <i class="fas fa-envelope"></i>
            </div>
            <div>
              <h4>Email</h4>
              <p>mfuranzizahamza@gmail.com</p>
            </div>
          </div>
          
          <div class="contact-item">
            <div class="contact-icon">
              <i class="fas fa-phone"></i>
            </div>
            <div>
              <h4>Phone</h4>
              <p>+250 796 132 866</p>
            </div>
          </div>
          
          <div class="social-links">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
          </div>
        </div>
        
        <div class="contact-form">
          <h3 id="hire">Hire Us</h3>
          <form class="work-request">
            <div class="form-group">
              <label for="name">Full Name</label>
              <input type="text" id="name" placeholder="Your Name">
            </div>
            
            <div class="form-group">
              <label for="email">Email Address</label>
              <input type="email" id="email" placeholder="Your Email">
            </div>
            
            <div class="form-group">
              <label for="services">Services Needed</label>
              <div class="services-options">
                <div class="service-option">
                  <input type="checkbox" id="service1">
                  <label for="service1">Software Development</label>
                </div>
                <div class="service-option">
                  <input type="checkbox" id="service2">
                  <label for="service2">UI/UX Design</label>
                </div>
                <div class="service-option">
                  <input type="checkbox" id="service3">
                  <label for="service3">Mobile App</label>
                </div>
                <div class="service-option">
                  <input type="checkbox" id="service4">
                  <label for="service4">Web Development</label>
                </div>
                <div class="service-option">
                  <input type="checkbox" id="service5">
                  <label for="service5">Training</label>
                </div>
                <div class="service-option">
                  <input type="checkbox" id="service6">
                  <label for="service6">Other</label>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label for="message">Project Details</label>
              <textarea id="message" placeholder="Tell us about your project..."></textarea>
            </div>
            
            <button type="submit" class="btn">Send Request</button>
          </form>
        </div>
      </div>
    </div>
  </section>

<footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-about">
          <div class="footer-logo">A Code<span>Master</span></div>
          <p>Transforming businesses and empowering developers through innovative software solutions and comprehensive training programs.</p>
          <div class="social-links">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
          </div>
        </div>
        
        <div class="footer-links">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        
        <div class="footer-links">
          <h3>Our Services</h3>
          <ul>
            <li><a href="#">Software Development</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Mobile App Development</a></li>
            <li><a href="#">UI/UX Design</a></li>
            <li><a href="#">Training & Mentorship</a></li>
          </ul>
        </div>
        
        <div class="footer-links">
          <h3>Contact Info</h3>
          <ul>
            <li><i class="fas fa-map-marker-alt"></i> Rubavu, Rwanda</li>
            <li><i class="fas fa-envelope"></i> mfuranzizahamza@gmail.com</li>
            <li><i class="fas fa-phone"></i> +250 796 132 866</li>
          </ul>
        </div>
      </div>
      
      <div class="copyright">
        <p>&copy; 2023 A Code Master Academy. All Rights Reserved. Created by Mfuranziza Dusabe Hamza</p>
      </div>
    </div>
  </footer>

Related Examples