<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT US</a></li>
<li><a href="#about">All COURSES</a></li>
<li><a href="#services">TRAINING</a></li>
<li><a href="#portfolio">PLACEMENT</a></li>
<li><a href="#pricing">REVIEWS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.networkbulls.in/assets/uploads/home_slider/placement_bannerweb.jpg" alt="Chania" width="100%" height="100%">
</div>
<div class="item">
<img src="https://www.networkbulls.com/assets/site/images/home_slider_banner/cciesecurityweb.jpg" alt="Chania" width="100%" height="100%">
</div>
<div class="item">
<img src="http://www.networkbulls.in/assets/uploads/home_slider/1550x5436.jpg" alt="Chania" width="100%" height="100%">
</div>
<div class="item">
<img src="http://www.networkbulls.in/assets/uploads/home_slider/15-reason.jpg" alt="Chania" width="100%" height="100%">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center">
<h2>100% Job Guarantee Courses</h2>
<h4>Get CCIE certified at NetworkBricks & start your career with package of 2-8 Lacs </h4>
<br>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Experienced Trainers</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Small Training Batch</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Flexible Timings</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Practical Guidance</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Excellent Lab Facility</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Resume Preparation</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Hands on Experience</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-smallsize"></span>
<h4>Certification Support</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid bgcolor1">
<div class="row">
<div class="col-sm-6">
<h2>14400+ Students Placed </h2><br>
<h4>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.</h4><br>
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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>
<br><button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-6 bg1">
</div>
</div>
</div>
<!-- Container (About Section) -->
<div id="services" class="container-fluid ">
<div class="row">
<div class="col-sm-6 bg2">
</div>
<div class="col-sm-6">
<h2>14400+ Students Placed </h2><br>
<h4>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.</h4><br>
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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>
<br><button class="btn btn-default btn-lg">Get in Touch</button>
</div>
</div>
</div>
<div class="container-fluid bgcolor2">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Lorem ipsum dolor sit amet consectetur.</h3>
<hr>
<div class="row">
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
<div class="col-md-2 text-center ">
<img src="http://icons.iconarchive.com/icons/matiasam/ios7-style/128/Clear-Tick-icon.png" class="img-circle" alt="Cinque Terre" width="50" height="50">
<h4>Intensive Practical Classes</h4>
</div>
</div>
</div>
</div>
</div>
<div id="ALL COURSES" class="container-fluid ">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Lorem ipsum dolor sit amet consectetur.</h3>
<h4 class="text-center"> <small>The small element is used to create a lighter, secondary text in any heading:</small></h4>
<hr>
<div class="col-lg-3 col-sm-6 text-center well style="background-color:#ffffff"">
<img src="https://d37p6u34ymiu6v.cloudfront.net/db/42/2a/db422a4164b9f45f07ef6c89c2ac6c3a.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
<h3>John Smith <small>Job Title</small> </h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
<button type="button" class="btn btn-default btn-block">JOIN TODAY</button>
</div>
<div class="col-lg-3 col-sm-6 text-center well style="background-color:#ffffff"">
<img src="https://d37p6u34ymiu6v.cloudfront.net/db/42/2a/db422a4164b9f45f07ef6c89c2ac6c3a.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
<h3>John Smith <small>Job Title</small> </h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
<button type="button" class="btn btn-default btn-block">JOIN TODAY</button>
</div>
<div class="col-lg-3 col-sm-6 text-center well style="background-color:#ffffff"">
<img src="https://d37p6u34ymiu6v.cloudfront.net/db/42/2a/db422a4164b9f45f07ef6c89c2ac6c3a.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
<h3>John Smith <small>Job Title</small> </h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
<button type="button" class="btn btn-default btn-block">JOIN TODAY</button>
</div>
<div class="col-lg-3 col-sm-6 text-center well style="background-color:#ffffff"">
<img src="https://d37p6u34ymiu6v.cloudfront.net/db/42/2a/db422a4164b9f45f07ef6c89c2ac6c3a.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
<h3>John Smith <small>Job Title</small> </h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
<button type="button" class="btn btn-default btn-block">JOIN TODAY</button>
</div>
</div>
</div>
</div>
<div id="contact" class="container-fluid bgcolor3">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7 ">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" required="" type="text">
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" required="" type="email">
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
.logo-smallsize {
color: #f4511e;
font-size: 50px;
}
.container-fluid {
padding: 60px 50px;
}
.bg1 {
background: url('https://images.pexels.com/photos/7102/notes-macbook-study-conference.jpg?w=940&h=650&auto=compress&cs=tinysrgb') no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height:420px;
}
.bg2 {
background: url('https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height:420px;
}
.bgcolor1 {
background-color: #f4511e;
color:#fff;
}
.bgcolor2 {
background-color: #366f9a; /* Green */
color: #ffffff;
}
.bgcolor3 {
background-color: #cecece; /* Green */
}
.well {
background-color:#FF6633;
}
.well:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: box-shadow 0.3s ease-in-out;
background-color:#335d98;
}
.navbar {
padding-bottom: 10PX;
padding-top: 10PX;
background-color: #f0f0f0;
z-index: 9999;
border-bottom: 12px;
font-size: 15px !important;
line-height: 1.42857143 !important;
letter-spacing: 1px;
border-radius: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
