"Bootstrap HTML Responsive Templates V 0.1 | Ebubekir Bastama"
Bootstrap 3.3.0 Snippet by ebubekirbastama

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!-- www.ebubekirbastama.com Slider Düzenleme --> <html> <head> <meta charset="UTF-8"> <title>Eçk Yazılım</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="slider.css" rel="stylesheet" type="text/css"/> <link href="footer.css" rel="stylesheet" type="text/css"/> <link href="menu.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron"> <div class="container text-center"> <h1>Ebubekir Bastama</h1> <p>Başarmak istiyorsanız durmaksızın çalışın.</p> </div> </div> <!--Menu kodları--> <div id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand" href="www.ebubekirbastama.com">Logo</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-left"> <li><a href="http://www.ebubekirbastama.com">Ana Sayfa</a> </li> <li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">Ürünler</a> </li> <li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">Hakkımızda</a> </li> <li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">İletişim</a> </li> </ul> </div> </div> </div> <!--Menu kodları--> <!--slider--> <div id="content-slider" class="clr"> <div class="wrap-slider clr"> <h1 class="main-title">Haberler</h1> <!-- ========================Thumbnail ControlNav====================================== --> <input type="radio" id="a-1" name="a" > <input type="radio" id="a-2" name="a" > <input type="radio" id="a-3" name="a" > <input type="radio" id="a-4" name="a" > <nav id="main"> <label for="a-1" class="first"></label> <label for="a-2" class="first"></label> <label for="a-3" class="first"></label> <label for="a-4" class="first"></label> <!-- <label for="a-5" class="first"></label> --> </nav> <!-- ============================================================== --> <nav id="control"> <label for="a-1" ></label> <label for="a-2" ></label> <label for="a-3" ></label> <label for="a-4" ></label> <!-- <label for="a-5" class="first"></label> --> </nav> <!-- ============================================================== --> <!-- IMAGE NAVIGATION pic --> <span id="b-1" class="th" tabindex="10"> <img src="https://github.com/lime7/slider/blob/master/images/pic-1.png?raw=true" alt="" id="p-1"> <div class="title-1"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </div> </span> <span id="b-2" class="th" tabindex="11"> <img src="https://github.com/lime7/slider/blob/master/images/pic-10.png?raw=true" alt="" id="p-2"> <div class="title-2"> <h1>Kamov Ka-50 "Black Shark"</h1> <p>Attack helicopter</p> <a href="">read more...</a> </div> </span> <span id="b-3" class="th" tabindex="12"> <img src="https://github.com/lime7/slider/blob/master/images/pic-3.png?raw=true" alt="" id="p-3"> <div class="title-3"> <h1>Sukhoi Su-27</h1> <p>Air superiority fighter</p> <a href="">read more...</a> </div> </span> <span id="b-4" class="th" tabindex="13"> <img src="https://github.com/lime7/slider/blob/master/images/pic-4.png?raw=true" alt="" id="p-4"> <div class="title-4"> <h1>mil mi-28</h1> <p>Attack helicopter</p> <a href="">read more...</a> </div> </span> <!-- ______________IMAGES_________________________________________ --> <div class="slider"> <div class="inset"> <figure> <figcaption class="title-1"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-1" class="f"> </figure> <figure> <figcaption class="title-2"> <h1>Kamov Ka-50 "Black Shark"</h1> <p>Attack helicopter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/10.png?raw=true" alt="" id="i-2" class="f"> </figure> <figure> <figcaption class="title-3"> <h1>Sukhoi Su-27</h1> <p>Air superiority fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/3.png?raw=true" alt="" id="i-3" class="f"> </figure> <figure> <figcaption class="title-4"> <h1>mil mi-28</h1> <p>Attack helicopter</p> <a href="">FIND OUT MORE</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/4.png?raw=true" alt="" id="i-4" class="f"> </figure> <figure> <figcaption class="title-5"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-5" class="f"> </figure> </div> </div> </div> </div> <!--slider--> <!--resim ve yazılar orta--> <div class="container-fluid bg-3 text-center"> <h3>Projelerimiz</h3><br> <div class="row"> <div class="col-sm-3"> <p>Sıfırdan C# Eğitim Seti</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Sıfırdan Otomasyon Eğitim Seti</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Adisyon Eğitim Seti</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Güvenli Yazılım Eğitimi</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> </div> </div><br> <div class="container-fluid bg-3 text-center"> <div class="row"> <div class="col-sm-3"> <p>Bootsrap Login Page</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Responsive Tema</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Chat Programı</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Pc Log Programı</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> </div> </div><br><br> <!--resim ve yazılar orta--> <footer class="container-fluid text-center"> <div id="footer"> <div class="container"> <div class="row"> <h3 class="footertext">Hakkımızda</h3> <br> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains"> <br> <h4 class="footertext">Programlar</h4> <p class="footertext">C#,vb.net,java,.net,c#,android<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Tasarım</h4> <p class="footertext">Adobe Cs6<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Tasarım</h4> <p class="footertext">Bootstrap,Responsive,Css3,Html5,JavaScript<br> </center> </div> </div> <div class="row"> <p><center><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">İletişim İçin Tıklayınız</a> <p class="footertext">Copyright 2018</p></center></p> </div> </div> </div> </footer> </body> </html>
/* Footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } #footer { background: /* color overlay */ linear-gradient( rgba(240, 212, 0, 0.45), rgba(0, 0, 0, 0.45) ), /* image to overlay */ url(http://images.cdn.fotopedia.com/_avPIZmqM3w-7z161LH_268-hd.jpg); } /* Custom footer CSS -------------------------------------------------- */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .text-muted { margin: 20px 0; } .footertext { color: #ffffff; } #custom-bootstrap-menu.navbar-default .navbar-brand { color: rgba(10, 9, 9, 1); } #custom-bootstrap-menu.navbar-default { font-size: 14px; background-color: rgba(42, 212, 36, 1); border-bottom-width: 1px; } #custom-bootstrap-menu.navbar-default .navbar-nav>li>a { color: rgba(0, 0, 0, 1); background-color: rgba(248, 248, 248, 0); } #custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, #custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { color: rgba(98, 16, 128, 1); background-color: rgba(248, 248, 248, 0); } #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a, #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { color: rgba(232, 9, 9, 1); background-color: rgba(231, 231, 231, 1); } #custom-bootstrap-menu.navbar-default .navbar-toggle { border-color: #ddd; } #custom-bootstrap-menu.navbar-default .navbar-toggle:hover, #custom-bootstrap-menu.navbar-default .navbar-toggle:focus { background-color: #ddd; } #custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { background-color: #888; } #custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, #custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #2ad424; } #content-slider { line-height: 1; font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 10px; /* font-size 1em = 10px = 62.5%*/ /*background: #4e616d;*/ } /* ------------------------------- > Clearfix */ .clr { *zoom: 1; } .clr:before, .clr:after { display: table; content: ""; line-height: 0; } .clr:after { clear: both; } /* ---------------------------------> wrapper */ #content-slider .wrap-slider { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1200px; /*max-height: 400px;*/ height: 100%; width: 100%; margin: 0px auto; position: relative; text-align: right; } #content-slider .wrap-slider.full { width: 100%; max-width: 100%; text-align: center; border: none; } /* --------------------------------> Link style */ #content-slider *:focus { outline: 0; } #content-slider a:hover { color: #7FD4FD !important; text-decoration: underline !important; } #content-slider a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } #content-slider a:hover, #content-slider a:active { outline: 0; } /* --------------------------------> Responsive images (ensure images don't scale beyond their parents) */ #content-slider img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /*--------------- Main ---------------------------*/ #content-slider .slider { margin-top: 5%; position: absolute; overflow: hidden; width: 100%; margin: 0 auto; } #content-slider .inset { width: 500%; line-height: 0; -webkit-animation: 10s slidy infinite; -moz-animation: 20s slidy infinite; -ms-animation: 20s slidy infinite; -o-animation: 20s slidy infinite; animation: 20s slidy infinite; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } #content-slider h1.main-title { text-align: center; color: #00ABFA; font-weight: 200; font-size: 32px; text-transform: uppercase; line-height: 52px; letter-spacing: 0.1em; margin: 5px 0 0px 0; } #content-slider .slider [class*='title-'] { background: rgba(0, 0, 0, 0.51); padding: 1% 1%; display: inline-block; width: 40%; /*width: 385px;*/ height: auto; position: absolute; z-index: 12; margin: 15px 0 0 15px; /*margin-bottom: -15%; left: -65%;*//* margin-left: -40%;*/ line-height: normal; overflow: hidden; text-align: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #content-slider .th>[class*='title-'] { width: auto; height: auto; position: absolute; top: 0em; right: 0em; text-align: right; margin: 5px 10px 0 0; opacity: 1; line-height: normal; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*------------------------------*/ /* ------------------------------------------------> article */ /*------------------------------*/ #content-slider .slider h1,#content-slider .th h1 { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0; font-weight: bold; } #content-slider .slider p,#content-slider .th p { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0; } #content-slider .slider a,#content-slider .th a { font-weight: bold; color: #00ABFA; text-decoration: none; text-transform: uppercase; } /*------------------------------*/ /* -----------------------------------------------> article img slider*/ /*------------------------------*/ #content-slider .slider h1 { font-size: 3.0em; line-height: 2em; } #content-slider .slider p { font-size: 2.3em; line-height: 1.2em; } #content-slider .slider a { font-size: 1.7em; line-height: 1.5em; } /*------------------------------*/ /* -----------------------------------------------> article img prewiew*/ /*------------------------------*/ #content-slider .th h1 { font-size: 2em; line-height: 1.2em; } #content-slider .th p { font-size: 1.2em; line-height: 1.7em; } #content-slider .th a { font-size: 1.55em; line-height: 1.55em; } #content-slider .th img { position: relative; max-width: 100%; height: auto !important; -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -ms-filter: brightness(50%); -o-filter: brightness(50%); filter: brightness(50%); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #content-slider .th:hover img { -webkit-filter: brightness(100%); -moz-filter: brightness(100%); -ms-filter: brightness(100%); -o-filter: brightness(100%); filter: brightness(100%); } /* ---------------------------------------------> main img */ #content-slider figure { margin: 0; padding: 0; width: 20%; float: left; cursor: pointer; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } #content-slider figure img { width: 100%; position: relative; } /* --------------------------------------------> max contrloS img preview*/ #content-slider span.th { width: 25%; margin: 34% 0% 0 0%; float: left; text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer; } #content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none; } #control{ position: absolute; left: 3%; z-index: 5; top: 55%; width: 95%; } #content-slider label.first{ width: 9px; height: 9px; margin: 33% 1% 0 0%; /*float: left;*/ text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #content-slider #main>label:after{ content: ''; display: inline-block; width: 8px; height: 8px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none; } #content-slider #control{ position: absolute; left: 3%; z-index: 15; top: 0%; width: 95%; margin-top: 10%; display: none; } #content-slider label.first{ width: 9px; height: 9px; /*margin: 33% 1% 0 0%;*/ margin: 0% 1% -30% 0%; /*float: left;*/ text-align: center; /*display: inline-block;*/ position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: none; } #content-slider #main>label:after{ content: ''; display: inline-block; width: 7px; height: 7px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } /*_____________________________________________________________________________________________*/ /*------------------------------------------------------------------- CoNTROLS -------------------------------------------------------------------*/ #main>label:hover { width: 9px; height: 9px; background: #FFF; border: 1px solid #00ABFA; } input#a-1:checked ~ .slider .inset { margin-left: 0%; } input#a-2:checked ~ .slider .inset { margin-left:-100%; } input#a-3:checked ~ .slider .inset { margin-left:-200%; } input#a-4:checked ~ .slider .inset { margin-left:-300%; } input#a-5:checked ~ .slider .inset { margin-left:-400%; } input#a-1:checked ~ #main>label:nth-child(1):after { opacity: 1; visibility: visible; } input#a-2:checked ~ #main>label:nth-child(2):after { opacity: 1; visibility: visible; } input#a-3:checked ~ #main>label:nth-child(3):after { opacity: 1; visibility: visible; } input#a-4:checked ~ #main>label:nth-child(4):after { opacity: 1; visibility: visible; } input#a-1:checked ~ #control>label:nth-child(2), input#a-2:checked ~ #control>label:nth-child(3), input#a-3:checked ~ #control>label:nth-child(4), input#a-4:checked ~ #control>label:nth-child(1), input#a-5:checked ~ #control>label:nth-child(1), input#a-1:checked ~ #control>label:nth-child(4), input#a-2:checked ~ #control>label:nth-child(1), input#a-3:checked ~ #control>label:nth-child(2), input#a-4:checked ~ #control>label:nth-child(3) { width: 50px; height: 50px; top: 12em; display: inline-block; position: relative; cursor: pointer; } input#a-1:checked ~ #control>label:nth-child(2), input#a-2:checked ~ #control>label:nth-child(3), input#a-3:checked ~ #control>label:nth-child(4), input#a-4:checked ~ #control>label:nth-child(1) { background: url(https://github.com/lime7/slider/blob/master/images/right.png?raw=true) no-repeat; float: right; right: 0.3%; } input#a-1:checked ~ #control>label:nth-child(4), input#a-2:checked ~ #control>label:nth-child(1), input#a-3:checked ~ #control>label:nth-child(2), input#a-4:checked ~ #control>label:nth-child(3) { background: url(https://github.com/lime7/slider/blob/master/images/left.png?raw=true) no-repeat; float: left; left: 0.3%; } span#a-1:focus ~ .slider .inset { margin-left: 0%; } span#a-2:focus ~ .slider .inset { margin-left:-100%; } span#a-3:focus ~ .slider .inset { margin-left:-200%; } span#a-4:focus ~ .slider .inset { margin-left:-300%; } span#a-5:focus ~ .slider .inset { margin-left:-400%; } span#b-1:focus ~ .slider .inset { margin-left: 0%; } span#b-2:focus ~ .slider .inset { margin-left:-100%; } span#b-3:focus ~ .slider .inset { margin-left:-200%; } span#b-4:focus ~ .slider .inset { margin-left:-300%; } span#b-5:focus ~ .slider .inset { margin-left:-400%; } #content-slider input:checked ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } #content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } #content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } #content-slider span:focus ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } #content-slider span:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } /*--------- ANIMATION img ----------------------------*/ @keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } @-webkit-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } @-moz-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } @-o-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } @media only screen and (max-width: 1040px) and (min-width: 640px) { #content-slider .th h1 { font-size: 1.2em; line-height: 1em; } #content-slider .th p { font-size: 1.0em; line-height: 0.7em; } #content-slider .th a { font-size: 0.55em; line-height: 0.55em; } } /*@media only screen and (max-width: 940px) { #content-slider .slider [class*='title-'] { margin-bottom: -20%; } }*/ @media only screen and (max-width: 640px) { #content-slider .slider [class*='title-'] { display: none; } #content-slider span.first { display: none; } #content-slider span.th { width: 98%; cursor: default; margin-top: 37%; } #content-slider span.th img { float: left; width: 40%; margin-right: 5%; padding: .7% 0 0 0; } #content-slider .th>[class*='title-'] { right: 0%; width: 55%; text-align: left; } #content-slider #b-2 { margin: 5% auto 0 auto; } #content-slider #b-3, #content-slider #b-4 { margin-top: 5%; } #content-slider span#b-2:focus { opacity: 1; } span#b-2:focus ~ span#b-5 { display: none; } #content-slider span#b-3:focus { opacity: 1; } span#b-3:focus ~ span#b-5 { display: none; } #content-slider span#b-4:focus { opacity: 1; } span#b-4:focus ~ span#b-5 { display: none; } #content-slider #control { display: block; } #content-slider #main { padding: 1% 0; width: 100%; margin-top: 29.2%; z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { display: inline-block; margin-bottom: 0; } } @media only screen and (max-width: 480px) { #content-slider #main { padding: 1% 0; width: 100%; /*bottom: -15.5em;*/ z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { margin-bottom: 0; } /*#content-slider span.th { display: none; }*/ #content-slider span.th img { display: none; } #content-slider .th>[class*='title-'] { width: 98%; margin: 2% auto; position: relative; text-align: center; } #content-slider #control { margin-top: 12%; } }

Related: See More


Questions / Comments: