project5.html

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>

    <!--- basic page needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Infotech Programmer</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- mobile specific metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/vendor.css">
    <link rel="stylesheet" href="css/main.css">

    <style type="text/css" media="screen">
        .s-styles { 
            background: white;
            padding-top: 15rem;
            padding-bottom: 12rem;
        }
    </style>    

    <!-- script
    ================================================== -->
    <script src="js/modernizr.js"></script>
    <script src="js/pace.min.js"></script>

    <!-- favicons
    ================================================== -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

</head>
    
  <!-- Navigation SideBar-->
  <body id="top">

    <!-- header
    ================================================== -->
    
      <header class="s-header">
    
    <div class="header-logo">
        <a class="site-logo" href="index.html">
            <img src="images/logo.svg" alt="Homepage">
        </a>
    </div> <!-- end header-logo -->
    
    <nav class="header-nav">
    
        <a href="#0" class="header-nav__close" title="close"><span>Close</span></a>
    
        <div class="header-nav__content">
            <h3>Infotech Programmer</h3>
            
            <ul class="header-nav__list">
                <li class="current"><a href="index.html#home" title="home">Home</a></li>
                <li><a href="index.html#services" title="services">About</a></li>
                <li><a href="index.html#works" title="works">Projects</a></li>
                <li><a class="smoothscroll"  href="#contact" title="contact">Contact</a></li>
            </ul>
    
            <p>I am a creative individual passionate about Web Development and Content Creation.</p>
    
            <ul class="header-nav__social">
                <li>
                    <a href="https://www.youtube.com/channel/UCjSmUb5HMaQvE7jvgnANFFA"><i
                            class="fab fa-youtube"></i></a>
                </li>
                <li>
                    <a href="https://www.instagram.com/infotechprogrammer/"><i class="fab fa-instagram"></i></a>
                </li>
                <li>
                    <a href="https://t.me/infotechprogrammer"><i class="fab fa-telegram"></i></a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/in/infotech-programmer-9a503020a/"><i class="fab fa-linkedin"></i></a>
                </li>
                <li>
                    <a href="https://www.facebook.com/infotechprogramming"><i class="fab fa-facebook"></i></a>
                </li>
                <li>
                    <a href="https://twitter.com/infotprogrammer"><i class="fab fa-twitter"></i></a>
                </li>
            </ul>
    
           
    
        </div> <!-- end header-nav__content -->
    
    </nav> <!-- end header-nav -->
    
    <a class="header-menu-toggle" href="#0">
        <span class="header-menu-icon"></span>
    </a>
    
    </header> <!-- end s-header -->
    <!-- End of Navigation SideBar-->

    <!-- home
    ================================================== -->
    <section id="home" class="s-home target-section" data-parallax="scroll" data-image-src="images/p5.jpg" data-natural-width=3000 data-natural-height=1600 data-position-y=top>

		
        <a href="#styles" class="home-scroll smoothscroll">
            <span class="home-scroll__text">Scroll Down</span>
            <span class="home-scroll__icon"></span>
        </a> <!-- end home-scroll -->

    </section> <!-- end s-home -->

    <!-- styles
    ================================================== -->
    <section id="styles" class="s-styles">
        
        <div class="row narrow section-intro add-bottom text-center">

            <div class="col-twelve tab-full" align="justify">

                <h1 class="display-1">Project Description</h1>

                <p class="lead">It is a advanced version of shopkart. An amazing shopping website made in wordpress with amazing design and features. It have all things that a well made shopping website should have. For more info see snapshots below and you can see below the skills used in this project.</p>

            </div>

        </div>


        <div class="row half-bottom">

            <div class="col-six tab-full">

            <h3>Project Snapshots</h3>	
            <p>Must check these slides for little overview about this website project</p>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="1500" data-pause="hover">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="9"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/p5/pg1.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg2.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg3.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg4.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg5.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg6.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg7.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg8.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
      <div class="carousel-item">
        <img src="images/p5/pg9.jpg" class="d-block w-100" width="100px" height="625px">
      </div>      
      <div class="carousel-item">
        <img src="images/p5/pg10.jpg" class="d-block w-100" width="100px" height="625px">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
            

            <p><br>
                <a class="btn full-width" href="#0">Open Project</a>
				<!-- <a class="btn btn--primary full-width" href="#0">Primary Button</a> -->
            </p>
            </div>

            <div class="col-six tab-full">

                <h3>Skills Used</h3>
                
                <ul class="skill-bars">
                    <li>
                    <div class="progress percent10"><span>10%</span></div>
                    <strong>HTML5 (10%)</strong>
                    </li>
                    <li>
                    <div class="progress percent10"><span>10%</span></div>
                    <strong>CSS3 (10%)</strong>
                    </li>
                    <li>
                    <div class="progress percent10"><span>10%</span></div>
                    <strong>JavaScript (10%)</strong>
                    </li>
                    <li>
                    <div class="progress percent55"><span>55%</span></div>
                    <strong>Wordpress (55%)</strong>
                    </li>
                    <li>
                    <div class="progress percent15"><span>15%</span></div>
                    <strong>PHP (15%)</strong>
                    </li>
                </ul>

            </div>

        </div> <!-- end row -->

    </section> <!-- end styles -->

  <!-- contact
    ================================================== -->
    <section id="contact" class="s-contact">

      <div class="row section-header" data-aos="fade-up">
          <div class="col-full">
              <h3 class="subhead subhead--light">Contact Us</h3>
              <p class="display-1 display-1--light">Get in touch and let's make something great together. Let's turn your idea on an even greater product.</p>
          </div>
      </div> <!-- end section-header -->

      <div class="row">

          <div class="col-five tab-full contact-secondary" data-aos="fade-up">
              <h3 class="subhead subhead--light">Where To Find Us</h3>
              <b>Email:</b> <a href="https://mail.google.com/mail/u/0/#inbox?compose=GTvVlcRzCpQxrVQGZnRxCGXgHTnhdqKfkTcWrslpqtbDFzTfhKZjlpffkpDVdldBVDpjBHZdrlqSJ" target="_blank"><font size="2px">infotechprogramming@gmail.com</font></a><br>
              <b>Telegram:</b> <a href="https://telegram.me/infotechprogrammer" target="_blank"><font size="2.5em">Infotech Programmer</font></a><br>
              <b>Instagram:</b> <a href="https://www.instagram.com/infotechprogrammer/" target="_blank"><font size="2px">@infotechprogrammer</font></a>
          </div> <!-- end contact-secondary -->

          <div class="col-five tab-full contact-secondary" data-aos="fade-up">
              <h3 class="subhead subhead--light">Follow Us</h3>

              <ul class="contact-social">
                <li>
                    <a href="https://www.youtube.com/channel/UCjSmUb5HMaQvE7jvgnANFFA"><i
                            class="fab fa-youtube"></i></a>
                </li>
                <li>
                    <a href="https://www.instagram.com/infotechprogrammer/"><i class="fab fa-instagram"></i></a>
                </li>
                <li>
                    <a href="https://t.me/infotechprogrammer"><i class="fab fa-telegram"></i></a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/in/infotech-programmer-9a503020a/"><i class="fab fa-linkedin"></i></a>
                </li>
                <li>
                    <a href="https://www.facebook.com/infotechprogramming"><i class="fab fa-facebook"></i></a>
                </li>
                <li>
                    <a href="https://twitter.com/infotprogrammer"><i class="fab fa-twitter"></i></a>
                </li>

              </ul> <!-- end contact-social -->

      </div> <!-- end row -->
      <hr>
      <div class="row" align="center">
          <div class="col-full cl-copyright">
              <span><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved |<a href="https://www.instagram.com/infotechprogrammer" target="_blank">Infotech Programmer</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></span> 
          </div>
      </div>

      <div class="cl-go-top">
          <a class="smoothscroll" title="Back to Top" href="#top"><i class="icon-arrow-up" aria-hidden="true"></i></a>
      </div>

  </section> <!-- end s-contact -->

  <!-- photoswipe background
  ================================================== -->
  <div aria-hidden="true" class="pswp" role="dialog" tabindex="-1">

      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">

          <div class="pswp__container">
              <div class="pswp__item"></div>
              <div class="pswp__item"></div>
              <div class="pswp__item"></div>
          </div>

          <div class="pswp__ui pswp__ui--hidden">
              <div class="pswp__top-bar">
                  <div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title=
                  "Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title=
                  "Zoom in/out"></button>
                  <div class="pswp__preloader">
                      <div class="pswp__preloader__icn">
                          <div class="pswp__preloader__cut">
                              <div class="pswp__preloader__donut"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                  <div class="pswp__share-tooltip"></div>
              </div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title=
              "Next (arrow right)"></button>
              <div class="pswp__caption">
                  <div class="pswp__caption__center"></div>
              </div>
          </div>

      </div>

  </div> <!-- end photoSwipe background -->


  <!-- preloader
  ================================================== -->
  <div id="preloader">
      <div id="loader">            
      </div>
  </div>


  <!-- Java Script
  ================================================== -->
  <script src="js/jquery-3.5.1.slim.min.js" ></script>
  <script src="js/bootstrap.bundle.min.js" ></script>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  

</body>

</html>