<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 ----------> <section> <div class="padding80 bgcolor4" id="about"> <div class= "container"> <div class= "row"> <div class="col-md-6"> <div class="textbox-component"> <img src="https://s-media-cache-ak0.pinimg.com/originals/84/0b/4a/840b4ae249dafa3f0179a0f21f37100e.png" style=" max-height: 350px;" alt=" " class="img-responsive pull-right" > </div> </div> <div class="col-md-6"> <div class="divider50"></div> <div class="textbox-component"> <h2>Do More.</h2> <ul> <li>There are many variations of passages of Lorem Ipsum Dolores Sit Amet available, but the majority have suffered alteration.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip doit ex ea incididunt commodo consequat.</li> <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exercitation quis ne.</li> <hr> <button type="button" class="btn btn-warning btn-md">Medium</button> </ul> </div> </div> </div> </div> </div> </section> <section> <div class="padding80 bgcolor3" id="about"> <div class= "container"> <div class= "row"> <div class="col-md-6"> <div class="textbox-component"> <img src="https://s-media-cache-ak0.pinimg.com/originals/84/0b/4a/840b4ae249dafa3f0179a0f21f37100e.png" style=" max-height: 350px;" alt=" " class="img-responsive pull-right" > </div> </div> <div class="col-md-6"> <div class="divider50"></div> <div class="textbox-component"> <h2>Example body text</h2> <p>Fusce semper, nibh eu sollicitudin imperdiet, dolor magna vestibulum mi, vel tincidunt augue ipsum nec erat. Vestibulum congue leo elementum ullamcorper commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <hr> <button type="button" class="btn btn-warning btn-md">Medium</button> </div> </div> </div> </div> </div> </section> <section> <div class="padding80 bgcolor2" id="about"> <div class= "container"> <div class= "row"> <div class="col-md-6"> <div class="divider50"></div> <div class="textbox-component"> <h2>Example body text</h2> <p>Fusce semper, nibh eu sollicitudin imperdiet, dolor magna vestibulum mi, vel tincidunt augue ipsum nec erat. Vestibulum congue leo elementum ullamcorper commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <hr> <button type="button" class="btn btn-warning btn-md">Medium</button> </div> </div> <div class="col-md-6"> <div class="textbox-component"> <img src="https://s-media-cache-ak0.pinimg.com/originals/84/0b/4a/840b4ae249dafa3f0179a0f21f37100e.png" style=" max-height: 350px;" alt=" " class="img-responsive"> </div> </div> </div> </div> </div> </section> <section> <div class="padding80 bgcolor1" id="about"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="divider10"></div> <h3>About us</h3> <hr> <p>Fusce semper, nibh eu sollicitudin imperdiet, dolor magna vestibulum mi, vel tincidunt augue ipsum nec erat. Vestibulum congue leo elementum ullamcorper commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <hr> <button type="button" class="btn btn-warning btn-md">Medium</button> </div> <div class="col-md-6"> <img src="https://p.w3layouts.com/demos_new/28-01-2017/inspire-demo_Free/2047128721/web/images/11.jpg" alt=" " class="img-responsive"> </div> <div class="clearfix"> </div> </div> </div> </div> </section>

.bgcolor4{ background:#daffa0; } .bgcolor3 { background:#42c8f4; } /************************** Example body text *************************/ .textbox-component { position: relative; } .bgcolor2 { background:#f48c42; } .padding80 { padding:80px; } .divider50 { height: 50px; } /************************** About us *************************/ .bgcolor1 { background:#fffcf2; } .padding80 { padding:80px; } .divider10 { height: 50px; } hr { display: block; margin-top: 25px; margin-bottom: 25px; margin-left: auto; margin-right: auto; border-style: inset; border-width: 0px; }