"Aboutus"
Bootstrap 4.1.1 Snippet by sereneman

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="//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="aboutus-area"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="aboutus-image float-left hidden-sm"><img src="http://bestjquery.com/tutorial/hover-effect/demo206/images/img-2.jpg" alt=""></div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="aboutus-content "> <h2><p><span>WELCOME TO ABEDESIGNS</span></p> I'M The Best <span>Web Developer</span></h2> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> <div class="counter "> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="single-counter text-center"> <h2 class="counter"><span>15</span></h2> <p>YEARS OF EXPERIENCED</p> </div> <div class="single-counter text-center"> <h2 class="counter"><span>100</span></h2> <p>WEBSITES COMPLETED</p> </div> <div class="single-counter text-center"> <h2 class="counter"><span>5</span></h2> <p>AWARDS WON</p> </div> <div class="single-counter text-center"> <h2 class="counter"><span>10</span></h2> <p>CLIENTS</p> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.aboutus-area { padding-top:10px; padding-bottom:10px; } /*-- aboutus Image --*/ .aboutus-image { margin: 0px; width: 480px; height:500px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .aboutus-image { margin-right: 35px; width: 345px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .aboutus-image { margin-bottom: 30px; float: none; } } @media only screen and (max-width: 767px) { .aboutus-image { margin-bottom: 30px; margin-right: 0; float: none; width: auto; } .hidden-sm { display: block!important; width: 340px; height: 85%; } } .aboutus-image img { height:100%; width: 100%; } /*-- aboutus Content --*/ .aboutus-content h2 { font-size: 40px; font-weight: 800; line-height: 40px; margin-bottom: 2px; } @media only screen and (max-width: 479px) { .aboutus-content h2 { font-size: 30px; line-height: 30px; } } .aboutus-content h2 span { color: #71b100; } .aboutus-content h4 { font-size: 18px; font-weight: 500; color: #9b9b9b; margin-bottom: 23px; } .aboutus-content p { font-size: 16px; line-height: 27px; } /*-- counter --*/ .single-counter { border:none; margin-top: 32px; float: left; width: 100%; } .single-counter { float: left; width: 25%; padding: 28px 15px 28px; } @media only screen and (max-width: 767px) { .counter .single-counter { width: 50%; } .counter .single-counter + .single-counter { border-left: none } .counter .single-counter h2 { font-size: 30px; color: #71b100; line-height: 24px; font-family: "Open Sans", sans-serif; margin-bottom: 8px; } .counter .single-counter p { font-size: 16px; font-weight: 600; margin-bottom: 0; color: #8f8f8f; }

Related: See More


Questions / Comments: