0byt3m1n1-V2

Path: G:/PleskVhosts/codesolutionlab.in/spisindore.in/junior_spis/ [ Home ]
File: aboutus.php
<?php  include("header.php"); ?>
    <div class="container-fluid">
	<div class="row">
		<div style="padding: 25px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
			 <div class="aboutcont1" style="height: 50px; width: 250px;background-color: #eee;text-align: center;padding: 2px;box-shadow: 5px 6px #624dd6;font-family: none!important;"><h4 style="font-weight: bold;letter-spacing: 2px;font-size: 22px;">Introduction</h4></div><br>
		<p class="aboutcont" style="color: #374042;font: 17px Roboto,sans-seirf; opacity: 0.90; text-align: justify;    border-bottom: 1px solid #eee;
    padding-bottom: 10px;">
			it is known fact that children do their most important learning brfore the age of six. at this age,for kids each morning is dawn of another amazing adventure. considering this fact, our focus is not only one developing academic skills but also intellectual,emotional,physical,social and linguistic skills,that will ensure all round development of child.<br><br>
	        we believe that children are active learners, who learn best from inter-acting with nature,children and adult,in child centered activities.
	        junior SPIS provides caring,loving and trusting environment in which children can flourish as individual.aur child centric approach allows children to learn through play,by exploring their environment.<br>
	        in order to simulate childs learning we provide opportunity to each child to grow and develop while learning and playing.
	        love and affection are the hallmark of all the pursuits.<br><br>
	        child friendly equipment,enticing toys and games at junior spis helps a child to listen and discover,imagine,and create.
		</p>
		</div>
		<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
		<img style="width: 100%;" src="images/2439058.jpg">
		</div>
	</div>
</div>


<div class="container">
	<div class="row">
		<div class="col-lg-5">
			
		</div>
		<div class="col-lg-2">
		<h3 style="text-align: center;font-weight: bold;font-family: 'Handlee', cursive;"><span style="color: #00c3fd;">VISION</span>&nbsp;&nbsp;&&nbsp;&nbsp;<span style="color: #ff3833;">MISSION</span></h3>
		<!-- <img src="images/title_bg.png"> -->
		</div>
		<div class="col-lg-5">
			
		</div>
	</div>
    <div class="row">
        <div class="col-md-12">
            <div class="main-timeline">
                <div class="timeline">
                    <a style="text-decoration: none;" href="#" class="timeline-content">
                        <div class="timeline-icon">
                        <i class="fa fa-eye"></i>    
                        </div>
                        <h3 class="title">VISION</h3>
                        <div style="height: 140px;padding: 42px;" class="inner-content vcs">
                            <p style="font-family: 'Handlee', cursive;  font-size: 17px;" class="description">To prepare and caring gitizens of tommorow to
                            meet the challenges of a global society while retaining their tralitional values.</p>
                        </div>
                    </a>
                </div>
                <div class="timeline">
                    <a style="text-decoration: none; " href="#" class="timeline-content">
                        <div class="timeline-icon">
                        <i class="fas fa-bullseye-arrow"></i>
                           
                        </div>
                        <h3 class="title">MISSION</h3>
                        <div class="inner-content">
                            <p style="font-family: 'Handlee', cursive;  font-size: 17px;" class="description">To become the top Co-Educational residential School. Our Mission is not to Simply disseminate Knowledge to the students but also to inculcate in them discipline. integrity and Humanilarian Spirit With a Positive attitude. to imbibe social and moral values, in order to develop a sense of national identity as well as global citizenship.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
	.aboutcont
	{padding-left: 80px;}
	.aboutcont1
	{margin-left: 82px;}
	@media(max-width: 850px)
	{
		.aboutcont
		{
			padding-left: 0px;
		}
		.aboutcont1
	{margin-left: 0px;}
	}
	.main-timeline{ font-family: 'Niramit', sans-serif; }
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{
    width: 51%;
    float: left;
    position: relative;
    z-index: 1;
}
.main-timeline .timeline-content{ display: block; }
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
    color: #08338e;
    background-color: #fff;
    font-size: 37px;
    text-align: center;
    line-height: 57px;
    height: 60px;
    width: 60px;
    border: 3px solid #08338e;
    box-shadow: 0 0 0 5px #30a3e5, 3px 3px 0 6px rgba(0,0,0,0.3);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.main-timeline .title{
    color: #fff;
    background: #0186D3;
    font-size: 20px;
    /*font-weight: 500;*/
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 40px 10px 50px;
    margin: 5px 0 0 25px;
    display: inline-block;
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);

}
.main-timeline .inner-content{
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    margin: -10px 0 0;
    padding: 30px 20px 15px 50px;
    position: relative;
}
.main-timeline .inner-content:before{
    content: '';
    background-color: #00C3FD;
    height: 100%;
    width: 95%;
    border-radius: 10px;
    transform: skew(-10deg);
    position: absolute;
    right: 10px;
    top: 0;
    z-index: -1;
}
.main-timeline .timeline:nth-child(even){
    text-align: right;
    float: right;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
    left: auto;
    right: 0;
}
.main-timeline .timeline:nth-child(even) .title{
    margin: 5px 25px 0 0;
    padding: 10px 50px 10px 40px;
    -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.main-timeline .timeline:nth-child(even) .inner-content{
    text-align: left;
    padding: 30px 20px 15px 50px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
    border-color: #bf1424;
    color: #bf1424;
    box-shadow: 0 0 0 5px #ea3342, -3px 3px 0 6px rgba(0,0,0,0.3);
}
.main-timeline .timeline:nth-child(4n+2) .title{ background: #d6313f; }
.main-timeline .timeline:nth-child(4n+2) .inner-content:before{ background: #FF3833; }
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
    border-color: #871687;
    color: #871687;
    box-shadow: 0 0 0 5px #ce12ce, 3px 3px 0 6px rgba(0,0,0,0.3);
}
.main-timeline .timeline:nth-child(4n+3) .title{ background: #ad16ad; }
.main-timeline .timeline:nth-child(4n+3) .inner-content:before{ background: #bf4ebf; }
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
    border-color: #e87306;
    color: #e87306;
    box-shadow: 0 0 0 5px #ff800a, -3px 3px 0 6px rgba(0,0,0,0.3);
}
.main-timeline .timeline:nth-child(4n+4) .title{ background: #f77c09; }
.main-timeline .timeline:nth-child(4n+4) .inner-content:before{ background: #fc983a; }
@media only screen and (max-width:767px){
    .main-timeline .timeline{
        width: 100%;
        margin: 0 0 20px;
    }
    .main-timeline .timeline:nth-child(even){
        float: left;
        text-align: left;
    }
    .main-timeline .timeline:nth-child(even) .timeline-icon{
        left: 0;
        right: auto;
    }
    .main-timeline .title,
    .main-timeline .timeline:nth-child(even) .title{
        margin: 5px 0 0 25px;
        padding: 10px 30px 10px 50px;
        -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    }
    .main-timeline .inner-content,
    .main-timeline .timeline:nth-child(even) .inner-content{
        text-align: left;
    }
    .main-timeline .inner-content:before{ transform: skew(-6deg); }
}
</style>
<?php include("footer.php");  ?>