<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Computality Team</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/sign.ico" />
    <!-- Bootstrap Icons-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <!-- Google fonts-->
    <link
      href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <!-- SimpleLightbox plugin CSS-->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css"
      rel="stylesheet"
    />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  </head>
  <body id="page-top" style="overflow-x: hidden;">
    <!-- Navigation-->
    <nav
      class="
        navbar navbar-expand-lg navbar-light
        fixed-top
        bg-light
        text-black
        navbar-shrink
      "
      id="mainNav"
    >
      <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="#page-top">
          <img src="./assets/img/computality-hor.png" height="50px" alt="" />
        </a>
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ms-auto my-2 my-lg-0">
            <li class="nav-item">
              <a class="nav-link" data-aos="fade-down" data-aos-delay="0" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-aos="fade-down" data-aos-delay="100" href="#services">Roadmap</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-aos="fade-down" data-aos-delay="200" href="#portfolio">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-aos="fade-down" data-aos-delay="300" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Masthead-->
    <header class="masthead">
      <div class="container px-4 px-lg-5 h-100">
        <div
          class="
            row
            gx-4 gx-lg-5
            h-100
            align-items-center
            justify-content-center
            text-center
          "
        >
          <div class="col-lg-8 align-self-end" data-aos="flip-left">
            <img
            
              src="./assets/img/computality.png"
              style="max-width: 100%"
              alt=""
            />
            <hr class="divider" />
          </div>
          <div class="col-lg-8 align-self-baseline">
            <p data-aos="fade-up" class="text-light mb-5 text-capitalize">
              everything starts from ZERO
            </p>
            <a data-aos="fade-up" data-aos-delay="300" class="btn btn-primary btn-xl" href="#about">Find Out More</a>
          </div>
        </div>
      </div>
    </header>
    <!-- About-->
    <section class="page-section bg-mg" id="about">
      <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
          <div class="col-lg-8 text-center">
            <h2 class="text-white mt-0" data-aos="fade-up" data-aos-delay="0">Who we are?</h2>
            <hr class="divider divider-light" />
            <p data-aos="fade-up" data-aos-delay="100" class="text-white-75 mb-4">
              We are a volunteer team at the Faculty of Science at Menoufia
              University. We care about programming and development and qualify
              students well for the labor market by guiding and establishing
              them in a correct way in the field of programming
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- Services-->
    <section class="page-section bg-ovarlay" id="services">
      <div class="container px-4 px-lg-5">
        <h2 class="text-center mt-0" data-aos="fade-up" data-aos-delay="0">Ways to help students </h2>
        <hr class="divider" />
        <div class="row gx-4 gx-lg-5">
          <div data-aos="fade-right" data-aos-delay="100" class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
              <h3 class="h4 mb-2">Programming Resources</h3>
              <p class="text-muted mb-0">
                We provide the necessary resources to learn the basics well
              </p>
            </div>
          </div>
          <div data-aos="fade-up" data-aos-delay="0" class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <div class="mb-2">
                <i class="bi bi-bar-chart-line-fill fs-1 text-primary"></i>
              </div>
              <h3 class="h4 mb-2">Constant Follow-up</h3>
              <p class="text-muted mb-0">
                Monitoring the student's level permanently through tests and activities
              </p>
            </div>
          </div>
          <div data-aos="fade-up" data-aos-delay="0" class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <div class="mb-2"><i class="bi bi-tools fs-1 text-primary"></i></div>
              <h3 class="h4 mb-2">Problem Solving</h3>
              <p class="text-muted mb-0">
                Developing the student's problem solving skill to develop his thinking
              </p>
            </div>
          </div>
          <div data-aos="fade-left" data-aos-delay="100" class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
              <h3 class="h4 mb-2">Generation development</h3>
              <p class="text-muted mb-0">
                Creating a generation capable of continuing our goal and striving to help students after us
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Portfolio-->
    <section id="portfolio" style="max-width: 100vw;" class="py-3 overflow-hidden w-100  bg-ovarlay">
      <div class="container p-0">
        <h2 class="text-center mt-0" data-aos="fade-up" data-aos-delay="0">
            Gallery
        </h2>
        <hr class="divider" />
        <div id="gallery" style="max-width: 100vw;" class="d-flex flex-wrap justify-content-center">
          
          
       <!-- js controlled -->
          
        </div>
      </div>
    </section>
 
    <!-- Footer-->
    <footer class="bg-light py-3">
      <div class="container">
        <div class="small  text-muted">
            <div class="row justify-content-between">
                <div class="col-auto">
                    Copyright &copy; <span id="year"></span> - Computality Team
                 </div>
                <div class="col-auto">
                    Designed with <em class="bi bi-heart-fill text-primary"></em> by <a target="_blank" href="https://www.linkedin.com/in/magdy-elsayyad-14a086193/">Magdy Elsayyad</a>
                 </div>
            </div>
        </div>
      </div>
    </footer>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- SimpleLightbox plugin JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
    <!-- Core theme JS-->
    <script src="js/scripts.js"></script>
    <script  src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 
  </body>
</html>
