/*** 

====================================================================
	Main Slider style
====================================================================

***/

.main-slider{
	position:relative;
	z-index: 10;
	font-family: 'Montserrat', sans-serif;
}

.main-slider .tp-caption{
	z-index:5;
}

.main-slider .tp-dottedoverlay{
	background-color:rgba(0,0,0,0.40) !important;	
}

.main-slider h2{
	font-weight:800;
	line-height:1.2em;
	color:#ffffff;
	font-size:64px;
	letter-spacing:0px;
}

.main-slider .text{
	font-weight:400;
	line-height:1.8em;
	color:#ffffff;
	font-size:24px;
}

.main-slider .tp-caption .theme-btn{
	border-width: 2px !important;
	color:#ffffff;
}

.main-slider .tp-caption .theme-btn.btn-style-two:hover{
	color: #fc2c62;
}

.main-slider .tp-caption{
	z-index:5;
}

.main-slider .slide-overlay{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.40);	
}

.main-slider .tp-bannertimer,
.main-slider .tp-bullets,
.main-slider .tparrows.tp-leftarrow.preview3::before,
.main-slider .tparrows.tp-rightarrow.preview3::before{
	display:none !important;
}

.main-slider .tparrows.preview3,
.main-slider .tparrows.preview3{
	background:none !important;
	width:60px !important;
	overflow:hidden;
	margin-top:0px !important;
	height:70px !important;
	
}

.main-slider .tparrows.preview3::after{
	top:0px;
	background:rgba(255,255,255,0.90);
	color:#222222;
	font-size:24px;
	height:70px !important;
	line-height:70px;
	width:50px !important;
	border:none;
	padding:0px;
	border-radius:2px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.main-slider .tparrows.tp-leftarrow.preview3::after{
	content: '\f104';
	font-family:'FontAwesome';
}

.main-slider .tparrows.tp-rightarrow.preview3::after{
	content: '\f105';
	font-family:'FontAwesome';
}

.main-slider .tparrows.preview3.tp-leftarrow{
	left:30px !important;
}

.main-slider .tparrows.preview3.tp-rightarrow{
	right:30px !important;
}

.main-slider .tparrows.preview3:hover::after{
	background:#fc2c62;
	border-color:#fc2c62;
	color:#ffffff;
}

.main-slider .tparrows.preview3 .tp-arr-iwrapper{
	visibility:hidden;
	opacity:0;
	display:none;	
}
/*** 

====================================================================
	Main Slider style
====================================================================

***/
 Previous DemoBest jQueryCodelab 
Product Grid Style : Demo 188

Sale!
Women's Blouse Top
$67.99 $50.55
 
Add to Cart
 

Men's Jacket
$63.33
 
Add to Cart
 

Sale!
Men's Shirt
$69.99 $59.33
 
Add to Cart
 

Women's T-Shirt
$50.00
 
Add to Cart
 

 

 HTML (Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="row">
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
            <div class="product-image">
                <a href="#" class="image">
                    <img class="img-1" src="images/img-1.jpg">
                </a>
                <span class="product-sale-label">sale!</span>
                <a href="#" class="product-full-view"><i class="fa fa-search"></i></a>
            </div>
            <div class="product-content">
                <h3 class="title"><a href="#">Women's Blouse Top</a></h3>
                <div class="price"><span>$67.99</span> $50.55</div>
                <ul class="product-links">
                    <li><a href="#"><i class="fa fa-heart"></i></a></li>
                    <li><a href="#">Add to Cart</a></li>
                    <li><a href="#"><i class="fas fa-random"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
            <div class="product-image">
                <a href="#" class="image">
                    <img class="img-1" src="images/img-2.jpg">
                </a>
                <a href="#" class="product-full-view"><i class="fa fa-search"></i></a>
            </div>
            <div class="product-content">
                <h3 class="title"><a href="#">Men's Jacket</a></h3>
                <div class="price">$63.33</div>
                <ul class="product-links">
                    <li><a href="#"><i class="fa fa-heart"></i></a></li>
                    <li><a href="#">Add to Cart</a></li>
                    <li><a href="#"><i class="fas fa-random"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
CSS (Fonts required : Lato)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
.product-grid{
    font-family: 'Lato', sans-serif;
    text-align: center;
}
.product-grid .product-image{
    overflow: hidden;
    position: relative;
}
.product-grid .product-image a.image{ display: block; }
.product-grid .product-image img{
    width: 100%;
    height: auto;
    transition: all 0.5s ease 0s;
}
.product-grid:hover .product-image img{
    transform-origin: top center;
    transform: scale(1.3);
}
.product-grid .product-sale-label{
    color: #fff;
    background: #fc7628;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 5px 8px;
    position: absolute;
    top: 7px;
    right: 7px;
}
.product-grid .product-full-view{
    color: #fff;
    background-color: #6BCE3A;
    line-height: 35px;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0);
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all 0.3s ease 0s;
}
.product-grid:hover .product-full-view{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}
.product-grid .product-full-view:hover{ background-color: #fc7628; }
.product-grid .product-content{ padding: 15px 10px; }
.product-grid .title{
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 10px;
}
.product-grid .title a{
    color: #555;
    transition: all 0.3s ease 0s;
}
.product-grid .title a:hover{ color: #6BCE3A; }
.product-grid .price{
    color: #6BCE3A;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}
.product-grid .price span{
    color: #bbb;
    font-size: 17px;
    text-decoration: line-through;
}
.product-grid .product-links{
    padding: 0;
    margin: 0;
    list-style: none;
}
.product-grid:hover .product-links{ transform: scaleX(1); }
.product-grid .product-links li{
    margin: 0 1px;
    display: inline-block;
}
.product-grid .product-links li a{
    color: #999;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 34px;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    border: 1px solid #999;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease 0s;
}
.product-grid .product-links li:nth-child(2) a{
    color: #fff;
    background-color: #6BCE3A;
    width: auto;
    padding: 0 15px;    
    border: none;   
}
.product-grid .product-links li a:hover{
    color: #6BCE3A;
    border-color: #6BCE3A;
}
.product-grid .product-links li:nth-child(2) a:hover{
    color: #fff;
    background-color: #fc7628;
}
@media screen and (max-width: 990px){
    .product-grid{ margin-bottom: 30px; }
}
License Terms