"section design"
Bootstrap 3.0.0 Snippet by jeevan123456

<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 ----------> <div class="padding6em blue"> <div class="container"> <div class="row"> <div class="col-md-6 text-right"> <img src="https://images.pexels.com/photos/253758/pexels-photo-253758.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive" alt=""> <div class="video-img"> <a class="#" data-toggle="modal" data-target="#myModal1"> <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> </a> </div> </div> <div class="col-md-6 text-left"> <h3>Temporibus autem quibusdam omnis dolor amet?</h3> <h4>Voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et</h4> <p>Voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus</p> <div class="readmore-big"> <a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">View More</a> </div> </div> <div class="clearfix"></div> </div> </div> </div>
.padding6em { padding: 6em 0; } .blue { background-color: #d6ebff; } .padding6em p { font-size: 1em; color: #565656; line-height: 2em; letter-spacing: 1px; } .padding6em h3 { font-size: 1.8em; color: #ff4c4c; text-transform: uppercase; margin-bottom: 1em; line-height: 1.5em; } .padding6em h4 { font-size: 18px; text-transform: capitalize; line-height: 1.8em; color: #000; margin-bottom: 1em; } .video-img { position: absolute; bottom: 42%; left: 43%; } .readmore-big a { font-size: 15px; padding: .6em 1em; letter-spacing: 1px; } .readmore-big a { color: #FFFFFF; font-size: 16px; padding: .6em 2em; background: #1cc7d0; text-decoration: none; text-align: center; letter-spacing: 2px; } .readmore-big a:hover { background: #ff4c4c; } .readmore-big { margin-top: 3em; }

Related: See More


Questions / Comments: