<!– Header Carousel –> <header id=“myCarousel” class=“carousel slide”>
<!-- 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"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> <div class="carousel-caption"> <h2>Caption 1</h2> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> <div class="carousel-caption"> <h2>Caption 2</h2> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> <div class="carousel-caption"> <h2>Caption 3</h2> </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>
</header>
<!– Page Content –> <div class=“container”>
<!-- Marketing Icons Section --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> Welcome to Modern Business </h1> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.2.0</h4> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Learn More</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw fa-gift"></i> Free & Open Source</h4> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Learn More</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Learn More</a> </div> </div> </div> </div> <!-- /.row --> <!-- Portfolio Section --> <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Portfolio Heading</h2> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> <div class="col-md-4 col-sm-6"> <%= link_to page_path('portfolio-item') do %> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> <% end %> </div> </div> <!-- /.row --> <!-- Features Section --> <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Modern Business Features</h2> </div> <div class="col-md-6"> <p>The Modern Business template by Start Bootstrap includes:</p> <ul> <li><strong>Bootstrap v3.2.0</strong> </li> <li>jQuery v1.11.0</li> <li>Font Awesome v4.1.0</li> <li>Working PHP contact form with validation</li> <li>Unstyled page elements for easy customization</li> <li>17 HTML pages</li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p> </div> <div class="col-md-6"> <img class="img-responsive" src="http://placehold.it/700x450" alt=""> </div> </div> <!-- /.row --> <hr> <!-- Call to Action Section --> <div class="well"> <div class="row"> <div class="col-md-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p> </div> <div class="col-md-4"> <a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a> </div> </div> </div>
</div> <!– /.container –>
<!– Script to Activate the Carousel –> <script> $(document).on('ready', function () {
$('.carousel').carousel({ interval: 1000 //changes the speed })
}); </script>