<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' 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="#">Brand</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">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-collapse --> </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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.ezeego1.co.in/static/images/offers/snapdeal/banner_1380.jpg?v=121" alt="Chania"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="http://www.ezeego1.co.in/static/images/offers/snapdeal/banner_1380.jpg?v=121" alt="Chicago"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="http://www.ezeego1.co.in/static/images/offers/snapdeal/banner_1380.jpg?v=121" alt="New York"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> <div class="padding5em green "> <div class="container"> <div class="text-heading"> <h3>Our Forest</h3> <p>Preservance is the Key. Nunc vitae tempor dolor, sed euismod mauris. </p> <div class="text-heading-line"> </div> </div> <div class="col-md-12 margintop3em"> <div class="col-md-4 "> <div class="box1"> <div class="box1-img"> <a href="single.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8AsYd7yeCGJRKrFZZ3h3XNPqWfhJdjMa_qrX-OnFfMCUNXmG_qQ" alt=""></a> </div> <div class="box1 a"> <a href="single.html">Forest Preservation Scheme</a> <p>Nunc vitae tempor dolor, sed euismod mauris. Vivamus ornare convallis tincidunt. Morbi orci leo, vulputate et aliquam nec, pulvinar sed nibh.</p> </div> </div> </div> <div class="col-md-4 "> <div class="box1"> <div class="box1-img"> <a href="single.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8AsYd7yeCGJRKrFZZ3h3XNPqWfhJdjMa_qrX-OnFfMCUNXmG_qQ" alt=""></a> </div> <div class="box1 a"> <a href="single.html">Forest Preservation Scheme</a> <p>Nunc vitae tempor dolor, sed euismod mauris. Vivamus ornare convallis tincidunt. Morbi orci leo, vulputate et aliquam nec, pulvinar sed nibh.</p> </div> </div> </div> <div class="col-md-4 "> <div class="box1"> <div class="box1-img"> <a href="single.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8AsYd7yeCGJRKrFZZ3h3XNPqWfhJdjMa_qrX-OnFfMCUNXmG_qQ" alt=""></a> </div> <div class="box1 a"> <a href="single.html">Forest Preservation Scheme</a> <p>Nunc vitae tempor dolor, sed euismod mauris. Vivamus ornare convallis tincidunt. Morbi orci leo, vulputate et aliquam nec, pulvinar sed nibh.</p> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> <section class="team-sec padding90"> <div class="container"> <h1 class="text-center">MEET PROFESSIONALS</h1> <p class="home-paragraph text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has<br> been the industry's standard dummy text ever since the 1500s, when an</p> <div class="row"> <div id="carousel-example" class="carousel slide team team-web-view" data-ride="carousel"> <div class="carousel-line"> <div class="controls pull-right"> <a class="left fa fa-angle-left btn" href="#carousel-example" data-slide="prev"></a><a class="right fa fa-angle-right btn " href="#carousel-example" data-slide="next"></a> </div> </div> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="https://www2.mmu.ac.uk/media/mmuacuk/style-assets/images/r-research/profile-Zeyad.jpg" alt="User one"> </div> <div class="info"> <div class="name">Rohit Sharma</div> <div class="degination">Director</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://www.charlottenursey.co.uk/wp-content/themes/charlotte-nursey/images/charlotte-nursey-profile.jpg" class="img-responsive" alt="Charles John"> </div> <div class="info"> <div class="name">Giselle Childs</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://www.appstate.edu/academics/profiles/_images/scott-collier-400x400.jpg" class="img-responsive" alt="Charlotte Law"> </div> <div class="info"> <div class="name">Scott Collier</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://ina-law.co.za/wp-content/uploads/Illse-Nieuwoudt-Profile.jpg" alt="Coleman Harmon"> </div> <div class="info"> <div class="name">Notary</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://www.charlottenursey.co.uk/wp-content/themes/charlotte-nursey/images/charlotte-nursey-profile.jpg" class="img-responsive" alt="Charles John"> </div> <div class="info"> <div class="name">Giselle Childs</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://ina-law.co.za/wp-content/uploads/Illse-Nieuwoudt-Profile.jpg" alt="Coleman Harmon"> </div> <div class="info"> <div class="name">Notary</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="http://www.appstate.edu/academics/profiles/_images/scott-collier-400x400.jpg" class="img-responsive" alt="Charlotte Law"> </div> <div class="info"> <div class="name">Scott Collier</div> <div class="degination">Expert Agent</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo-shadow"></div> <div class="photo"> <img src="https://www2.mmu.ac.uk/media/mmuacuk/style-assets/images/r-research/profile-Zeyad.jpg" alt="User one"> </div> <div class="info"> <div class="name">Rohit Sharma</div> <div class="degination">Director</div> <div class="social-connect"> <a href="javascript:void(0);"><i class="fa fa-facebook"></i></a> <a href="javascript:void(0);"><i class="fa fa-twitter"></i></a> <a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a> <a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <div class="container"> <div class="row"> <div class="col-md-6"> <img class="img-responsive" style="width:130%" src="http://www.veershaivlingayat.in/Images/Ads/Snapdeal-Banner-lenovo-s580.jpg" alt="Chania"> </div> <div class="col-md-6"> <div class="textbox"> <h3><b>Benefits of working with us</b></h3> <p>Arrived compass prepare an on as. Reasonable particular on my it in sympathize. Size now easy eat hand how. Unwilling he departure elsewhere dejection at. Heart large seems may purse means few blind. Exquisite newspaper attending on certainty oh suspicion of. He less do quit evil is.We help companies at every stage of growth, developing custom solutions.</p> <ul class="liststyle1"> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We help align your brand strategy with key objectives.</li> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We help our customers to build better business for future.</li> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We design best working path for startups.</li> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We help align your brand strategy with key objectives.</li> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We help our customers to build better business for future.</li> <li> <span style="font-size: 15px" class="glyphicon glyphicon-play-circle"></span> We design best working path for startups.</li> </ul> </div> </div> </div> </div> <div class="padding80 bgimage2"> <div class="container text-center"> <h4>We Are Ready to Help You</h4> <h3>Get the Best Solution for Your Business</h3> <button type="button" class="btn btn-primary btn-md">Medium</button> </div> </div>

body { font-family: 'Roboto';font-size: 17px; } .navbar-default { background-color: #c80707; border-color: #f39b00; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > li > .dropdown-menu { background-color: #c80707; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: #ffffff; background-color: #f39b00; } .navbar-default .navbar-nav > li > .dropdown-menu > li.divider { background-color: #f39b00; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #f39b00; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #f39b00; } .navbar-default .navbar-toggle { border-color: #f39b00; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #f39b00; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .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: #ffffff; background-color: #f39b00; } } .padding90 { padding :90px; } /* team css */ .team-sec{float: left;width: 100%;} .team .photo {width: 250px; height: 250px; display: inline-block; overflow: hidden; position: relative; } .photo-shadow {position: absolute; z-index: -1; top: 12px; left: 16px; bottom: -10px; border: 1px solid #E3E3E3; height: 250px; width: 246px; background: #fff; } .col-item{position: relative;} .team{margin-top: 60px;} .team .photo img{width: 100%; vertical-align: middle;position: relative;} .social-connect{margin-top: 13px;} .info{margin-top: 22px;} .info .name{font-size: 18px;font-weight: 600;margin-bottom: 2px;} .info .degination{font-size: 16px;font-weight: 300;font-style: italic;color: #8B8B8B;} .social-connect a{ display: inline-block; border: 1px solid #E3E3E3; font-size: 14px; color: #919191; width: 24px; height: 24px; text-align: center; line-height: 24px;margin-right: 4px;} .social-connect a .fa{margin: 0;} .social-connect a:hover{background-color: #4EBEE9;color: #fff;} .carousel-line{ border: 1px solid #ddd; height: 320px; position: absolute; bottom: -90px; width: 110%; left: -5.5%;} .carousel-line > .controls{position: absolute; bottom: -16px; left: 50%; margin-left: -50px; background: #fff; padding: 0px 20px; color: #000;} .carousel-line > .controls > a{ color: #868686; font-size: 24px; font-weight: 300;} /*css for 3 boxes */ .padding5em { padding: 5em 0em; } .green { background : #fff; } .text-heading { text-align: center; padding-bottom: 1em; } .text-heading h3 { font-size: 2.5em; color: #e00808; font-family: 'helvetica', cursive; text-transform: uppercase; letter-spacing: 4px; margin: 0; } .text-heading-line { position: relative; content: ""; height: 1px; background: #e00808; width: 14%; margin: 0 auto; top: 11px; } .text-heading-line:before { content: ""; height: 3px; background: #e00808; position: absolute; width: 25%; top: -1px; left: 61px; } .margintop3em { margin: 3em 0 0 0; } .box1 a { color: #000000; font-size: 1.5em; margin: 0; text-decoration: none; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .box1 a img{ width:100%; margin-bottom:1em; } .bgimage2 { background: url(https://static.pexels.com/photos/70577/sunset-birds-flying-sky-70577.jpeg) center fixed; color: #fff; } .padding80 { padding: 80px 0; }