HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/xaviersmandi-new/
Current File : /home/htlwork.com/www/dev/xaviersmandi-new/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>St. Xavier&#039;s Residential School &#8211; Generation Marching to Smart Future</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
	
	<link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <!-- Custom CSS -->
    <link href="style.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">    	
	
    <!-- 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>
    
    <!--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>
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 20){  
        jQuery('.header').addClass("sticky");
    }
    else{
        jQuery('.header').removeClass("sticky");
    }
});

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

	
</head>
<body>
<header class="header">    
  <section class="top-sec">    
    <div class="container">
      <div class="row">
        
        <div class="col-sm-6 left-grid">
          <ul>
		    <li><a href="tel:9816037313"><i class="fa-solid fa-phone-volume"></i> +91 9816037313</a></li>
			<li><a href="mailto:info@xaviersmandi.com"><i class="fa-regular fa-envelope"></i> info@xaviersmandi.com</a></li>
		  </ul>
        </div>  
         
        <div class="col-sm-6 right-grid">
          <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>
			<a href="#" target="_blank"><i class="fa-brands fa-twitter twitter"></i></a>
			<a href="#" target="_blank"><i class="fa-brands fa-linkedin linkedin"></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"></a></div>
		
        <div class="nav-links">
	    
		  <div class="sidebar-logo">
		    <span class="logo-name"><img src="images/logo.png" al="image"></span>
            <i class="fa-solid fa-xmark bx bx-x"></i>
		  </div>
		  
		  <ul class="links">			
            <li class="main-menu">
              <a href="about-us.html">About Us</a>
		      <i class="fa fa-angle-down htmlcss-arrow arrow" aria-hidden="true"></i>
              <ul class="htmlCss-sub-menu sub-menu">
			    <li><a href="#">History of School</a></li>
				<li><a href="#">Management</a></li>
				<li><a href="#">Our Location</a></li>
				<li><a href="#">Infrastructure</a></li>
				<li><a href="#">Emblem</a></li>
              </ul>
            </li>
		  
		    <li><a href="#">Facilities</a></li>

		    <li class="main-menu">
              <a href="#">Academics</a>
		      <i class="fa fa-angle-down htmlcss-arrow arrow" aria-hidden="true"></i>
              <ul class="htmlCss-sub-menu sub-menu">
                <li><a href="#">Curriculum</a></li>
			    <li><a href="#">Faculty</a></li>
			    <li><a href="#">Annual Report</a></li>
			    <li><a href="#">Class wise books</a></li>
              </ul>
            </li>

		    <li class="main-menu">
              <a href="#">Admissions</a>
		      <i class="fa fa-angle-down htmlcss-arrow arrow" aria-hidden="true"></i>
              <ul class="htmlCss-sub-menu sub-menu">
                <li><a href="#">Procedure</a></li>
			    <li><a href="#">Download Form</a></li>
			    <li><a href="#">Rule &amp; Regulation</a></li>
              </ul>
            </li>

		    <li><a href="#">Gallery</a></li>
		    <li><a href="#">Activities</a></li>
			<li><a href="contact-us.html">Contact Us</a></li>
		  
          </ul>
        </div>
		
		<div class="phone-call"><a href="tel:(833) 659-7676" class="btn"><i class="fa-regular fa-newspaper"></i> Admission Enquiry</a></div>
		
      </div>
    </div><!--/ container -->
	
  </nav><!--/ nac -->
</header>

<section class="banner-inner" id="Home">
  <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-wrap">
  <div class="container">    
    <div class="row">
      
      <div class="col-sm-12 full-wrap">
	    <div class="about-sec about-page">
		  <div class="row">           
		    
			<div class="col-sm-7 about-left">
			  <div class="about-padd">
			    <h2><span>About St. Xavier's Residential School</span>A Few Words About the School</h2>
				<h4>St. Xavier’s Residential School is situated in one of the beautiful place of Himachal Pradesh. Though entire Himachal Pradesh is famous for its panoramic beauty.</h4>
				<p>Town is situated in the lap of majestic mountain ranges at an altitude of 900 meters above mean sea level.The school is situated at the foot hills of kamru Nagh at Sunder Nagar, Baggi road at kot.</p>
				<p>The snowy peeks and scenetic beauty of majestic Dhauladhar range of mountain surrounds the school. The famous Beas Satluj link canal sooths the environment.</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			  </div><!--/ col-sm -->
			</div><!--/ col-sm -->
			
			<div class="col-sm-5 about-right aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
			  <div class="right-info">
			    <figure><img src="images/about-01.jpg" alt="Image"></figure>
			    <figure><img src="images/slider-01.jpg" alt="Image"></figure>
			  </div><!--/ right-info -->
			</div>
			
		  </div><!--/ row --> 
		</div><!--/ about-sec --> 
	  </div><!--/ full-wrap -->
      
    </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-4 footer-left">
        <div class="wg-1">
          <div class="ft-logo">
		    <a href="#"><img src="images/logo.png" alt="image"></a>
		  </div>
		  <p>Lorem ipsum dolor sit amet adipiscing elit sed do eiusmod tempor ut labore et dolore magna enim ad minim veniam.</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>
			<a href="#" target="_blank"><i class="fa-brands fa-twitter twitter"></i></a>
			<a href="#" target="_blank"><i class="fa-brands fa-linkedin linkedin"></i></a>
          </div>
        </div><!--/ wg-1 -->
      </div><!--/ col-sm-3 -->
	
	  <div class="col-sm-8 footer-right">
	    <div class="row">
		  
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Information Desk</h4>
			  <ul>
                <li><a href="index.html">Home</a></li>
			    <li><a href="about-us.html">About Us</a></li>
			    <li><a href="#">Facilities</a></li>
			    <li><a href="#">Gallery</a></li>
			    <li><a href="#">Activities</a></li>
			    <li><a href="contact-us.html">Contact Us</a></li>
			    <li><a href="#">Online Admission</a></li>
              </ul>
			</div><!--/ wg-1 -->
		  </div><!--/ col-sm-4 -->
		  
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Contact us</h4>		          	  		
			  <address>
			    <i class="fa-solid fa-map-location-dot"></i>
				<div><p>St. Xavier's Residential School, Kot, P.O.Chunahan, Teh.Balh, Mandi, Himachal Pradesh. Pin No. 175027.</p></div>
			  </address>
			  
			  <address>
			    <i class="fa-solid fa-phone-volume"></i>
				<div><p><a href="tel:+91 1905-244366">Direct No: +91 1905-244366</a> <br><a href="tel:+91 9816037313">Mobile – +91 9816037313</a></p></div>
			  </address>
			  
			  <address>
			    <i class="fa-regular fa-envelope"></i>
				<div><p><a href="mailto:careers@xaviersmandi.com">careers@xaviersmandi.com</a> <br><a href="mailto:info@xaviersmandi.com">info@xaviersmandi.com</a></p></div>
			  </address>		       		  	 
			</div><!--/ wg-1 -->
		  </div><!--/ col-sm-4 --> 
		  
		  <div class="col-sm-4">
		    <div class="wg-1">
			  <h4>Open Time</h4>		          	  		
			  <p><strong>Opening Day:</strong><br> Monday - Friday: 8am to 6pm<br> Saturday: 9am to 5pm</p>
			  <p><strong>Vacation:</strong><br> All Sunday Day<br> All Vacation Holiday</p>
			</div><!--/ wg-1 -->
		  </div><!--/ col-sm-4 --> 
           
        </div><!-- row -->            
      </div><!-- footer-right -->
	  
    </div><!-- row -->            
  </div><!--/ container -->     
  
  <div class="ft-bottom">
    <div class="container">
      <div class="row">
	  
		<div class="col-sm-7"><p class="copyright">Copyright © 2025  St. Xavier's Residential School. All Rights Reserved.</p></div>
		
		<div class="col-sm-5">
		  <p class="copyright text-end">Website Designed by <a href="http://htlogics.com/" target="_blank">H T Logics PVT. LTD</a></p>
		  <!--div class="Newsletter">
		    <h5>Stay up-to-date with our promotions!<span>No spam — we promise.</span></h5>
			<form>
			  <div class="input-group">
			    <input class="form-control" type="email" placeholder="E-mail Address">
			    <button type="submit" class="btn">Subscribe</button>
			  </div>
			</form>
		  </div-->		
		</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>
  // 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>
$('#owl-demo-1').owlCarousel({
    loop:true,
	autoplay:1000,
    autoplayHoverPause:true,
	autoplayTimeout:3000,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
})  
</script>
		
<script>
$(document).ready(function(){
 let scroll_link = $('.scroll');

  //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>
		
</body>
</html>