<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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <div class="about-section"> <div class="container"> <h3 class="about-titles">About Us</h3> <div class="col-md-6 about-left"> <img src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" "> </div> <div class="col-md-6 about-right"> <h3>Welcome to Luxury Classroom </h3> <p>Thank you for taking the time to visit our site! In today’s real estate market, renting is becoming a popular option again for a lot of people. We pride ourselves on our service to our clients.We’re sure you will find what you’re looking for among hundreds of our real estate listings!</p> </div> </div> </div> <div class="benefit-section"> <div class="container"> <h3 class="site-titles">Benefits</h3> <p class="site_para">Custom Designed with the Latest Technologies</p> <div class="col-md-6 pixi_two_grid_right"> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Home Managers</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Special Deals</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Residential</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-6 pixi_two_grid_right"> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Ideal Layout</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Custom Designed</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Best House</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div>

body { font-family: 'Roboto';font-size: 14px; } .about-section { padding: 6em; background-color:#f5edff; } h3.about-titles { font-size: 3.5em; text-align: center; margin-bottom: 1.3em; position: relative; } h3.about-titles:before, h3.about-titles:after { content: " "; background: #490382; position: absolute; width: 18%; height: 1px; } h3.about-titles:after { right: 41%; top: 102%; } .about-right h3 { font-size: 3em; letter-spacing: 1px; color: #490382; } .about-right p { font-size: 1.2em; border-left: 7px solid #000; padding: 1em 1em 1em 2em; margin: 2em 0 0; } .about-left img { width: 100%; } .benefit-right img { width: 100%; } .icon { color : white; padding:15px; font-size:30px; } .benefit-section { background-color:#4f003d; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .benefit-section { padding: 5em 0; } h3.site-titles { font-size: 3.5em; text-align: center; margin-bottom: 1.3em; position: relative; color: #fff; } h3.site-titles:before, h3.site-titles:after { content: " "; background: #ededed; position: absolute; width: 16%; height: 1px; } h3.site-titles:after { right: 42%; top: 102%; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .pixi_two_grid_right_gridr h4 { font-size: 1.5em; color: #ededed; } .pixi_two_grid_right_gridr p { color: #dedede; line-height: 2em; } .pixi_two_grid_right_grid1 { width: 65px; height: 65px; text-align: center; border: 1px solid #fff; } p.site_para { font-size: 2em; color: #fff; text-align: center; letter-spacing: 4px; }