index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="web.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SAM TECH ACADEMY</title>
 

</head>
<body>
  
   
    <div class="logo">
      <img src="./sam.png" height="70px" alt="my logo">
      <span>SAM'S</span>
      <span>TECH</span>
     
       
     
    </div>
    
  <header>
    <h1>WELCOME TO MY WEBSITE</h1>
  </header> <br><br>
      <marquee behavior="alternate" direction="">
 
  <video src="./bembea.mp4" height="400" controls autoplay muted loop></video>
  <video src="./biology.mp4" height="400" controls autoplay muted loop></video>
  <video src="./chemistry.mp4" height="400" controls autoplay muted loop></video>
  <video src="./english.mp4" height="400" controls autoplay muted loop></video>
  <video src="./mapambazuko.mp4" height="400" controls autoplay muted loop></video>
  <video src="./maths.mp4" height="400" controls autoplay muted loop></video>
 </marquee> <br><br>
  <div class="whole">
  <marquee class="scroll" behavior="scroll" direction="left" scrollamount="10">
    <h2>YOU'RE FREE TO QUESTION ME WHAT ALL </br> {ANY QUESTION PLEASE FEEL FREE TO ASK}</h2>
  </marquee>
  <form id="search" class="search" action="https://www.google.com/search" method="get">
  <input type="text" name="q" placeholder="SAM Search... ">
  <button id="submit" type="submit">🔎</button>
</form>
<form>
  <fieldset>
    <legend class="legend">ENTER YOUR NAME TO CONTINUE</legend>
    <label for="">username</label>
  <input type="text" name="" id="username" placeholder="Enter username">
  <button onclick="
    const username = document.getElementById('username').value;
    document.getElementById('welcome').innerText = 'Welcome, ' + username + ' conttinue browsing our website';
  ">Register</button>
  <p class="welcome" id="welcome"></p>
    
  </fieldset>
</form>
<fieldset>
  <legend class="legend">QUOTES OF THE DAY</legend>
  <H1>RANDOM QUOTES</H1>
  <p id="quotes"></p>
  <button onclick="generateQuote()">CLICK ME</button>
</fieldset>

  <nav class="navbar">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
    <a href="#testimonials">Testimonials</a>
    <a href="#socialmedia">Social Media</a>
  </nav>
  <main>
    <section id="home">
      <h2>Home</h2>
      <p>This is the home section of the website.</p>
       <h2>HOME PAGE</h2>
    <p>Template 1: Direct and value-focused</p>
<p>Welcome to our website! We specialize in creating high-quality, user-friendly websites tailored for educational institutions. Our mission is to empower educators and learners by providing innovative web solutions that enhance the learning experience.</p>
<p>Whether you're a school, college, or university, we understand the unique needs of the education sector. Our team of experienced developers and designers work closely with you to create a website that not only looks great but also functions seamlessly.</p>
<p>Explore our services to see how we can help you achieve your digital goals. From custom website design to responsive development, we have the expertise to bring your vision to life.</p>
<p>Contact us today to learn more about how we can support your institution's online presence!</p>
<p>Thank you for visiting our website. We look forward to collaborating with you!</p>
<strong>Best regards,<br>The Web Development Team</strong>

    </section>
    <section id="about">
      <h2>About</h2>
      <p>This section contains information about us.</p>
      <h3>Our Mission</h3>
      <p>To empower educators and learners through innovative web solutions.</p>
      <h3>Our Vision</h3>
      <p>To create a world where every educational institution has access to high-quality, user-friendly digital tools.</p>
      <p>We envision a future where technology enhances the learning experience for all students, regardless of their background or resources.</p>
      <p>Our team is dedicated to continuous learning and improvement, ensuring that we stay at the forefront of web development trends and best practices.</p> 
      <p>Join us on our journey to revolutionize education through technology!</p>
      <p>Contact us at: <a href="mailto:samotienoapiyo@gmail.com">samotienoapiyo@gmail.com</a></p>
      <p>WHATSAPP: <a href="https://wa.me/+254711733456">GOOD DEALS</a></p>
    </section>

    </section>
    <section id="services">
      <h2>Services</h2>
      <p>Details about the services we offer can be found here.</p>
      <ul>
        <li>Custom Website Design</li>
        <li>Responsive Web Development</li>
        <li>E-commerce Solutions</li>
        <li>SEO Optimization</li>
        <li>Website Maintenance and Support</li>
        <li>KRA pin creation</li>
        <li>Card creation</li>
        <li>Online writing assistance</li>
        <li>KUCCPS application</li>
        <li>Spreadsheet learning</li>
        <li>Graphic design services</li>
        <li>Gmail account recovery</li>
        <li>HTML, CSS and JS development</li>
        <li>And many more CYBER services</li>
        <li>And much more!</li>
      </ul>
      <p>We are committed to providing top-notch services that cater to the unique needs of the education sector.</p>

    </section>
    <section id="contact">
      <h2>Contact</h2>
      <p>Get in touch with us through this section.</p>
      <form action="mailto:samotienoapiyo@gmail.com" method="post" enctype="text/plain">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" required></textarea><br><br>
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
    </section>
  
  </main>
  <h3>Testimonials</h3>
  <div class="testimonial">
    <p>"This website transformed our online learning experience!"</p>
    <cite>- Happy Educator</cite>
  </div>

  <section id="testimonials">
    <div class="testimonial">
      <p>"An invaluable resource for both teachers and students."</p>
      <cite>- Grateful Student</cite>
    </div>
    <div class="testimonial">
      <p>"A seamless and engaging platform for our students."</p>
      <cite>- Satisfied Administrator</cite>
    </div>
  </section>
  <section id="socialmedia">
    <h2>Social Media</h2>
    <p>Follow us on our social media platforms:</p>
    <ul>
      <li><a href="https://www.facebook.com/profile.php?id=61554057311208">Facebook</a></li>
      
      <li><a href="https://www.instagram.com/samotienoapiyo?igsh=YTZwNnY3dzR3YXY3">Instagram</a></li>
      <li><a href="https://www.linkedin.com/in/sam-apiyo-15471b2a6/?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B345oVOu6QVa6IApZbl%2BUwA%3D%3D">LinkedIn</a></li>
      <li><a href="http://www.youtube.com/@SamApiyo-hu8ii">YouTube</a></li>
      <li><a href="https://www.tiktok.com/@samapiyo">TikTok</a></li>
    </ul>
   <form>
    <fieldset>
      <legend class="legend">LEAVE YOUR FEEDBACK</legend>
      <label for="feedback">Your Feedback:</label><br>
      <textarea id="feedback" name="feedback" rows="4" cols="50" placeholder="Enter your feedback here..."></textarea><br><br>
      <input type="submit" value="Submit Feedback"><br><br>
    </fieldset><br><br>
    </form>

    <div class="image-section">
      <h1>Great Ideas for the Future</h1>
  <img src="./future.jpg" height="400px" alt="GREATE IDEAS">
  <img src="./feature.jpg" height="400px" alt="">
  <img src="./robotics.png" height="400px"  alt="">
  <img src="./robot.png" height="400px" alt="">
</div><br><br>
    <div>
      <h1>ROBOTICS ROLES IN FUTURE</h1>
      <video src="robotics.mp4" height="400px" width="400px" controls></video><br><br>
     
  
    <form id="reaction-form">
     <label for="reaction">React to this:</label>
     <select id="reaction" name="reaction">
       <option value="like">👍 Like</option>
       <option value="love">❤️ Love</option>
       <option value="haha">😂 Haha</option>
       <option value="wow">😮 Wow</option>
     </select>
     <input type="submit" value="Submit">
   </form><br>

  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
</div>
    


    <script src="web.js"></script>
</body>
</html>