<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}
}