<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="rolandthemes-fullscreen-slider"> <div id="full-screen-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <a class="pull-left" href="#full-screen-carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-menu-left"></span></a> <a class="page-scroll" href="#services"><i class="fa fa-angle-down"></i></a> <a class="pull-right active" href="#full-screen-carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-menu-right"></span></a> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item" style="background:#ce020c url() no-repeat top center;background-attachment:fixed; "><div class="fill"> <h1 class="animated fadeIn">web design</h1> </div> </div> <div class="item" style="background:#f20c49 url() no-repeat top center;background-attachment:fixed; "><div class="fill"> <h1 class="animated fadeIn">design grafic</h1> </div> </div> <div class="item active" style="background:#fc9700 url() no-repeat top center;background-attachment:fixed; "><div class="fill"> <h1 class="animated fadeIn">FOTOGRAFIE</h1> </div> </div> </div> </div> </section>

/* Full Screen slider ======================================================== */ html, body { width: 100%; height: 100%; font-family: 'Source Sans Pro', sans-serif; background-color:#f7f7f7; } .rolandthemes-fullscreen-slider{ height:100%; position:relative; } .rolandthemes-fullscreen-slider .carousel, .rolandthemes-fullscreen-slider .item{ height:100%; background-attachment:fixed; background-size:cover; } .rolandthemes-fullscreen-slider .carousel-inner { height: 100%; } .rolandthemes-fullscreen-slider .fill { width:100%; position:absolute; text-align:center; color:#333; height:100%; background-attachment:fixed; } .rolandthemes-fullscreen-slider .right, .rolandthemes-fullscreen-slider .left{ background-image:none; } .rolandthemes-fullscreen-slider .fill h1{ -webkit-animation-duration: 0.9s; -webkit-animation-delay: 0.5s; -moz-animation-duration: 0.9s; -moz-animation-delay: 0.5s; -o-animation-duration: 0.9s; -o-animation-delay: 0.5s; animation-duration: 0.9s; animation-delay: 0.5s; margin:0; font-size:200px; text-transform:uppercase; color:#fff; position: relative; font-weight:bold; top: 50%; transform: translateY(-50%); } .rolandthemes-fullscreen-slider .fill h3{ margin:0; font-size:48px; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0.5s; -moz-animation-duration: 0.8s; -moz-animation-delay: 0.5s; -o-animation-duration: 0.8s; -o-animation-delay: 0.5s; animation-duration: 0.8s; animation-delay: 0.5s; position: relative; top: 40%; color:#fff; } .rolandthemes-fullscreen-slider .carousel-indicators a{ background-color:transparent; color:#fff; font-size:36px; } .carousel-control .glyphicon, .carousel-control .glyphicon { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; font-size:48px; } @media (max-width: 992px) { .rolandthemes-fullscreen-slider .fill h1{ font-size:90px; } .rolandthemes-fullscreen-slider .fill h3{ font-size:48px; } } @media (max-width: 767px) { .rolandthemes-fullscreen-slider .fill h1{ font-size:48px; } .rolandthemes-fullscreen-slider .fill h3{ font-size:24px; top: 40%; transform: translateY(-40%); } }