HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/shtrueinternet/
Current File : /home/htlwork.com/www/dev/shtrueinternet/about-us.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SH TRUE INTERNET</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
	<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="dist/aos.css" />

    <!-- Custom CSS -->
    <link href="style.css" rel="stylesheet">
	
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
	
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
	
	<link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
	
    <!-- Custom Fonts -->
	<link href="font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all"> 
   
    <!--If you want to change #bootstrap-touch-slider id then you have to change Carousel-indicators and Carousel-Control  #bootstrap-touch-slider slide as well
        Slide effect: slide, fade
        Text Align: slide_style_center, slide_style_left, slide_style_right
        Add Text Animation: https://daneden.github.io/animate.css/
        -->


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->    
	
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 20){  
        $('.header').addClass("sticky");
    }
    else{
        $('.header').removeClass("sticky");
    }
});

$(window).scroll(function() {
    if ($(this).scrollTop() > 20){  
        $('.back-to-top').addClass("scroll");
    }
    else{
        $('.back-to-top').removeClass("scroll");
    }
});
</script>

</head>
<body data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
<header class="header"> 
  <section class="head-top">   
    <div class="container">
      <div class="row">
      
	    <div class="col-sm-7 head-left">
		  <ul>
            <li><a href="tel:+91 9857020009"><i class="fa-solid fa-phone"></i> <small class="hidden">Call Us</small><span>Call: +91 98570 20009</span></a></li>
            <li><a href="mailto:harishshuklanlg@gmail.com"><i class="fa-solid fa-envelope"></i> <small class="hidden">Email Us</small><span>Email: harishshuklanlg@gmail.com</span></a></li>
          </ul>
        </div>
	  
	    <div class="col-sm-5 head-right">
		  <div class="icon-top">
		    <a href="#" target="_blank"><i class="fa-brands fa-facebook-f facebook"></i></a>
		    <a href="#" target="_blank"><i class="fa-brands fa-instagram instagram"></i></a>
		  </div>	
        </div>	
                
      </div><!--/ row -->
    </div>
  </section>
  
  <nav>
    <div class="container">
      <div class="navbar">
        
		<i class='fa fa-navicon bx bx-menu'></i>
	    <div class="logo"><a href="index.html"><img src="images/logo.png" al="image"><span><span>SH True</span> Internet</span></a></div>
		
        <div class="nav-links">
	    
		  <div class="sidebar-logo">
		    <span class="logo-name"><img src="images/logo.png" al="image"><span><span>SH True</span> Internet</span></span>
            <i class="fa fa-close fa-xmark bx bx-x"></i>
		  </div>
		  
		  <ul class="links">			
            <li class="current-menu-item"><a href="#">Home</a></li>		
            <li><a href="about-us.html">About us</a></li>		
			
			<li class="main-menu">
              <a href="#">Services</a>
		      <i class="fa fa-angle-down htmlcss-arrow arrow" aria-hidden="true"></i>
              <ul class="htmlCss-sub-menu sub-menu">
                <li><a href="#">Wireless Connectivity</a></li>
				<li><a href="#">Fibre Connectivity</a></li>
				<li><a href="#">Fibre Maintenance & service</a></li>
				<li><a href="#">AMC of All above services</a></li>
              </ul>
            </li>
			<li><a href="contact-us.html">Contact Us</a></li>
          </ul>
		  
		  <div class="book-now">
		    <a href="let's-discuss.html" class="btn">Let's Discuss! <i class="fa fa-long-arrow-right" aria-hidden="true"></i> <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span></a>
          </div>
		</div><!--/ nav-links -->
		
      </div>
    </div><!--/ container -->
	
  </nav><!--/ nav -->
</header>

<section class="banner-inner">
  <div class="textblock">
    <div class="block">
      <div class="container">

        <div class="page-title">
          <div class="holder"><h1>About Us</h1></div>
        </div><!--/ page-title -->

        <!-- breadcrumb -->
        <ol class="breadcrumb text-capitalize">
          <li><a href="index.html"><span class="fa fa-home"></span></a><a href="#" class="home"><span property="name">Home</span></a><meta property="position" content="1">&nbsp; &nbsp; + &nbsp; &nbsp;<span property="itemListElement" typeof="ListItem"><span property="name">About Us</span><meta property="position" content="2"></span></li>
        </ol>        
      
      </div><!--/ block -->
    </div>
  </div>
</section><!--/ banner-inner -->

<section class="mid-inner">
  <div class="container">    
    <div class="row">
      
      <div class="col-sm-12 mid-full">
	    <div class="about-wrap about-page"> 
		  <div class="row">   
		    <div class="col-sm-8 about-left mrb-30">
			  <h2 class="mrb-20"><span>About our company</span>Welcome to SH True Internet</h2>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			  <ul>
			    <li>Internet & TV service solutions</li>
				<li>Top quality services with reasonable price</li>
				<li>Live sports and TV shows with ultra fast speed</li>
			  </ul>
			  <p><a href="#" class="btn">Contact Now <i class="fa fa-long-arrow-right" aria-hidden="true"></i> <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span></a></p>
			</div><!--/ col-sm -->
			
			<div class="col-sm-4 about-right mrb-30">
			  <div class="about-box">
			    <figure class="img-hover"><img src="images/about-01.jpg" alt=""></figure>
				<figure class="img-hover"><img src="images/about-02.jpg" alt=""></figure>
			  </div>
			</div><!--/ about-right -->
		  
		  </div><!--/ row -->
		</div><!--/ about-page -->
	  </div><!--/ mid-full -->
      
    </div>
  </div>
</section><!--/ mid-wrap -->
 
<footer class="footer">  
  <div class="back-to-top scroll"><a href="#Home" class="BackTo"><i class="fa fa-angle-up" aria-hidden="true"></i></a></div>
  <script>
$(document).ready(function(){
 let scroll_link = $('.BackTo');

  //smooth scrolling -----------------------
  scroll_link.click(function(e){
      e.preventDefault();
      let url = $('body').find($(this).attr('href')).offset().top;
      $('html, body').animate({
        scrollTop : url
      },700);
      $(this).parent().addClass('active');
      $(this).parent().siblings().removeClass('active');
      return false;	
   });
});
</script>
  
  <div class="container">
    <div class="row">
	  
	  <div class="col-sm-3 footer-left">
		<div class="wg-1">
		  <div class="ft-logo mrb-20"><a href="#" class="logo-img"><img src="images/logo.png" alt=""><span>SH True Internet</span></a></div>
			<p class="mrb-30">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<div class="icon-ft">
			  <a href="#" target="_blank"><i class="fa-brands fa-facebook-f facebook"></i></a>
		      <a href="#" target="_blank"><i class="fa-brands fa-instagram instagram"></i></a>
			</div>
	    </div><!--/ wg-1 -->
	  </div><!--/ col-sm --> 

	  <div class="col-sm-9 footer-right">
	    <div class="row">
		  
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Quick Links</h4>
			  <ul>
				<li><a href="#">Home</a></li>		
				<li><a href="#">About us</a></li>		
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact Us</a></li>
			  </ul>
			</div><!--/ wg-1 -->
		  </div>
	      
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Services</h4>
			  <ul>
				<li><a href="#">Wireless Connectivity</a></li>
				<li><a href="#">Fibre Connectivity</a></li>
				<li><a href="#">Fibre Maintenance & service</a></li>
				<li><a href="#">AMC of All above services</a></li>
			  </ul>
			</div><!--/ wg-1 -->
		  </div>
	      
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Make Contact</h4>
			  <address>
			    <h5>General Quries</h5>
			    <p><b>Phone : </b><a href="tel:+91 9857020009">+91 9857020009</a></p>
				<p><b>Email : </b><a href="mailto:harishshuklanlg@gmail.com">harishshuklanlg@gmail.com</a></p>
			  </address>
			  
			  <!--address>
			    <h5>City Office</h5>
			    <p>Near railway Booking Counter and Taxi Stand, Main National Highway (NH) Bilaspur (H.P.) </p>
			  </address-->
			  
			  <address>
			    <h5>Our Location</h5>
			    <p>Shop No. 6 & 7, Phase - 3, New Nalagarh, Near Cross Road Hotel, Nalagarh, Distt. Solan, Himachal Pradesh. 174101</p>
			  </address>
			</div><!--/ wg-1 -->
		  </div>
		  
	    </div><!--/ row --> 
	  </div><!--/ footer-right --> 
	  
    </div><!-- row -->            
  </div><!--/ container -->           
  
  <div class="ft-bottom">
    <div class="container">
      <div class="row align-items-center">
		
		<div class="col-sm-7">
		  <p class="copyright">Copyright © 2025 All Rights Reserved With SH TRUE INTERNET.</p>
		</div>		
		
		<div class="col-sm-5"><p class="text-end">Website Design by: <a href="http://htlogics.com/" target="_blank">H T Logics PVT. LTD</a></p></div>
        
      </div><!--/ row -->
    </div>
  </div><!--/ ft-bottom -->
  
</footer>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/owl.carousel.min.js"></script>	
<script src="dist/aos.js"></script>	

<script>
var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 7000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});
</script>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

<script>
  // search-box open close js code
let navbar = document.querySelector(".navbar");
//let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");

//searchBox.addEventListener("click", ()=>{
  <!-- navbar.classList.toggle("showInput"); -->
  <!-- if(navbar.classList.contains("showInput")){ -->
    <!-- searchBox.classList.replace("bx-search" ,"bx-x"); -->
  <!-- }else{-->
    <!-- searchBox.classList.replace("bx-x" ,"bx-search"); -->
  <!-- } -->
<!-- }); -->

// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
$(".htmlcss-arrow").click(function(){
 $(".htmlCss-sub-menu" ).removeClass("hidden");
 $(this).siblings( ".htmlCss-sub-menu" ).toggle("hidden");
});
$(".more-arrow").click(function(){
  $(".more-sub-menu" ).removeClass("hidden");
 $(this).siblings( ".more-sub-menu" ).toggle("hidden");
});

</script>

<script>        
// Wrap the counter animation in a function
function startCounterAnimation(target) {
    $(target).prop('Counter', 0).animate({
        Counter: $(target).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(target).text(Math.ceil(now));
        }
    });
}

// Use Intersection Observer to detect when the element is in the viewport
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Start the counter animation when the element is in the viewport
            startCounterAnimation(entry.target);
            // Unobserve the target element to avoid starting the animation multiple times
            observer.unobserve(entry.target);
        }
    });
},{threshold: 0.5 }); // Adjust the threshold as needed

// Observe each element with the 'counter' class
$('.counter').each(function () {
    // Add each element to the Intersection Observer
    observer.observe(this);
});
 
</script>

<script>
$('#owl-demo-1').owlCarousel({
    loop:true,
	autoplay:false,
    autoplayHoverPause:true,
	autoplayTimeout:3000,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
}) 

$('#owl-demo-2').owlCarousel({
    loop:true,
	autoplay:false,
    autoplayHoverPause:true,
	autoplayTimeout:3000,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:2
        }
    }
}) 

$('#owl-demo-3').owlCarousel({
    loop:true,
	autoplay:false,
    autoplayHoverPause:true,
	autoplayTimeout:3000,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
}) 

</script>  
</body>
<script>
  AOS.init();
</script>
</html>