"mobileapps"
Bootstrap 4.1.1 Snippet by faqih88

<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 rel="stylesheet" type="text/css" href="style.css"> <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="body model-1"> <div class="menu"> <a class="close">x</a> <ul class="nav"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> </ul> </div> <div class="container-fluid"> <div class="header"> <a class="toggle"></a> <a class="shopping" href="#"> <span class="glyphicon glyphicon-shopping-cart"></span> <span class="label label-danger">4</span> </a> <div class="searchbar"> <input class="search_input" type="text" name="" placeholder="Search..."> <a href="#" class="search_icon"><i class="glyphicon glyphicon-search"></i></a> </div> </div> <section class="awSlider"> <div class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"></li> <li data-target=".carousel" data-slide-to="1"></li> <li data-target=".carousel" data-slide-to="2"></li> <li data-target=".carousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-941.jpg"> <div class="carousel-caption">Görsel #1</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-101.jpg"> <div class="carousel-caption">Görsel #2</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-1051.jpg"> <div class="carousel-caption">Görsel #3</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2013/07/wallpaper-thumb-74.jpg"> <div class="carousel-caption">Görsel #4</div> </div> </div> <!-- Controls --> <a class="left carousel-control" href=".carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Geri</span> </a> <a class="right carousel-control" href=".carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">İleri</span> </a> </div> </section> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6"> <div class="product-grid6"> <div class="product-image6"> <a href="#"> <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo10/images/img-1.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Shirt</a></h3> <div class="price">$11.00 <span>$14.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-xs-6 col-sm-6"> <div class="product-grid6"> <div class="product-image6"> <a href="#"> <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo10/images/img-2.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Women's Red Top</a></h3> <div class="price">$8.00 <span>$12.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-xs-6 col-sm-6"> <div class="product-grid6"> <div class="product-image6"> <a href="#"> <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo10/images/img-3.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Shirt</a></h3> <div class="price">$11.00 <span>$14.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-xs-6 col-sm-6"> <div class="product-grid6"> <div class="product-image6"> <a href="#"> <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo10/images/img-4.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Shirt</a></h3> <div class="price">$11.00 <span>$14.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> <script> $('.toggle').click(function(){ $(this).closest('.body').toggleClass('open'); }); $('.close').click(function(){ $(this).closest('.body').removeClass('open'); }); $('section.awSlider .carousel').carousel({ pause: "hover", interval: 2000 }); var startImage = $('section.awSlider .item.active > img').attr('src'); $('section.awSlider').append('<img src="' + startImage + '">'); $('section.awSlider .carousel').on('slid.bs.carousel', function () { var bscn = $(this).find('.item.active > img').attr('src'); $('section.awSlider > img').attr('src',bscn); }); /* Philips ambilight tv Üzerine gleince duruyor slide */ </script>
@import url(https://fonts.googleapis.com/css?family=Open+Sans); *, *:after, *:before { box-sizing: border-box; } body { background: #333; color: #555; font-family: 'Open Sans', sans-serif; text-align: center; } .body { background: #ccc; position: relative; overflow: hidden; width: 45%; display: inline-block; min-width: 400px; min-height: 300px; margin: 2%; } .body .menu { position: absolute; left: 0; top: 0; background: #fff; width: 180px; height: 100%; text-align: left; padding-top: 30px; -webkit-transition: .3s ease-in; transition: .3s ease-in; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 500; } .body .menu .nav { padding: 0; margin: 0; list-style: none; } .body .menu .nav li { cursor: pointer; -webkit-transition: .3s; transition: .3s; } .body .menu .nav li:hover { background: #eee; } .body .menu .nav li a { padding: 10px 15px; text-decoration: none; color: inherit; display: block; } .body .menu .close { position: absolute; right: 0; top: 0; display: inline-block; height: 25px; width: 25px; line-height: 20px; text-align: center; cursor: pointer; opacity: .5; -webkit-transition: .3s; transition: .3s; } .body .menu .close:hover { opacity: .8; } .body .header { height: 45px; background: #7B1FA2; box-shadow: 0 45px rgba(0, 0, 0, 0.1) inset; } .body .container-fluid { min-height: 300px; width: 100%; z-index: 400; position: relative; background: #ddd; } .body .container-fluid .card { background: #fff; font-size: 24px; text-align: center; padding: 45px 0; margin: 20px; } .body .toggle { width: 20px; height: 15px; display: inline-block; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin-top: 15px; margin-left: 20px; cursor: pointer; position: relative; float: left; } .body .toggle:after { content: ''; position: absolute; width: 100%; height: 2px; background: #fff; top: 5px; left: 0; } .body.open .menu { -webkit-transform: translateX(0); transform: translateX(0); } .model-1 .menu li:hover { color: #7B1FA2; box-shadow: 2px 0 #7B1FA2 inset; } section.awSlider .carousel{ display:table; z-index:2; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 4px #444; box-shadow: 0 0 15px rgba(1,1,1,.5); } section.awSlider{ margin-bottom: 10px; position:relative; display:table; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } section.awSlider:hover > img{ -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); opacity:1; } section.awSlider img{ pointer-events: none; } section.awSlider > img{ position:absolute; top:30px; z-index:1; transition:all .3s; filter: blur(1.8vw); -webkit-filter: blur(2vw); -moz-filter: blur(2vw); -o-filter: blur(2vw); -ms-filter: blur(2vw); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity:.5; } .searchbar{ margin-top: 1.5%; margin-right: 4%; float: right; width: 250px; height: 30px; background-color: #fff; border-radius: 30px; padding: 5px; } .search_input{ color: white; border: 0; outline: 0; background: none; line-height: 20px; padding: 0 10px; width: 87%; float: left; caret-color:red; } .search_icon{ height: 18px; width: 30px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #e74c3c; text-decoration:none; } .search_icon:hover,.search_icon:active{ text-decoration:none; color:red; } .shopping{ float: right; display: block; width: 30px; padding:10px; position: relative; right: 15px; color: #fff; } .shopping:hover,.shopping:active,.shopping:visited{color: #fff;} .shopping>.glyphicon{ font-size: 20px; } .shopping>.label{ position: absolute; top: 7px; right: -7px; border-radius: 50%; } .product-grid6,.product-grid6 .product-image6{overflow:hidden} .product-grid6{font-family:'Open Sans',sans-serif;text-align:center;position:relative;transition:all .5s ease 0s} .product-grid6:hover{box-shadow:0 0 10px rgba(0,0,0,.3)} .product-grid6 .product-image6 a{display:block} .product-grid6 .product-image6 img{width:100%;height:auto;transition:all .5s ease 0s} .product-grid6:hover .product-image6 img{transform:scale(1.1)} .product-grid6 .product-content{padding:12px 12px 15px;transition:all .5s ease 0s} .product-grid6:hover .product-content{opacity:0} .product-grid6 .title{font-size:20px;font-weight:600;text-transform:capitalize;margin:0 0 10px;transition:all .3s ease 0s} .product-grid6 .title a{color:#000} .product-grid6 .title a:hover{color:#2e86de} .product-grid6 .price{font-size:18px;font-weight:600;color:#2e86de} .product-grid6 .price span{color:#999;font-size:15px;font-weight:400;text-decoration:line-through;margin-left:7px;display:inline-block} .product-grid6 .social{background-color:#fff;width:100%;padding:0;margin:0;list-style:none;opacity:0;transform:translateX(-50%);position:absolute;bottom:-50%;left:50%;z-index:1;transition:all .5s ease 0s} .product-grid6:hover .social{opacity:1;bottom:20px} .product-grid6 .social li{display:inline-block} .product-grid6 .social li a{color:#909090;font-size:16px;line-height:45px;text-align:center;height:45px;width:45px;margin:0 7px;border:1px solid #909090;border-radius:50px;display:block;position:relative;transition:all .3s ease-in-out} .product-grid6 .social li a:hover{color:#fff;background-color:#2e86de;width:80px} .product-grid6 .social li a:after,.product-grid6 .social li a:before{content:attr(data-tip);color:#fff;background-color:#2e86de;font-size:12px;letter-spacing:1px;line-height:20px;padding:1px 5px;border-radius:5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px} .product-grid6 .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-20px;z-index:-1} .product-grid6 .social li a:hover:after,.product-grid6 .social li a:hover:before{opacity:1} @media only screen and (max-width:990px){.product-grid6{margin-bottom:30px} }

Related: See More


Questions / Comments: