<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <section class="one-c py-5 " id="one-c"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>First Column</h3> </div> </div> </div> </section> <section class="two py-5 bg-secondary" id="two"> <div class="container"> <div class="row"> <div class="col-md-6"> <h3>First Column</h3> </div> <div class="col-md-6"> <h3>Second Column</h3> </div> </div> </div> </section> <section class="1topc-b2 bg-danger py-5 " id="1topc-b2"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>FirstTopColumn</h3> </div> </div> <div class="pb-5"></div> <div class="row text-center"> <div class="col-md-6"> <h3>First Column</h3> </div> <div class="col-md-6"> <h3>Second Column</h3> </div> </div> </div> </section> <section class="1topc-b3 bg-success py-5 " id="1topc-b3"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>FirstTopColumn</h3> </div> </div> <div class="pb-5"></div> <div class="row text-center"> <div class="col-md-4"> <h3>First Column</h3> </div> <div class="col-md-4"> <h3>Second Column</h3> </div> <div class="col-md-4"> <h3>Three Column</h3> </div> </div> </div> </section> <section class="1topc-b4 bg-danger py-5 " id="1topc-b4"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>FirstTopColumn</h3> </div> </div> <div class="pb-5"></div> <div class="row text-center"> <div class="col-md-3 col-sm-6 col-xs-12 "> Col 1 </div> <div class="col-md-3 col-sm-6 col-xs-12"> Col 2 </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 "> Col 3 </div> <div class="col-md-3 col-sm-6 col-xs-12"> Col 4 </div> </div> </div> </section> <section class="1top-card-b3 bg-primary py-5 " id="1topc-b3"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>FirstTopColumn</h3> </div> </div> <div class="pb-5"></div> <div class="row "> <div class="col-md-4"> <div class="card mb-3"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <div class="card-footer text-muted"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </div> </div> </div> </section>

http://templates.aucreative.co/arges/images/news-01.jpg http://templates.aucreative.co/arges/images/news-02.jpg http://templates.aucreative.co/arges/images/news-03.jpg