<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="welcome section" id="welcome"> <div class="container"> <h3 class="site-title">Welcome</h3> <div class="about-top w3ls-agile"> <div class="col-md-6 red"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt=""> <div class="welcome-img"> <div class="col-md-6 col-xs-6 welcome-img1"> <img class="img-responsive" 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 col-xs-6 welcome-img2"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt=""> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-6 come"> <div class=" welcome-grid"> <h5>We provide service since <span>2006</span> with proud!</h5> <p>Masagni dolores eoquie int Basmodi temporant, autem vel eum iure reprehend.Unicmquam eius, Basmodi temurer sehsMunim.</p> <p>Basmodi temporant, ut laboreas dolore magnam kuyte hend.Unicmquam eius, Basmodi temurer sehsMunim.</p> <ul> <li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Masagni dolores eoquie oluptd olorem</li> <li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Ipsumquia dolor sitamnetase eiuse</li> <li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Ipsumquia dolor sitamne adipiscquam</li> </ul> </div> </div> <div class="clearfix"> </div> </div> </div> </div>

body { font-family: 'Roboto';font-size: 14px; } h3.site-title { color: #000; font-size: 3em; text-transform: uppercase; letter-spacing: 2px; text-align: center; position: relative; margin-bottom: 1.5em; } h3.site-title:before { content: ""; background: #03A9F4; width: 6%; height: 2px; position: absolute; right: 63%; top: 51%; } h3.site-title:after { content: ""; background: #03A9F4; width: 6%; height: 2px; position: absolute; right: 32%; top: 51%; } .welcome-grid { text-align: left; } .welcome-grid h5 { font-size: 2.5em; color: #000; text-transform: capitalize; line-height: 1.3; letter-spacing: 1px; } .welcome-grid p { font-size: 1.2em; color: #545151; margin: 1em 0 1.5em; } .welcome-grid ul li { color: #777; font-size: 1em; line-height: 2; margin-top: .5em; display: inherit; letter-spacing: 1px; } .welcome-grid ul li { list-style: none; } .welcome-img { padding-top: 1em; } .welcome-img1 { padding: 0 0.5em 0 0; } .welcome-img2 { padding: 0 0 0 0.5em; }