index.ejs

<% layout("/layouts/boilerplate") %>

<style>
  .suggestions {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    width: calc(80% - 25px);
    max-width: 280px;
    margin-top: px;
    display: none;
    z-index: 10;
    /* border-bottom-left-radius: 50px; */
    left: 123px;
    list-style-type: none;
  }

  .suggestions li {
    padding: 10px;
    cursor: pointer;
    list-style-type: none;
  }

  .suggestions li:hover {
    background: #2baffc;
    color: white;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
  }

  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    position: relative;
    text-align: center;
  }

  .close {
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .graph h1 span {
    color: #ff9d00;
  }

  .course-categories {
    padding: 30px 20px 60px 20px;
  }

  .course-categories h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    color: #3498db;
    position: relative;
  }

  .course-categories h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #3498db;
    margin: 20px auto 0;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
  }

  .category-card {
    /* background-color: #222222; */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    color: black;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .category-card:hover {
    transform: translateY(-10px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .category-icon {
    font-size: 3rem;
    color: #3498db;
    margin-bottom: 15px;
  }

  .category-content {
    padding: 25px;
    text-align: center;
  }

  .category-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #3498db;
  }

  .category-description {
    color: #aaa;
    margin-bottom: 20px;
    font-size: 0.9rem;
  }

  .subcategory-count {
    display: inline-block;
    background-color: #3498db;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-top: 10px;
  }

  .subcategories {
    list-style-type: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  /* styles.css */
  #loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    /* semi-transparent white background */
    z-index: 9999;
    /* Ensure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .spinner {
    /* Define your spinner styles */
    border: 4px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    /* Blue color for spinner */
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
  }


  .beating-spinner {


    animation: beat 1s infinite alternate;
  }

  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }



  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Fira+Code:wght@400;500&display=swap');

:root {
    --primary-color: #4a90e2;
    --secondary-color: #2baffc;
  
    --text-color: #333;
    --code-bg-color: #000;
}



.dsa-visualization-section {


    position: relative;
    overflow: hidden;
}

.section-header h2 {
    color: var(--primary-color);
    animation: fadeInDown 1s ease-out;
}

.section-header p {
    color: var(--text-color);
    animation: fadeInUp 1s ease-out 0.5s both;
}

.feature-card {
    background-color: #f9f9f9;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 0.5s ease-out both;
}

.feature-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.feature-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    animation: pulse 2s infinite;
}

.feature-card h3 {
    color: var(--primary-color);
}

.visualization-example {
    background-color: var(--code-bg-color);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.visualization-example h3 {
    color: var(--secondary-color);
}

.visualization-container {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}

/* Bubble Sort Animation */
@keyframes bubbleSort {
    0%, 100% { height: 50px; }
    50% { height: 100px; }
}

.bubble-sort .bar {
    width: 20px;
    background-color: var(--secondary-color);
    margin: 0 5px;
    border-radius: 5px 5px 0 0;
    animation: bubbleSort 2s infinite;
}

.bubble-sort .bar:nth-child(2) { animation-delay: 0.2s; }
.bubble-sort .bar:nth-child(3) { animation-delay: 0.4s; }
.bubble-sort .bar:nth-child(4) { animation-delay: 0.6s; }
.bubble-sort .bar:nth-child(5) { animation-delay: 0.8s; }


/* Binary Search Tree Animation */
@keyframes treeGrow {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes arrowDraw {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.bst-tree {
    position: relative;
    width: 200px;
    height: 200px;
}

.bst-node {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    animation: treeGrow 1s ease-out forwards;
}

.bst-node:nth-child(1) { top: 0; left: 80px; }
.bst-node:nth-child(2) { top: 60px; left: 40px; }
.bst-node:nth-child(3) { top: 60px; left: 120px; }
.bst-node:nth-child(4) { top: 120px; left: 20px; }
.bst-node:nth-child(5) { top: 120px; left: 60px; }

.bst-arrow {
    stroke: var(--secondary-color);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: arrowDraw 1s ease-out forwards;
}
/* Linked List Animation */
@keyframes linkedListMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

.linked-list {
    display: flex;
    align-items: center;
}

.list-node {
    width: 40px;
    height: 40px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 20px;
    position: relative;
    animation: linkedListMove 2s infinite alternate;
}

.list-node::after {
    content: '→';
    position: absolute;
    right: -15px;
    color: var(--secondary-color);
}

.list-node:last-child::after {
    content: none;
}



@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    opacity: 0.1;
    animation: float 20s infinite linear;
}

.shape-1 {
    top: 10%;
    left: 10%;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.shape-2 {
    top: 70%;
    right: 10%;
    width: 70px;
    height: 70px;
    background-color: var(--secondary-color);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape-3 {
    top: 40%;
    left: 50%;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

















@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

/* body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f3f7;
    overflow-x: hidden;
} */

.banner {
   
    overflow: hidden;
  
    position: relative;
}

.banner::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
   
    z-index: 1;
}



.banner-content {
    padding: 4rem 2rem;
    position: relative;
    z-index: 2;
}

.banner-content h1{
  font-family: 'Poppins', sans-serif;
    color: #000;
    font-weight: 800;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.banner-content p{
  font-family: 'Poppins', sans-serif;
    color: #34495e;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.btn-primary {
    background-color: #000;
    border-color: #000;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background-color: #2baffc;
    border-color: #2baffc;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(3, 4, 5, 0.4);
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.117),
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.btn-primary:hover::after {
    left: 100%;
    top: 100%;
}

.banner-image {
    position: relative;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    border-radius: 0 20px 20px 0;
 
}

.resume-preview {
    position: absolute;
    top: 0;
    left: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.resume-preview img {
    position: absolute;
    height: 90%;
    width: auto;
    max-width: 80%;
    object-fit: cover;
    
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
}

.resume-preview img:nth-child(1) {
    transform: translateX(-30%) scale(0.9);
    z-index: 1;
}

.resume-preview img:nth-child(2) {
    z-index: 2;
}

.resume-preview img:nth-child(3) {
    transform: translateX(30%) scale(0.9);
    z-index: 1;
}

.resume-preview img:hover {
    transform: scale(1.05);
    z-index: 3;
}

.feature-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 2rem;
}

.feature-list li {
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.feature-list li:hover {
    transform: translateX(5px);
}

.feature-list li::before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #3498db;
    position: absolute;
    left: 0;
    top: 2px;
}

.animated-text {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

.animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .banner-image {
        min-height: 400px;
    }
    
    .resume-preview img {
        height: auto;
        width: 80%;
        max-width: 300px;
    }
    
    .resume-preview img:nth-child(1) {
        transform: translateX(-20%) scale(0.9);
    }
    
    .resume-preview img:nth-child(3) {
        transform: translateX(20%) scale(0.9);
    }
}

@media (max-width: 767px) {
    .banner-image {
        min-height: 400px;
    }
    
    .resume-preview img {
        width: 80%;
        max-width: 300px;
    }
    
    .resume-preview img:nth-child(1) {
        transform: translateX(-15%) scale(0.9);
    }
    
    .resume-preview img:nth-child(3) {
        transform: translateX(15%) scale(0.9);
    }
    .btn-primary {
      display: flex;
      justify-content: center;
    }
}
</style>

<body id="index html">
  <!-- ! Loader -->

  <div id="loader">
    <img class="beating-spinner" src="/images/logo1.png" alt="" width="80">
    <!-- Your loader animation or spinner -->
    <!-- <div class="spinner"><img src="/images/logo2.png" alt=""></div> -->
  </div>

<!-- ! Loader -->

<!-- !Main Container Start -->
  <div id="mainbody" class="container-fluid">
    <div class="row text-center align-items-center mainbody2">
      <div class="col-lg-6 mainbody-text">
        <h1>Ignite The Passion For Developing.</h1>
        <h3>One platform for master all technologies.</h3>

        <form id="searching" class="d-flex justify-content-center" onsubmit="searchTutorials(event)">
          <input type="search" id="searchInput" maxlength="20" class="search-box"
            placeholder="Search Tutorials, e.g. HTML" required oninput="showSuggestions(event)">
          <button type="submit" class="search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
        </form>
       
        <div id="errorModal" class="modal">
          <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <p>No tutorials found for your search query.</p>
          </div>
        </div>

        <div class="roadmap">
          <a class="" href="/roadmaps">To Start with Road-maps.</a>
        </div>
      </div>

      <div class="col-lg-6 object-fit-fill">
        <img id="mainbody-img" src="images/Mainbodypic.png" alt="">
      </div>
      <!-- <h1>Everyone start the Coding journey with hello world</h1> -->
    </div>

    <img src="images/wave1.png" class="bottom-img" alt="">

  </div>
  <!-- !Main Container End -->


  <!-- !why Hello World section Start -->
  <div class="container-fluid hello-world-section">
    <h1 class="text-center">Why <span>Hello World</span> ?</h1>
    <div class=" underline2 separator text-center" style="margin-left: 49%; padding: 10px; font-size: 20px;"></div>

    <div class="row justify-content-center hello-world-section1 ">
      <div class="col-md-3 col-9 hello-world-section-content text-center pp1" data-aos="fade-up"
        data-aos-duration="1200">
        <img src="images/ccc2.png" alt="">
        <h4>Comprehensive Course Content</h4>
        <p id="p1">Our platform provides a rich array of learning resources, including video tutorials, interactive
          coding exercises, quizzes, and documentation that gives you better understanding and allow you to apply your
          knowledge effectively and helps to master the skill.</p>
      </div>
      <div class="col-md-3 col-9 hello-world-section-content text-center pp2" data-aos="fade-up"
        data-aos-duration="1500">
        <img src="images/roadmap.png" alt="">
        <h4> Targeted learning with Roadmaps</h4>
        <p id="p2">Learning with clear and structured roadmaps, designed by industry experts to guide their learning
          journey and help you build a strong foundation. These paths outline the essential concepts, skills and,
          providing a step-by-step approach that ensures a well-rounded and easy learning.</p>

      </div>
      <div class="col-md-3 col-9 hello-world-section-content text-center pp3" data-aos="fade-up"
        data-aos-duration="1900">
        <img src="images/alr.png" alt="">
        <h4>Advanced Learning Resources</h4>
        <p id="p3">Rich collection of resources to diverse learning styles, ensuring that you have the flexibility to
          explore various learning materials and deepen your understanding and access a wealth of advanced learning
          resources, including video lectures, tutorials, articles, e-books, and code repositories.</p>

      </div>


    </div>
  </div>
  <!-- !why Hello World section end -->


  <!-- !featured tutorial Section Start -->
  <div class="skill-section">
    <img src="images/wave2.png" alt="">
    <div class="container">
      <h1 class="heading text-center">Featured <span> Tutorials</span></h1>
      <div class=" underline2 separator text-center" style="margin-left: 49%;"></div>
      <p id="heading-pera" class="text-center " data-aos="fade-right" data-aos-duration="900">Learning often happens in
        classrooms <br> but it doesn't have to. Use Hello World to facilitate experience no matter the context.</p>
      <div id="skill-section1" class="row">
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="900">
          <div id="skill-content" class="card text-center">
            <a href="/html/html_intro">
              <img src="images/html-5_5968267.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">HTML</h4>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1200">
          <div id="skill-content" class="card text-center">
            <a href="/css/css_intro">
              <img src="images/css-3_5968242.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">CSS</h4>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1400">
          <div id="skill-content" class="card text-center">
            <a href="/js/js_intro">
              <img src="images/js_5968292.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">JAVASCRIPT</h4>
              </div>
            </a>
          </div>
        </div>

        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="900">
          <div id="skill-content" class="card text-center">
            <a href="/bootstrap/bootstrap_intro">
              <img src="images/bootstrap.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">BOOTSTRAP</h4>
              </div>
            </a>
          </div>
        </div>
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1400">
          <div id="skill-content" class="card text-center">
            <a href="/react/react_intro">
              <img src="images/react.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">REACT</h4>
              </div>
            </a>
          </div>
        </div>
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1600">
          <div id="skill-content" class="card text-center">
            <a href="/nodejs/nodejs_intro">
              <img src="images/nodejs.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">NODE.JS</h4>
              </div>
            </a>
          </div>
        </div>
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="900">
          <div id="skill-content" class="card text-center">
            <a href="/c/c_intro">
              <img src="images/c.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">C</h4>
              </div>
            </a>
          </div>
        </div>
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1400">
          <div id="skill-content" class="card text-center">
            <a href="/java/java_intro">
              <img src="images/java.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">JAVA</h4>
              </div>
            </a>
          </div>
        </div>
        <div class="col-sm-6 col-md-4" data-aos="fade-up" data-aos-duration="1600">
          <div id="skill-content" class="card text-center">
            <a href="/python/python_intro">
              <img src="images/python.png" class="card-img-top" alt="Image 1">
              <div class="card-body">
                <h4 class="card-title">PYTHON</h4>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="row  ">
        <div id="more-tutorials" class="col-12 text-center" data-aos="fade-right" data-aos-duration="1000">
          <a href="/tutorial"><button class="btn  ">All Tutorials <i
                class="fa-solid fa-angles-right fa-bounce"></i></button></a>
        </div>
      </div>
    </div>
    <img src="images/wave1.png" class="bottom-img2" alt="">
  </div>
  <!-- !featured tutorial Section End -->


  <!-- ! Courses Section start -->
  <div class="container courses ">
    <div class="row text-center justify-content-center courses-content " " data-aos=" fade-up" data-aos-duration="1800">
      <h1 class="heading">Courses<span> Categories</span></h1>
      <div class="separator text-center"></div>
      <p id="heading-pera" class="text-center" data-aos="fade-right" data-aos-duration="1000">Let the journey of
        organizing your own learning.</p>




      <section id="categories" class="course-categories">
        <div class="containers">
          <div class="category-grid" id="categoryGrid">
            <div class="category-card " data-aos="fade-up" data-aos-duration="1000">
              <div class="category-content" onclick="window.location.replace('/web-development')">
                <div class="category-icon">💻</div>
                <h3 class="category-title">Web Development</h3>
                <!-- <p class="category-description">Master the art of creating stunning websites and web applications.</p> -->
                <a href="">
                  <div class="subcategory-count"> <i class="fa-solid fa-arrow-right px-2"></i>4 Subcategories</div>
                </a>

              </div>
            </div>
            <div class="category-card" data-aos="fade-up" data-aos-duration="1000">
              <div class="category-content"  onclick="window.location.replace('/data-science')">
                <div class="category-icon">📊</div>
                <h3 class="category-title">Data Science</h3>
                <!-- <p class="category-description">Unlock insights from data and drive informed decision-making.</p> -->
                <a href="">
                  <div class="subcategory-count"> <i class="fa-solid fa-arrow-right px-2"></i>4 Subcategories</div>
                </a>

              </div>
            </div>
            <div class="category-card" data-aos="fade-up" data-aos-duration="1000">
              <div class="category-content"  onclick="window.location.replace('/mobile-development')">
                <div class="category-icon">📱</div>
                <h3 class="category-title">Mobile Development</h3>
                <!-- <p class="category-description">Build powerful mobile apps for iOS and Android platforms.</p> -->
                <a href="">
                  <div class="subcategory-count"> <i class="fa-solid fa-arrow-right px-2"></i>4 Subcategories</div>
                </a>

              </div>
            </div>
            <div class="category-card" data-aos="fade-up" data-aos-duration="1000">
              <div class="category-content"  onclick="window.location.replace('/Cybersecurity')">
                <div class="category-icon">🔒</div>
                <h3 class="category-title">Cybersecurity</h3>
                <!-- <p class="category-description">Protect digital assets and learn ethical hacking techniques.</p> -->
                <a href="">
                  <div class="subcategory-count"> <i class="fa-solid fa-arrow-right px-2"></i>4 Subcategories</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>





      <div class="row  ">
        <div id="more-tutorials" class="col-12 text-center" data-aos="fade-right" data-aos-duration="1000">
          <a href="/courses"><button class="btn  ">All Courses<i
                class="fa-solid fa-angles-right fa-bounce"></i></button></a>
        </div>
      </div>

    </div>
  </div>
  <!-- ! Courses Section End -->


  <!-- !About us section start -->
  <div class="container-fluid  about-us-main">
    <img src="images/wave2.png" alt="" style="max-width: 100%; ">
    <div class="row about-us-second ">
      <h1 class="heading text-center"> Know <span>About Us</span></h1>
      <div class="separator text-center"></div>

      <!-- <p id="heading-pera" class="text-center "  data-aos="fade-right"  data-aos-duration="900">Creating A Community Of Life Long Learners.</p> -->

      <div class="col-sm-6 col-md-6 text-center justify-content-center about-us-third">
        <div class="row justify-content-center card-div">
          <div class="four col-6 " id="about-us-body" data-aos="fade-up" data-aos-duration="1000">
            <div class="counter-box colored about-us-card1" id="about-us-number">
              <img src="images/counter-01.png" alt="">
              <span class="counter">10000 </span><span class="plus">+</span>
              <h5>Happy Learners</h5>
            </div>
          </div>
          <div class="four col-6 about-us-card2" id="about-us-body" data-aos="fade-up" data-aos-duration="1200">
            <div class="counter-box " id="about-us-number">
              <img src="images/counter-02.png" alt="">
              <span class="counter">300</span><span class="plus">+</span>
              <h5>Courses and Tutorials</h5>
            </div>
          </div>
          <div class="four col-6" id="about-us-body" data-aos="fade-up" data-aos-duration="1100">
            <div class="counter-box about-us-card3" id="about-us-number">
              <img src="images/counter-04.png" alt="">
              <span class="counter">1000</span><span class="plus">+</span>
              <h5>Certified Students</h5>
            </div>
          </div>
          <div class="four col-6 about-us-card4" id="about-us-body" data-aos="fade-up" data-aos-duration="1200">
            <div class="counter-box " id="about-us-number">
              <img src="images/counter-03.png" alt="">
              <span class="counter">250</span><span class="plus">+</span>
              <h5>Road-Maps</h5>
            </div>
          </div>
        </div>

      </div>

      <div class="col-sm-6 col-md-6 about-us-details ">

        <!-- <img src="images/curved-arrow.png" alt="" style="max-width: 15%;"> -->

        <!-- <h1>Hello World</h1> -->
        <img class="helloworldlogo2" src="images/logo2.png" alt="" style="max-width: 40%;" data-aos="fade-left"
          data-aos-duration="1100">
        <p data-aos="fade-up" data-aos-duration="1200">is all in one E-learning platform that is designed to be
          interactive, engaging, and learner-centric. You'll find a variety of learning resources such as video
          tutorials, interactive coding exercises, quizzes, and forums to enhance your understanding and facilitate
          active learning and provide</p>

        <div class="about-us-icon" data-aos="fade-up" data-aos-duration="1100">
          <h5><i class="fa-regular fa-heart"></i>Easy Learning</h5>
          <p>Hello World has focus on simple code examples and simple illustrations of how to use it. Simplicity is at
            the heart of our user interface, ensuring a clean and intuitive learning environment.</p>
        </div>

        <div class="about-us-icon about-us-icon2" data-aos="fade-up" data-aos-duration="1100">
          <h5><i class="fa-solid fa-book"></i></i>Learn From Anywhere</h5>
          <p>Our platform opens the doors to a wealth of knowledge, just tap on tutorial and start learning from "hello
            world" to master. whether you're on the move with your phone,laptop and tablet, let our platform be your
            gateway to limitless knowledge.</p>
        </div>

        <div class="about-us-icon about-us-icon2" data-aos="fade-up" data-aos-duration="1100">
          <h5><i class="fa-solid fa-folder-tree"></i></i>Structured Learning Path</h5>
          <p>Our learning roadmaps offer carefully curated and structured learning paths, designed by industry experts,
            to help you build a strong foundation and progress systematically.</p>
        </div>
      </div>
    </div>
    <img src="images/wave1.png" class="bottom-img" style="max-width: 100%;  padding: 0;" alt="">
  </div>
  <!-- !About us section End -->


  <!-- !Our Services section start -->
  <div class="container-fluid " id="services-main">
    <div class="row justify-content-center">
      <h1 class="heading text-center ">Our <span>Services</span></h1>

      <div class="separator text-center"></div>
      <p id="heading-pera" class="text-center " data-aos="fade-right" data-aos-duration="900">Challenge Your Knowledge
        with the Hello World.</p>


      <div class="col-lg-3 col-sm-6 services-sec " data-aos="fade-up" data-aos-duration="1000">
        <a href="/quizzes" class="services-small-item ">
          <div class="icon">
            <img src="images/quiz_8587212.png" alt="" style="max-width: 60%;">
          </div>
          <h3 class="services-title">Quizzes</h3>
          <p>Immerse yourself, Engage your mind, test your knowledge, and have fun with the interactive quiz feature and
            master the technologies.</p>
          <div class="button">
            <i class="fa fa-chevron-right"></i>
          </div>
        </a>
      </div>


      <div class="col-lg-3 col-sm-6 services-sec" data-aos="fade-up" data-aos-duration="1100">
        <a href="/questions" class="services-small-item color-full">
          <div class="icon">
            <img src="images/question_5277568.png" alt="" style="max-width: 60%;">
          </div>
          <h3 class="services-title">Interview Q/A</h3>
          <p>Top 100 Interview Questions Series, a comprehensive collection of carefully curated questions and answers
            designed to help you ace your next job interview. </p>
          <div class="button">
            <i class="fa fa-chevron-right"></i>
          </div>
        </a>
        <div class="item-bg"></div>
      </div>

      <div class="col-lg-3 col-sm-6 services-sec" data-aos="fade-up" data-aos-duration="1200">
        <a href="/roadmap" class="services-small-item">
          <div class="icon">
            <img src="images/timeline_8558813.png" alt="" style="max-width: 60%;">
          </div>
          <h3 class="services-title">Road Maps</h3>
          <p>Offer precisely designed road-maps that's break down complex topics into manageable steps, allowing you to
            progress systematically. </p>
          <div class="button">
            <i class="fa fa-chevron-right"></i>
          </div>
        </a>
        <div class="item-bg"></div>
      </div>


      <div class="col-lg-12 col-sm-6 resume-sec">

      </div>

    </div>
    <div class="row  ">
      <div id="more-tutorials" class="col-12 text-center" data-aos="fade-right" data-aos-duration="1000">
        <a href="/services"><button class="btn  ">Explore Services <i
              class="fa-solid fa-angles-right fa-bounce"></i></button></a>
      </div>
    </div>
  </div>
  <!-- !Our Services section End -->

  

  <!-- !DSA Visualizer Section start -->
  <div class="container-fluid certificate-main">
    <img src="images/wave2.png" alt="" style="max-width: 100%; padding: 0%; ">
    <div class="row m-0">
      <h1 class="heading text-center">DSA <span>Visualizer</span> </h1>
      <div class="separator text-center"></div>
      <p id="heading-pera" class="text-center " data-aos="fade-right" data-aos-duration="900">Bringing Clarity to Data Structures and Algorithms Through Interactive Visualizations</p>


      <div class="container">
        <section class="dsa-visualization-section p-4 p-md-5">
            <div class="floating-shapes">
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
                <div class="shape shape-3"></div>
            </div>
          
            <div class="row g-4 mb-5">
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card h-100 p-4 text-center">
                        <div class="feature-icon mb-3">🔍</div>
                        <h3 class="h4 mb-3">Step-by-Step Breakdown</h3>
                        <p>Watch algorithms unfold one step at a time, gaining deeper insights into their inner workings.</p>
                    </div>
                </div>
                <!-- <div class="col-md-6 col-lg-3">
                    <div class="feature-card h-100 p-4 text-center">
                        <div class="feature-icon mb-3">🎨</div>
                        <h3 class="h4 mb-3">Color-Coded Elements</h3>
                        <p>Easily track different components and their roles with our intuitive color-coding system.</p>
                    </div>
                </div> -->
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card h-100 p-4 text-center">
                        <div class="feature-icon mb-3">⏯️</div>
                        <h3 class="h4 mb-3">Interactive Controls</h3>
                        <p>Pause, rewind, or speed up visualizations to study algorithms at your own pace.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card h-100 p-4 text-center">
                        <div class="feature-icon mb-3">📊</div>
                        <h3 class="h4 mb-3">Real-time Analytics</h3>
                        <p>Monitor performance metrics and complexity analysis as algorithms execute.</p>
                    </div>
                </div>
            </div>
            
            <div class="row g-4 mb-2">
                <div class="col-md-4">
                    <div class="visualization-example p-4 text-center h-100"  onclick="window.location.replace('/web-development')">
                        <h3 class="h4 mb-3">Bubble Sort</h3>
                        <div class="visualization-container bubble-sort">
                            <div class="bar"></div>
                            <div class="bar"></div>
                            <div class="bar"></div>
                            <div class="bar"></div>
                            <div class="bar"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="visualization-example p-4 text-center h-100">
                      <h3 class="h4 mb-3">Binary Search Tree</h3>
                      <div class="visualization-container">
                          <svg width="200" height="200">
                              <path class="bst-arrow" d="M100,20 L60,60" style="animation-delay: 0.5s;"/>
                              <path class="bst-arrow" d="M100,20 L140,60" style="animation-delay: 0.5s;"/>
                              <path class="bst-arrow" d="M60,60 L40,120" style="animation-delay: 1s;"/>
                              <path class="bst-arrow" d="M60,60 L80,120" style="animation-delay: 1s;"/>
                              <g class="bst-tree">
                                  <circle class="bst-node" cx="100" cy="20" r="20"/>
                                  <circle class="bst-node" cx="60" cy="60" r="20" style="animation-delay: 0.2s;"/>
                                  <circle class="bst-node" cx="140" cy="60" r="20" style="animation-delay: 0.2s;"/>
                                  <circle class="bst-node" cx="40" cy="120" r="20" style="animation-delay: 0.4s;"/>
                                  <circle class="bst-node" cx="80" cy="120" r="20" style="animation-delay: 0.4s;"/>
                                  <text x="100" y="25" text-anchor="middle" fill="white" font-size="12">50</text>
                                  <text x="60" y="65" text-anchor="middle" fill="white" font-size="12">25</text>
                                  <text x="140" y="65" text-anchor="middle" fill="white" font-size="12">75</text>
                                  <text x="40" y="125" text-anchor="middle" fill="white" font-size="12">10</text>
                                  <text x="80" y="125" text-anchor="middle" fill="white" font-size="12">35</text>
                              </g>
                          </svg>
                      </div>
                  </div>
              </div>
                <div class="col-md-4">
                    <div class="visualization-example p-4 text-center h-100">
                        <h3 class="h4 mb-3">Linked List</h3>
                        <div class="visualization-container">
                            <div class="linked-list">
                                <div class="list-node">1</div>
                                <div class="list-node">2</div>
                                <div class="list-node">3</div>
                                <div class="list-node">4</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div id="more-tutorials" class="col-12 text-center" >
          <a href="/dsa-visualizer"><button class="btn  ">Explore More<i
                class="fa-solid fa-angles-right fa-bounce"></i></button></a>
        </div>
    </div>


      <!-- <div class="col-sm-12 col-md-6 graph text-center" data-aos="fade-up" data-aos-duration="1100">


      </div>
      <div class="col-sm-12 col-md-6 text-center" data-aos="fade-up" data-aos-duration="1100">
    

      </div> -->
    </div>
    <img src="images/wave1.png" alt="" style="max-width: 100%; padding: 0%; ">
  </div>
  <!-- !DSA Visualizer Section End -->


  <!-- !Resume Builder section start -->
  <div class="container-fluid">
    <div class="banner row g-0 align-items-stretch">
        <div class="col-lg-6">
            <div class="banner-content d-flex flex-column justify-content-center h-100">
                <h1>
                 
                    <span class="animated-text">Craft Your</span>
                    <span class="animated-text">Career-Launching</span>
                    <span class="animated-text">Resume</span>
                </h1>
                <p class="animated-text">Transform your career journey with a resume that opens doors. Our AI-powered builder creates stunning, ATS-friendly resumes tailored to your industry.</p>
                <ul class="feature-list">
                    <li class="animated-text">50+ professionally designed templates</li>
                    <li class="animated-text">Smart content suggestions powered by AI</li>
                    <li class="animated-text">ATS-optimized formats for higher pass rates</li>
                    <li class="animated-text">Real-time preview and easy editing</li>
                    <li class="animated-text">Export in PDF, Word, or TXT formats</li>
                </ul>
                <div>
                    <a href="/resume-builder" class="btn btn-primary animated-text">Build My Standout Resume</a>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="banner-image">
                <div class="resume-preview">
                    <img src="/images/resume-sample1 (1).jpeg" alt="Resume Preview 1">
                    <img src="/images/resume-sample1 (2).png" alt="Resume Preview 3">
                    <img src="/images/resume-sample1 (1).png" alt="Resume Preview 2">
                   
                </div>
            </div>
        </div>
    </div>
</div>
  <!-- !resume Builder section End -->


  <!-- !get certificate section start -->
  <div class="container-fluid certificate-main">
    <img src="images/wave2.png" alt="" style="max-width: 100%; padding: 0%; ">
    <div class="row m-0">
      <h1 class="heading text-center">Get <span>Certified</span> </h1>
      <div class="separator text-center"></div>




      <div class="col-sm-12 col-md-6 graph text-center" data-aos="fade-up" data-aos-duration="1100">
        <h1><span>Unlock </span>Your Potential and <span>Achieve</span> Excellence with <span>Certified </span>Course
          Completion.</h1>
        <a href="" class="btn" data-aos="fade-right" data-aos-duration="1400">Get Certified <i
            class="fa-solid fa-certificate fa-spin"></i></a>

      </div>
      <div class="col-sm-12 col-md-6 text-center" data-aos="fade-up" data-aos-duration="1100">
        <img src="images/badge.png" alt="" class="badge-img" style="max-width: 65%; margin-left: ;">

      </div>
    </div>
    <img src="images/wave1.png" alt="" style="max-width: 100%; padding: 0%; ">
  </div>
  <!-- !get certificate section End -->


  <!-- !Newsletter section start -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 newsletter text-center " data-aos="fade-up" data-aos-duration="1100">
        <img src="images/Newsletter-pana.png" alt="">
      </div>
      <div class="col-12 newsletter-text text-center" data-aos="fade-right" data-aos-duration="1100">
        <h1>Want to get <span>special offers</span>
          and <span>Course</span> updates?</h1>
        <!-- <h3>Stay in touch.</h3> -->
        <h3><span>2000+</span> Students are <span>subscribe</span> Around the <span> World</span>.</h3>
        <h1 style="font-family: 'Montez', cursive;">Don’t be shy introduce yourself!

        </h1>
        <div class="email1  text-start">
         <form action="/subscribe" method="post" id="subscribe-form">
          <input type="email" name="email" id="email" placeholder="Enter your E-mail" required>
          <button>Subscribe <i class="fa-solid fa-arrow-right"></i></button>
         </form>
        
        </div>
        <div id="message"></div>
      </div>
    </div>

  </div>
  <!-- !Newsletter section End -->


  <script>
    const baseUrl = "/";
    const tutorials = {
      "html": "html/html_intro",
      "css": "css/css_intro",
      "bootstrap": "bootstrap/bootstrap_intro",
      "nodejs": "nodejs/nodejs_intro",
      "javascript": "js/js_intro",
      "c": "c/c_intro",
      "java": "java/java_intro",
      "python": "python/python_intro",
      "react": "react/react_intro"
    };

    function searchTutorials(event) {
      event.preventDefault(); // Prevent the default form submission
      const query = document.getElementById('searchInput').value.trim().toLowerCase();

      // Find the best match for the query
      const matchingTutorial = Object.keys(tutorials).find(tutorial => tutorial.startsWith(query));

      if (matchingTutorial) {
        window.location.href = `${baseUrl}${tutorials[matchingTutorial]}`;
      } else {
        // If no match, display the error modal
        showModal();
        document.getElementById('suggestions').style.display = 'none';
      }
    }

    function showSuggestions(event) {
      const query = event.target.value.trim().toLowerCase();
      const suggestionsContainer = document.getElementById('suggestions');
      suggestionsContainer.innerHTML = ''; // Clear previous suggestions

      if (query) {
        const filteredTutorials = Object.keys(tutorials).filter(tutorial => tutorial.includes(query));
        if (filteredTutorials.length > 0) {
          suggestionsContainer.style.display = 'block';
          filteredTutorials.forEach(tutorial => {
            const suggestionItem = document.createElement('li');
            suggestionItem.textContent = tutorial;
            suggestionItem.onclick = () => {
              document.getElementById('searchInput').value = tutorial;
              suggestionsContainer.style.display = 'none';
            };
            suggestionsContainer.appendChild(suggestionItem);
          });
        } else {
          suggestionsContainer.style.display = 'none';
        }
      } else {
        suggestionsContainer.style.display = 'none';
      }
    }

    function showModal() {
      const modal = document.getElementById('errorModal');
      modal.style.display = 'block';
    }

    function closeModal() {
      const modal = document.getElementById('errorModal');
      modal.style.display = 'none';
    }

    // Hide modal when clicking outside of it
    window.onclick = function (event) {
      const modal = document.getElementById('errorModal');
      if (event.target == modal) {
        modal.style.display = 'none';
      }
    }

    // Hide suggestions when clicking outside the search container
    document.addEventListener('click', (event) => {
      const suggestionsContainer = document.getElementById('suggestions');
      if (!event.target.closest('.search-container')) {
        suggestionsContainer.style.display = 'none';
      }
    });



    // scripts.js
    document.addEventListener("DOMContentLoaded", function () {
      // Hide the loader once content is fully loaded
      var loader = document.getElementById("loader");
      loader.style.display = "none";

      // Optionally, show loader during AJAX requests or other async operations
      // Example using Fetch API
      fetch('/some-data-endpoint')
        .then(response => response.json())
        .then(data => {
          // Process data
          // Hide loader when data is loaded
          loader.style.display = "none";
        })
        .catch(error => {
          console.error('Error fetching data:', error);
          // Hide loader on error as well
          loader.style.display = "none";
        });
    });

  </script>
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const animatedElements = document.querySelectorAll('.animated-text');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1 });

        animatedElements.forEach(element => {
            observer.observe(element);
        });
    });
</script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('subscribe-form');
    const messageDiv = document.getElementById('message');

    form.addEventListener('submit', async (event) => {
        event.preventDefault(); // Prevent form from submitting the default way

        const email = document.getElementById('email').value;

        try {
            const response = await fetch('/subscribe', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email })
            });

            if (response.ok) {
                messageDiv.innerHTML = '<p>Subscription successful! A confirmation email has been sent.</p>';
                // Optionally, you can also use JavaScript alert for a popup
                alert('Subscription successful! A confirmation email has been sent.');
            } else {
                const error = await response.text();
                messageDiv.innerHTML = `<p>Error: ${error}</p>`;
            }
        } catch (error) {
            console.error('Error:', error);
            messageDiv.innerHTML = `<p>Error: ${error.message}</p>`;
        }
    });
});

</script>
</body>