<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="footer"> <div class="container"> <div class="row"> <div class="col-xs-12" style="padding:0;"> <ul class="nav navbar-nav navbar-inverse pull-right"> <li> <a href="/{!! $locale !!}/anasayfa/bizkimiz">{{ trans('menu.biz_kimiz') }}</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ trans('menu.hizmetler') }} <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="/{!! $locale !!}/bireysel/hizmetler">{{ trans('menu.bireysel_hizmetler') }}</a> </li> <li> <a href="/{!! $locale !!}/kurumsal/hizmetler">{{ trans('menu.kurumsal_hizmetler') }}</a> </li> <li> <a href="/{!! $locale !!}/kurumsal/gayrimenkul-isletmeciligi">{{ trans('menu.gayrimenkul_isletmeciligi') }}</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ trans('menu.tanitim') }} <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="/{!! $locale !!}/anasayfa/e-katalog">{{ trans('menu.e_katalog') }}</a> </li> <li> <a href="/{!! $locale !!}/anasayfa/sunumlar">{{ trans('menu.sunumlar') }}</a> </li> <li> <a href="/{!! $locale !!}/anasayfa/videolar">{{ trans('menu.videolar') }}</a> </li> </ul> </li> <li> <a href="/{!! $locale !!}/anasayfa/blog">{{ trans('menu.blog') }} </a> </li> <li> <a href="/{!! $locale !!}/anasayfa/insan-kaynaklari">{{ trans('menu.insan_kaynaklari') }}</a> </li> <li> <a href="/{!! $locale !!}/anasayfa/iletisim">{{ trans('menu.iletisim') }}</a> </li> <li> <a href="/{!! $locale !!}/bireysel">{{ trans('menu.bireysel') }}</a> </li> <li> <a href="/{!! $locale !!}/kurumsal">{{ trans('menu.kurumsal') }}</a> </li> </ul> </div> </div> <hr /> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="footer_dv"> <h4>Duyurular</h4> <div class="col-md-1" style="padding:0;"> <span data-slide="next" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-up" style="font-size: 30px"></span> <span data-slide="prev" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-down" style="color: Black; font-size: 30px"></span> </div> <div id="duyurularCarousel" class="vertical-slider carousel vertical slide col-md-11" data-ride="carousel" style="padding-left:0;"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-4"> <a href="http://dotstrap.com/"> <img src="http://placehold.it/150x150" class="img-responsive" style="padding-left:5px;" alt="Image" /></a> </div> <div class="col-xs-8" style="padding-left:0;"> Duyuru 0 Lorem ipsum dolor, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.. </div> </div> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="footer_dv"> <h4>HABER BÜLTENİ</h4> <ul> <li> <div class="input-append newsletter-box"> <input type="text" class="full text-center" placeholder="Email "> <button class="btn bg-gray full" type="button"> Abone ol! <i class="fa fa-long-arrow-right"> </i> </button> </div> </li> </ul> <ul class="social"> <li> <a href="#"> <i class=" fa fa-facebook">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-pinterest">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-youtube">   </i> </a> </li> </ul> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="footer_dv"> <h4>İLETİŞİM</h4> <p> Yeni Çamlıca Mah. Balaban Cad. <br>No: 20/1 Ataşehir - İstanbul - Türkiye  <br> </p> <p><i class="fa fa-phone"></i> <abbr title="Phone">P</abbr>: +90 (216) 661 4200</p> <p><i class="fa fa-envelope-o"></i> <abbr title="Email">E</abbr>: <a href="mailto:info@kbcgrup.com">info@kbcgrup.com</a> </p> <p><i class="fa fa-clock-o"></i> <abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM</p> <ul class="list-unstyled list-inline list-social-icons"> <li> <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> </li> <li> <a href="#"><i class="fa fa-linkedin-square fa-2x"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter-square fa-2x"></i></a> </li> <li> <a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a> </li> </ul> </div> </div> </div> <hr /> <div class="row"> <div class="col-xs-4"> Copyright © KBC Grup 2016 </div> <div class="col-xs-8"> <a href="#"><img src="http://placehold.it/110x40" class="img-responsive pull-right" style="margin-right:5px;"></a> <a href="#"><img src="http://placehold.it/110x40" class="img-responsive pull-right" style="margin-right:5px;"></a> <a href="#"><img src="http://placehold.it/110x40" class="img-responsive pull-right" style="margin-right:5px;"></a> <a href="#"><img src="http://placehold.it/110x40" class="img-responsive pull-right" style="margin-right:5px;"></a> <a href="#"><img src="http://placehold.it/110x40" class="img-responsive pull-right" style="margin-right:5px;"></a> </div> </div> </div> </section>

.footer { background: #222222 none repeat scroll 0 0; border-top: 4px solid #fff; margin: 0; padding: 20px 0; color:#fff; } .footer_dv { width: 100%; } .footer_dv h4 { color: #fff; font-family: roboto; font-weight: bold; margin-bottom: 30px; text-transform: uppercase; } .footer_dv ul { list-style: outside none none; margin: 0; padding: 0; } .footer_dv ul li:first-child { border-top: medium none; box-shadow: none; } .footer_dv ul li { border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2); color: #383838; padding: 5px 0; } .footer_dv p { color: #fff; font-size: 14px; line-height: 20px; margin: 0 0 15px; text-align: justify; } /*CAROUSEL_START*/ .btn-vertical-slider{cursor:pointer;} a { cursor:pointer;} .carousel.vertical .carousel-inner .item { -webkit-transition: 0.6s ease-in-out top; -moz-transition: 0.6s ease-in-out top; -ms-transition: 0.6s ease-in-out top; -o-transition: 0.6s ease-in-out top; transition: 0.6s ease-in-out top; } .carousel.vertical .active { top: 0; } .carousel.vertical .next { top: 100%; } .carousel.vertical .prev { top: -100%; } .carousel.vertical .next.left, .carousel.vertical .prev.right { top: 0; } .carousel.vertical .active.left { top: -100%; } .carousel.vertical .active.right { top: 100%; } .carousel.vertical .item { left: 0; }​ /*SUBSCRIBTION*/ .newsletter-box input#appendedInputButton { background: #FFFFFF; display: inline-block; float: left; height: 30px; clear: both; width: 100%; } .newsletter-box .btn { border: medium none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; display: inline-block; height: 40px; padding: 0; width: 100%; color: #fff; } .newsletter-box { overflow: hidden; } .bg-gray { background-image: -moz-linear-gradient(center bottom, #BBBBBB 0%, #F0F0F0 100%); box-shadow: 0 1px 0 #B4B3B3; } .social li { background: none repeat scroll 0 0 #B5B5B5; border: 2px solid #B5B5B5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; float: left; height: 36px; line-height: 36px; margin: 0 8px 0 0; padding: 0; text-align: center; width: 36px; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .social li:hover { transform: scale(1.15) rotate(360deg); -webkit-transform: scale(1.1) rotate(360deg); -moz-transform: scale(1.1) rotate(360deg); -ms-transform: scale(1.1) rotate(360deg); -o-transform: scale(1.1) rotate(360deg); } .social li a { color: #EDEFF1; } .social li:hover { border: 2px solid #2c3e50; background: #2c3e50; } .social li a i { font-size: 16px; margin: 0 0 0 5px; color: #EDEFF1 !important; } .full { width: 100%; padding:10px; }

$(document).ready(function () { $('.btn-vertical-slider').on('click', function () { if ($(this).attr('data-slide') == 'next') { $('#duyurularCarousel').carousel('next'); } if ($(this).attr('data-slide') == 'prev') { $('#duyurularCarousel').carousel('prev') } }); });