<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 ----------> <div class="padding20 bgcolor-red"> <div class="container"> <div class="col-md-9"> <h2>Establish yourself all over the world</h2> </div> <div class="col-md-3 pull-right"> <br> <button type="button" class="btn-lg btn-block color-blue radius20 ">Button 1</button> </div> <div class="clearfix"> </div> </div> </div> <div class="padding20 bgcolor-skyblue"> <div class="container"> <div class="col-xs-7 col-sm-9 col-md-9"> <h3>Economic</h3> <p>Nulla facilisi. Duis pharetra aliquam justo, non tincidunt mi. Nunc consectetur rutrum laoreet.</p> </div> <div class="col-xs-5 col-sm-3 col-md-3"> <br> <br> <button type="button" class="btn btn-block btn-default">SUBMIT NOW</button> </div> <div class="clearfix"> </div> </div> </div> <div class="padding20 bgcolor-orange"> <div class="container"> <div class="col-md-8"> <h3>Subscribe to our newsletter</h3> </div> <div class="col-md-4"> <br> <form class="form-inline"> <div class="input-group"> <input type="email" class="form-control" size="50" placeholder="Email Address" required> <div class="input-group-btn"> <button type="button" class="btn btn-danger">Subscribe</button> </div> </div> </form> </div> <div class="clearfix"> </div> </div> </div> <div class="padding80 bgimage"> <div class="container text-center"> <h3>News Letter</h3> <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p> <form class="form-inline"> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </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> <div class="row"> <div class="col-md-6 half-left text-color-light"> <h4>HAPPY CUSTOMERS</h4> <p> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</p> <img class="img-responsive center-block" src="http://www.iconarchive.com/download/i76617/xenatt/the-circle/App-Accessibility.ico" alt=""> </div> <div class="col-md-6 half-right text-color-light"> <h4>HAPPY CUSTOMERS</h4> <p> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</p> <img class="img-responsive center-block" src="http://icons.iconseeker.com/png/fullsize/my-computer/my-computer-vista.png" alt=""> </div> </div> <div class="bgimage3"> <div class="container"> <div class="col-md-12 text-center padding80 text-color-light"> <h2>Successful People Dont Fear Failure</h2> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p> </div> </div> </div> <div class="bgimage4"> <div class="container"> <div class="col-md-3"> <div class="col-md-2"> <br> <span style="font-size: 35px; color:blue" class="glyphicon glyphicon-thumbs-up"></span> </div> <div class="col-md-10 pull-left"> <h1 class="counter">324</h1> </div> <div class="clearfix"> </div> <h3>Creative Design</h3> </div> <div class="col-md-3"> <div class="col-md-2"> <br> <span style="font-size: 35px; color:blue" class="glyphicon glyphicon-thumbs-up"></span> </div> <div class="col-md-10 pull-left"> <h1 class="counter">324</h1> </div> <div class="clearfix"> </div> <h3>Creative Design</h3> </div> <div class="col-md-3"> <div class="col-md-2"> <br> <span style="font-size: 35px; color:blue" class="glyphicon glyphicon-thumbs-up"></span> </div> <div class="col-md-10 pull-left"> <h1 class="counter">324</h1> </div> <div class="clearfix"> </div> <h3>Creative Design</h3> </div> <div class="col-md-3"> <div class="col-md-2"> <br> <span style="font-size: 35px; color:blue" class="glyphicon glyphicon-thumbs-up"></span> </div> <div class="col-md-10 pull-left"> <h1 class="counter">324</h1> </div> <div class="clearfix"> </div> <h3>Creative Design</h3> </div> <div class="clearfix"> </div> <!-- Starts-Number-Scroller-Animation-JavaScript --> <script src="js/waypoints.min.js"></script> <script src="js/counterup.min.js"></script> <script> jQuery(document).ready(function( $ ) { $('.counter').counterUp({ delay: 20, time: 1000 }); }); </script> <!-- //Starts-Number-Scroller-Animation-JavaScript --> </div> </div>

.bgimage4 { background: url(https://images.pexels.com/photos/162616/coffee-work-desk-mug-keyboard-162616.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 200px; padding: 50px 0 50px; } .bgimage3 { background: url(https://images.pexels.com/photos/248824/pexels-photo-248824.jpeg?w=940&h=650&auto=compress&cs=tinysrgb)no-repeat center; background-size: cover; min-height: 200px; } .padding80 { padding: 80px 0; } .text-color-light { color: #fff; } .half-right { background: url(https://images.pexels.com/photos/79290/black-and-white-code-programming-tech-79290.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; -moz-background-size: cover; min-height: 500px; text-align: center; padding: 8em 0 0; } .half-left { background: url(https://images.pexels.com/photos/157039/pexels-photo-157039.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; -moz-background-size: cover; min-height: 500px; text-align: center; padding: 8em 0 0; } .bgimage2 { background: url(https://static.pexels.com/photos/70577/sunset-birds-flying-sky-70577.jpeg) center fixed; color: #fff; } .padding80 { padding: 80px 0; } .bgimage { background: url(https://images.pexels.com/photos/129922/pexels-photo-129922.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) center fixed; color: #fff; } .padding80 { padding: 80px 0; } .bgcolor-orange { background: #f22a07; color: #fff; } .bgcolor-skyblue { background: #42bff4; color: #fff; } .padding20 { padding: 20px 0; } .padding10 { padding: 10px 0; } .padding20 { padding: 20px 0; } .padding30 { padding: 30px 0; } .bgcolor-red { background: #ff464f; color: #fff; } .color-blue { background: #0accff; color:#000; } .radius20 { border-radius: 20px; } } .new-button { padding: 10px 35px; background: #0accff; color: #212121; font-weight: 600; border-radius: 20px; text-decoration: none; display: block; font-size: 1em; }