protofolio.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technoit</title>
  <!-- ! Page Title Icon -->
  <link rel="icon" href="images/microchip-solid.svg" type="image/svg+xml">
  <!-- ! Font Awesome Library -->
  <link rel="stylesheet" href="css/all.min.css">
  <!-- ! Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- ! Main Template CSS File -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/darkMode.css">
  <link rel="stylesheet" href="css/singlePage.css">
  <link rel="stylesheet" href="css/aos.css">
  <!-- ! Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap">
  <!-- ! AOS Library -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>

<body>
  <!-- ! Start Header -->
  <header class="d-flex align-items-center fixed-top justify-content-around bg-transparent">
    <!-- ! Start Navbar -->
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand" href="index.html">
          <img src="images/logo.png" alt="Technoit" class="img-fluid">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span>
            <i class="fa-solid fa-sliders"></i>
          </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="services.html">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="protofolio.html">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="testimonials.html">Testimonials</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="team.html">Team</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Menu
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="about.html">About</a></li>
                <li><a class="dropdown-item" href="packages.html">Pricing</a></li>
                <li><a class="dropdown-item" href="faqs.html">FAQs</a></li>
                <li><a class="dropdown-item" href="privacy-policy.html">Terms & Conditions</a></li>
                <li><a class="dropdown-item" href="privacy-policy.html">Privacy Policy</a></li>
                <li><a class="dropdown-item" href="blogs.html">Blogs</a></li>
                <li><a class="dropdown-item" href="blog-details.html">Blog Detail Page</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="blogs.html">News</a>
            </li>
          </ul>
          <button type="button" class="btn btn-primary rounded-pill get-quotes"><a href="contact.html">Get
              Quotes</a></button>
          <button id="darkmode-button" class="btn rounded-circle">
            <i class="fa-solid fa-moon"></i>
          </button>
        </div>
      </div>
    </nav>
    <!-- ! End Navbar -->
  </header>
  <!-- ! End Header -->
  <div class="breadcrumbs sticked-header-offset">
    <div class="page-header d-flex align-items-center">
      <div class="container position-relative">
        <div class="row d-flex justify-content-center">
          <div class="col-lg-6 text-center">
            <h2 data-aos="fade-up" data-aos-delay="300">Our Portfolio</h2>
            <p data-aos="fade-up" data-aos-delay="400">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
          </div>
        </div>
      </div>
    </div>
    <nav aria-label="breadcrumb">
      <div class="container">
        <ol class="breadcrumb" data-aos="fade-up" data-aos-delay="700">
          <li class="breadcrumb-item Home"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Our Portfolio</li>
        </ol>
      </div>
    </nav>
  </div>
  <!-- ! Start Protfolio -->
  <div class="protofolio" id="protofolio">
    <div class="container" data-aos="fade-up" data-portfolio-filter="*" data-portfolio-layout="masonry"
      data-portfolio-sort="original-order" data-aos="fade-up" data-aos-delay="100">
      <div class="buttons">
        <button type="button" data-cat="all" class="btn btn-primary rounded-5 rounded-end active">All</button>
        <button type="button" data-cat="app-des" class="btn btn-primary rounded-0">Design</button>
        <button type="button" data-cat="app-dev" class="btn btn-primary rounded-0">Development</button>
        <button type="button" data-cat="brand" class="btn btn-primary rounded-0">Branding</button>
        <button type="button" data-cat="it-sol" class="btn btn-primary rounded-5 rounded-start">It</button>
      </div>
      <div class="photos">
        <div class="container">
          <div class="photo all app-des" data-aos="fade-up" data-aos-delay="100">
            <img src="images/product-1.jpg" alt="">
          </div>
          <div class="photo all app-dev" data-aos="fade-up" data-aos-delay="200">
            <img src="images/product-2.jpg" alt="">
          </div>
          <div class="photo all brand" data-aos="fade-up" data-aos-delay="400">
            <img src="images/product-3.jpg" alt="">
          </div>
          <div class="photo all it-sol" data-aos="fade-up" data-aos-delay="100">
            <img src="images/product-4.jpg" alt="">
          </div>
          <div class="photo all app-des" data-aos="fade-up" data-aos-delay="200">
            <img src="images/product-5.jpg" alt="">
          </div>
          <div class="photo all brand" data-aos="fade-up" data-aos-delay="500">
            <img src="images/product-6.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ! End Protfolio -->
  <!-- ! Start Footer -->
  <footer id="footer" class="footer-section">
    <div class="container">
      <div class="footer-content pt-5 pb-5">
        <div class="row">
          <div class="col-xl-4 col-lg-4 mb-50">
            <div class="footer-widget">
              <div class="footer-logo">
                <a href="index.html" class="logo d-flex align-items-center">
                  <img src="images/logo.png" alt="logo">
                </a>
              </div>
              <div class="footer-text">
                <p>Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do eiusmod tempor incididuntut consec
                  tetur adipisicing
                  elit,Lorem ipsum dolor sit amet.</p>
              </div>
              <div class="footer-social-icon">
                <span>Follow us</span><a href="https://github.com/GziXnine" target="_blank"><i
                    class="fa-brands fa-github"></i></a>
                <a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook"></i></a>
                <a href="https://www.linkedin.com/in/1ahmed-allam/" target="_blank"><i
                    class="fa-brands fa-linkedin"></i></a>
                <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
              </div>
            </div>
          </div>

          <div class="col-lg-2 col-md-6 col-sm-12 footer-column">
            <div class="service-widget footer-widget">
              <div class="footer-widget-heading">
                <h3>Services</h3>
              </div>
              <ul class="list">
                <li><a href="services.html">Web Design</a></li>
                <li><a href="services.html">App Developemnt</a></li>
                <li><a href="services.html">Cloud Services</a></li>
                <li><a href="services.html">Domain adn Hosting</a></li>
                <li><a href="services.html">Seo Optimization</a></li>
                <li><a href="services.html">Digital Marketing</a></li>
                <li><a href="services.html">Search Engine</a></li>
                <li><a href="services.html">Domain & Hosting</a></li>
                <li><a href="services.html">Email Marketing</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-2 col-md-6 col-sm-12 footer-column">
            <div class="service-widget footer-widget">
              <div class="footer-widget-heading">
                <h3>Information</h3>
              </div>
              <ul class="list">
                <li><a href="about.html">About</a></li>
                <li><a href="packages.html">Pricing</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="protofolio.html">Portfolio</a></li>
                <li><a href="faqs.html">FAQs</a></li>
                <li><a href="blogs.html">Blogs</a></li>
                <li><a href="blog-details.html">Blog Details</a></li>
                <li><a href="coming-soon.html">Coming Soon</a></li>
                <li><a href="privacy-policy.html">Terms &amp; Conditions</a></li>
                <li><a href="privacy-policy.html">Privacy Policy</a></li>
              </ul>
            </div>
          </div>
          <div class="col-xl-4 col-lg-4 col-md-6 mb-50">
            <div class="contact-widget footer-widget">
              <div class="footer-widget-heading">
                <h3>Contacts</h3>
              </div>
              <div class="footer-text">
                <p><i class="fa-solid fa-location-dot"></i> 101 West Town , PBO 12345, United States</p>
                <p><i class="fa-solid fa-phone"></i></i> +1 1234 56 789</p>
                <p><i class="fa-solid fa-envelope"></i> contact@example.com</p>
              </div>
            </div>
            <div class="footer-widget">
              <div class="footer-widget-heading">
                <h3>Newsletter</h3>
              </div>
              <div class="footer-text mb-25">
                <p>Don't miss to subscribe to our new feeds, kindly fill the form below.</p>
              </div>
              <div class="subscribe-form">
                <form action="#" id="email-form">
                  <input type="text" placeholder="Email Address" id="email-input">
                  <button id="submit-button">
                    <i class="fa-brands fa-telegram"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-6 col-lg-6 text-left text-lg-left">
            <div class="copyright-text">
              <p>&copy; 2024 <a href="https://github.com/GziXnine" target="_blank"><span>Allam</span></a> All Right
                Reserved
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- ! End Footer -->
  <!---------------------------------------------------------------------------->
  <script src="js/bootstrap.bundle.min.js"></script>
  <!-- ! This Render Icon As SVG... -->
  <script src="js/all.min.js"></script>
  <!-- ! JavaScript File -->
  <script src="js/main.js"></script>
  <script src="js/aos.js"></script>
</body>

</html>