<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="socialconnect" id="social"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div class="container"> <div class="row"> <div class="col-sm-4 wow slideInLeft" style="visibility: visible; animation-name: slideInLeft;"> <div class="carousel-inner" role="listbox"> <div class="item"> <h3>All Networks<span>One Place</span></h3> <ul class="featurelist"> <li>All activities at one place</li> <li>All messages at one place</li> <li>Easy to filter posts</li> <li>Viewed, composed, replied and archived</li> <li>Real Time Update</li> <li>Twitter Global Keyword </li> </ul> <h4>RSS Feeder</h4> <ul class="list-inline featurelist"> <li>RSS Keywords</li> <li>RSS Pages </li> </ul> </div> <div class="item"> <h3>Facebook<span>Network</span></h3> <ul class="featurelist"> <li>All activities at one place</li> <li>All messages at one place</li> <li>Easy to filter posts</li> <li>Viewed, composed, replied and archived</li> <li>Real Time Update</li> <li>Twitter Global Keyword </li> </ul> </div> <div class="item"> <h3>Twitter<span>Network</span></h3> <ul class="featurelist"> <li>All activities at one place</li> <li>All messages at one place</li> <li>Easy to filter posts</li> <li>Viewed, composed, replied and archived</li> <li>Real Time Update</li> <li>Twitter Global Keyword </li> </ul> </div> <div class="item"> <h3>Instagram<span>Network</span></h3> <ul class="featurelist"> <li>All activities at one place</li> <li>All messages at one place</li> <li>Easy to filter posts</li> <li>Viewed, composed, replied and archived</li> <li>Real Time Update</li> <li>Twitter Global Keyword </li> </ul> </div> <div class="item active"> <h3>Google Analytics<span>Network</span></h3> <ul class="featurelist"> <li>All activities at one place</li> <li>All messages at one place</li> <li>Easy to filter posts</li> <li>Viewed, composed, replied and archived</li> <li>Real Time Update</li> <li>Twitter Global Keyword </li> </ul> </div> </div> </div> <div class="col-sm-8"> <div class="map-section"> <ul class="slider-bullets"> <li data-target="#carousel-example-generic" data-slide-to="0" > <a href="#" ><img src="https://cdn4.iconfinder.com/data/icons/creative-process-16/512/Logo_Design-128.png" alt=""></a> </li> <li data-target="#carousel-example-generic" data-slide-to="1" > <a href="#" title="Facebook"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" alt="Facebook"></a> </li> <li data-target="#carousel-example-generic" data-slide-to="2" > <a href="#" title="Twitter"><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/twitter-128.png" alt="Twitter"></a> </li> <li data-target="#carousel-example-generic" data-slide-to="3" > <a href="#" title="Instagram"><img src="https://cdn2.iconfinder.com/data/icons/social-flat/512/instagram-128.png" alt="Instagram"></a> </li> <li data-target="#carousel-example-generic" data-slide-to="4" > <a href="#" title="Google Analytics"><img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/chart-128.png" alt="Google Analytics"></a> </li> </ul> </div> </div> </div> </div> </div> </section>

ul{list-style-type:none;} .socialconnect { overflow: hidden; padding: 100px 0; -moz-box-shadow: 0px 2px 6px 0px #BBBBBB; -webkit-box-shadow: 0px 2px 6px 0px #BBBBBB; box-shadow: 0px 2px 6px 0px #BBBBBB; } @media (max-width: 767px) { .socialconnect { padding: 40px 0; } } .socialconnect h2 { font-size: 46px; line-height: 56px; margin-bottom: 20px; } .socialconnect h2 span { color: #ff6c0f; display: block; } .socialconnect .featurelist { padding: 20px 0 30px; } .socialconnect .featurelist > li { color: #3f525f; line-height: 36px; font-size: 18px; } @media (max-width: 767px) { .socialconnect .featurelist > li { font-size: 16px; line-height: 26px; } } .socialconnect .featurelist > li:before { content: "\f105"; font: normal normal normal 14px/1 FontAwesome; padding-right: 10px; } .socialconnect h4 { color: #ff6c0f; font-size: 18px; font-weight: bold; margin: 0; } .socialconnect list-inline li { font-weight: bold; text-transform: uppercase; font-size: 12px; } .map-section { background: url("http://media.istockphoto.com/vectors/abstract-world-map-vector-id518866896") no-repeat; background-size: contain; height: 100%; } .map-section .slider-bullets { position: relative; min-height: 500px; } @media (max-width: 767px) { .map-section .slider-bullets { min-height: auto; } } .map-section .slider-bullets li { position: absolute; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.41s ease-in-out; -moz-transition: all 0.41s ease-in-out; -ms-transition: all 0.41s ease-in-out; -o-transition: all 0.41s ease-in-out; transition: all 0.41s ease-in-out; } .map-section .slider-bullets li img{max-width:90px;} @media (max-width: 992px) { .map-section .slider-bullets li img { max-width: 60px; } } @media (max-width: 767px) { .map-section .slider-bullets li img { max-width: 40px; } } @media (max-width: 767px) { .map-section .slider-bullets li { position: static; display: inline-block; margin: 0 2px; } } .map-section .slider-bullets li.active { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-box-shadow: 0px 2px 6px 0px #777; -webkit-box-shadow: 0px 2px 6px 0px #777; box-shadow: 0px 2px 6px 0px #777; } .map-section .slider-bullets li:nth-child(1) { top: 0%; left: 10%; } @media (max-width: 992px) { .map-section .slider-bullets li:nth-child(1) { top: 8%; } } .map-section .slider-bullets li:nth-child(2) { top: 0; right: 33%; } .map-section .slider-bullets li:nth-child(3) { top: 34%; left: 22%; } @media (max-width: 992px) { .map-section .slider-bullets li:nth-child(3) { top: 20%; } } .map-section .slider-bullets li:nth-child(4) { bottom: 30%; right: 30%; } @media (max-width: 992px) { .map-section .slider-bullets li:nth-child(4) { bottom: 55%; } } .map-section .slider-bullets li:nth-child(5) { top: 25%; right: 12%; } @media (max-width: 992px) { .map-section .slider-bullets li:nth-child(5) { top: 15%; } }