<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Siksha</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">New Delhi</a></li>
<li><a href="#">Amritsar</a></li>
<li><a href="#">Mumbai</a></li>
<li><a href="#">Jaipur</a></li>
<li><a href="#">Udaipur</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">New Delhi</a></li>
<li><a href="#">Amritsar</a></li>
<li><a href="#">Mumbai</a></li>
<li><a href="#">Jaipur</a></li>
<li><a href="#">Udaipur</a></li>
</ul>
</li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img class="first-slide" src="https://images.pexels.com/photos/327236/pexels-photo-327236.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="First slide">
<div class="carousel-caption">
<h1>Mobilizing the worlds literacy</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link site-btn" href="#">Learn more</a>
</div>
</div>
<div class="item">
<img class="second-slide" src="https://images.pexels.com/photos/8575/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide">
<div class="carousel-caption">
<h1>Helping to Improve Education</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link" href="#">Learn more</a>
</div>
</div>
<div class="item">
<img class="third-slide" src="https://images.pexels.com/photos/5156/people-eiffel-tower-lights-night.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Third slide">
<div class="carousel-caption">
<h1>Best in class of Education</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link" href="#">Learn more</a>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<section class="service-form">
<div class="container clearfix">
<div class="row">
<div class="col-md-2 col-sm-12 col-xs-12">
<h6><span>Request</span><br>Callback Now</h6>
</div>
<div class="col-md-10 col-sm-12 col-xs-12">
<form id="contact-form" name="contact_form" class="default-form" action="sendmail.php" method="post" novalidate="novalidate">
<input name="text" placeholder="Your Name" required="" type="text">
<input name="email" placeholder="Enter Email" required="" type="email">
<input name="number" placeholder="Phone number" required="" type="text">
<button type="submit" class="callback-btn">Get Service</button>
</form>
</div>
</div>
</div>
</section>
<div class="about-section paddingTB60 ">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-6">
<div class="about-title clearfix">
<h1>About <span>Education System</span></h1>
<h3>Lorem ipsum dolor sit amet </h3>
<p class="about-paddingB">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet dolor libero, eget venenatis mauris finibus dictum. Vestibulum quis elit eget neque porttitor congue non sit amet dolor. Proin pretium purus a lorem ornare </p>
<p>sed lobortis pulvinar. Integer laoreet mi id eros porta euismod. Suspendisse potenti. Nulla eros mauris, convallis et sem tempus, viverra hendrerit sapien</p>
<div class="about-icons">
<ul >
<li><a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> </li>
<li><a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> </li>
<li> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a> </li>
<li> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-5 col-sm-6">
<div class="about-img">
<img src="http://html.tonatheme.com/2017/power/images/about/1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<section class="power-section">
<div class="container text-center">
<h3>Do you need <span>help</span> from <span>Experts?</span></h3>
<p>Lorem ipsum dolor sit amet consectetur</p>
<div class="link-btn">
<a href="contact.html" class="callback-btn">Contact Now</a>
</div>
</div>
</section>
<div class="services-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="service-box">
<div class="service-icon">
<i class="fa fa-facebook-square fa-3x social"></i>
</div>
<div class="service-content">
<h3>Commerce Studies</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="service-box">
<div class="service-icon">
<i class="fa fa-facebook-square fa-3x social"></i>
</div>
<div class="service-content">
<h3>Computer Science Engineering</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="service-box">
<div class="service-icon">
<i class="fa fa-facebook-square fa-3x social"></i>
</div>
<div class="service-content">
<h3>Mechanical Engineering</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="service-box">
<div class="service-icon">
<i class="fa fa-facebook-square fa-3x social"></i>
</div>
<div class="service-content">
<h3>Electronic Studies</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<img src="http://html.tonatheme.com/2017/power/images/about/1.png" class="img-responsive" alt="">
</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="footer">
<div class="container">
<div class="col-md-4 footer-one">
<h5>About Us </h5>
<p>Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
<a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
</div>
<div class="col-md-3 footer-two">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-three">
<h5>Helpful Links </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-2 footer-four">
<h5>Helpful Links </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
</div>
/* Footer */
.footer {
position: relative;
background-color: #fff;
color: #707070;
padding: 55px 0 40px;
}
.footer h5 {
font-size: 18px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
color: #707070;
position: relative;
padding-bottom: 16px;
}
.footer h5:after {
content: '';
display: block;
margin: 5px 0 0;
width: 40%;
height: 1px;
background-color: #fff;
}
.footer ul {
list-style: none;
line-height: 2.2em;
padding-left:0px;
}
.footer ul a {
color:#707070;;
}
.footer ul a:hover {
color:#ffb606 ;;
text-decoration:none;
}
/*footer bottom */
.footer-bottom {
padding-top: 5px;
padding-bottom: 15px;
border-top: 1px solid rgba(0,0,0,0.09);
background: #fff;
}
.copyright-text p {
color: #707070;
margin-top: 18px;
margin-bottom: 0;
font-size:12px;
}
/* Social Icons */
.social-icons{
margin: 0;
padding: 0;
font-size : 10px;
}
.social {
margin:7px 7px 7px 0px;
color:#ffb606 ;
}
#social-fb:hover {
color: #3B5998;
transition:all .25s;
}
#social-tw:hover {
color: #4099FF;
transition:all .25s;
}
#social-gp:hover {
color: #d34836;
transition:all .25s;
}
#social-em:hover {
color: #f39c12;
transition:all .25s;
}
/******************* footer Section *************/
.services-section {padding-top:60px; padding-bottom:0px;background:#e2e2e2;}
.service-box h3 {
color: #59626b;
font-size: 20px;
font-weight: normal;
text-transform: capitalize;
margin-bottom:15px;
letter-spacing:1px;
}
.service-content p {margin-top:5px;margin-bottom: 20px;}
.service-icon{width: 50px;
height: 50px;
border: 1px solid #e4e4e4;
text-align: center;
line-height: 50px;
font-size: 20px;
float:left;
display: table;
color:#ffb606 ;
}
.service-content{ margin-top: 40px; margin-left:120px;}
/**************** Power Section *******/
.power-section {padding-top: 55px;padding-bottom: 82px; background: #343742;}
.power-section h3{font-size: 38px;line-height: 45px;color: #ffffff;font-weight: 500;}
.power-section h3 span {color: #ffb606 ;}
.power-section p {color: #ffffff;font-size: 20px; line-height: 32px;font-weight: 400;padding-top: 10px;}
.callback-btn:hover {color: #fff;
border: 1px solid #ff6600;
background: transparent ;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/***************** About us **************/
.paddingTB60 {padding:60px 0px 60px 0px;}
.gray-bg {background: #F1F1F1 !important;}
.about-title {}
.about-title h1 {color: #535353; font-size:34px;font-weight:400;}
.about-title span {color: #ffb606 ; font-size:34px;font-weight:400;}
.about-title h3 {color: #535353; font-size:23px;margin-bottom:24px;}
.about-title p {color: #7a7a7a;line-height: 1.8;margin: 0 0 15px;}
.about-paddingB {padding-bottom: 12px;}
.about-img {padding-left: 57px;}
/* Social Icons */
.about-icons {margin:48px 0px 48px 0px ;}
.about-icons i{margin-right: 10px;padding: 0px; font-size:35px;color:#323232;box-shadow: 0 0 3px rgba(0, 0, 0, .2);}
.about-icons li {margin:0px;padding:0;display:inline-block;}
#social-fb:hover {color: #3B5998;transition:all .001s;}
#social-tw:hover {color: #4099FF;transition:all .001s;}
#social-gp:hover {color: #d34836;transition:all .001s;}
#social-em:hover {color: #f39c12;transition:all .001s;}
/************** Service Form ****************/
.service-form {
position: relative;
padding: 17px 0px;
background: #f5efdf;
box-shadow: 0px 5px 20px #ebebeb;
}
.service-form h6 span {
color: #ffb606 ;
}
.service-form h6 {
font-size: 24px;
line-height: 28px;
font-weight: 500;
color: #222222;
padding-top: 10px;
}
.service-form form {
margin-top: 22px;
}
.service-form form input {
position: relative;
height: 50px;
width: 245px;
padding: 0px 18px;
margin-left: 5px;
border-radius: 5px;
border: 1px solid #e5e5e5;
}
.callback-btn {
font-size: 15px;
font-weight: 400;
color: #ffffff;
line-height: 28px;
padding: 10px 36px;
background: #ffb606 ;
border: 1px solid #ffb606 ;
border-radius: 5px;
display: inline-block;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.callback-btn:hover {background:#0c314e;border:none;}
.service-form form button {
position: relative;
height: 50px;
margin-left: 10px;
}
/* Service form ends here */
.btn-link {
background: #ffb606 none repeat scroll 0 0;
border-radius: 5px;
color: #ffffff;
display: inline-block;
font-size: 16px;
font-weight: 700;
line-height: 1;
padding: 16px 29px;
position: relative;
text-transform: uppercase;
transform: perspective(1px) translateZ(0px);
transition: color 0.3s ease 0s;
vertical-align: middle;
}
/* Carousel base class */
.carousel {
height: 500px;
}
.item::after {
background: rgba(0, 51, 88, 0.78) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption {
padding-top:150px;
margin-bottom: 5%;
text-align:left;
margin-left:0px;
z-index: 10;
}
.carousel-caption h1 {
line-height:1;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size:44px;
font-weight:800;
margin:90px 0px 20px 0px;
}
.carousel-caption p{font-size:18px; letter-spacing:0px; margin-bottom:30px;}
.carousel-caption .btn {
margin-top: 0px;
margin-bottom:10px;
}
/************* NAVIGATION ********************/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
.dropdown-menu {padding:1px; background:#ffb606;}
.dropdown-menu > li > a {
color: #514f4f;
text-decoration: none;
background-color: #fff ;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #ffb606 ;
}
.dropdown-menu > li > a {padding:8px; border-bottom:1px solid #e2e2e2;}
.navbar-default {
background-color: #fff ;
padding:20px 0px 10px 0px;
font-weight:400;
letter-spacing:2px;
font-size:16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-brand {
color: #6f6f6f;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffb606;
}
.navbar-default .navbar-text {
color: #6f6f6f;
}
.navbar-default .navbar-nav > li > a {
color: #6f6f6f;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffb606;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffb606;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffb606;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #6f6f6f;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #6f6f6f;
}
.navbar-default .navbar-link {
color: #6f6f6f;
}
.navbar-default .navbar-link:hover {
color: #ffb606;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #6f6f6f;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffb606;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffb606;
background-color: #ffffff;
}
}
$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});
