<div data-content-type="html" data-appearance="default" data-element="main">&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
&lt;div class="product_category"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Product categories List&lt;/h2&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="product_cat_box"&gt;
&lt;div class="product_cat_img"&gt;&lt;a href="#"&gt; &lt;img src="{{media url=maleface/cat4_1.jpg}}" alt="Shaving"&gt; &lt;/a&gt;&lt;/div&gt;
&lt;h3&gt;Shaving&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="product_cat_box"&gt;
&lt;div class="product_cat_img"&gt;&lt;a href="#"&gt; &lt;img src="{{media url=maleface/cat2.jpg}}" alt="Body &amp;amp; Hair"&gt; &lt;/a&gt;&lt;/div&gt;
&lt;h3&gt;Body &amp;amp; Hair&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="product_cat_box"&gt;
&lt;div class="product_cat_img"&gt;&lt;a href="#"&gt; &lt;img src="{{media url=maleface/cat3.jpg}}" alt="Anti-Aging"&gt; &lt;/a&gt;&lt;/div&gt;
&lt;h3&gt;Anti-Aging&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="product_cat_box"&gt;
&lt;div class="product_cat_img"&gt;&lt;a href="#"&gt; &lt;img src="{{media url=maleface/cat4.jpg}}" alt="Facial Regimen"&gt; &lt;/a&gt;&lt;/div&gt;
&lt;h3&gt;Facial Regimen&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="product_cat_box"&gt;
&lt;div class="product_cat_img"&gt;&lt;a href="#"&gt; &lt;img src="{{media url=maleface/cat4.jpg}}" alt="Shop"&gt; &lt;/a&gt;&lt;/div&gt;
&lt;h3&gt;Shop&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product"&gt;
&lt;div class="featured_product"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;featured Products&lt;/h2&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="featured_product_box"&gt;
&lt;div class="featured_product_img"&gt;&lt;img src="{{media url=maleface/cat4.jpg}}" alt=""&gt;
&lt;div class="featured_product_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/f_search.jpg" alt=""&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="images/f_love.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="featured_product_addcart"&gt;&lt;a&gt;Add to Cart&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product_details"&gt;
&lt;h3&gt;Maxi smooth men’s&lt;/h3&gt;
$72.0000
&lt;div class="rating_sec"&gt;&lt;img src="images/rating.png" alt=""&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="featured_product_box"&gt;
&lt;div class="featured_product_img"&gt;&lt;img src="{{media url=maleface/cat3.jpg}}" alt=""&gt;
&lt;div class="featured_product_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/f_search.jpg" alt=""&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="images/f_love.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="featured_product_addcart"&gt;&lt;a&gt;Add to Cart&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product_details"&gt;
&lt;h3&gt;Inexpensive Grooming&lt;/h3&gt;
$120.0000
&lt;div class="rating_sec"&gt;&lt;img src="images/rating.png" alt=""&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="featured_product_box"&gt;
&lt;div class="featured_product_img"&gt;&lt;img src="{{media url=maleface/cat4.jpg}}" alt=""&gt;
&lt;div class="featured_product_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/f_search.jpg" alt=""&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="images/f_love.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="featured_product_addcart"&gt;&lt;a&gt;Add to Cart&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product_details"&gt;
&lt;h3&gt;Advanced Deodorant&lt;/h3&gt;
$65.0000
&lt;div class="rating_sec"&gt;&lt;img src="images/rating.png" alt=""&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="featured_product_box"&gt;
&lt;div class="featured_product_img"&gt;&lt;img src="{{media url=maleface/cat2.jpg}}" alt=""&gt;
&lt;div class="featured_product_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/f_search.jpg" alt=""&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="images/f_love.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="featured_product_addcart"&gt;&lt;a&gt;Add to Cart&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product_details"&gt;
&lt;h3&gt;Hair Styling Pomade&lt;/h3&gt;
$20.0000
&lt;div class="rating_sec"&gt;&lt;img src="images/rating.png" alt=""&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-3"&gt;
&lt;div class="featured_product_box"&gt;
&lt;div class="featured_product_img"&gt;&lt;img src="{{media url=maleface/cat2.jpg}}" alt=""&gt;
&lt;div class="featured_product_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/f_search.jpg" alt=""&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="images/f_love.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="featured_product_addcart"&gt;&lt;a&gt;Add to Cart&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured_product_details"&gt;
&lt;h3&gt;Razor Bump Remedy&lt;/h3&gt;
$29.9900
&lt;div class="rating_sec"&gt;&lt;img src="images/rating.png" alt=""&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;style&gt;
.product_category {
    padding: 100px 0;
    background: #e6eef3;
    background: -moz-linear-gradient(top, #e6eef3 1%, #f6f6f6 99%);
    background: -webkit-linear-gradient(top, #e6eef3 1%,#f6f6f6 99%);
    background: linear-gradient(to bottom, #e6eef3 1%,#f6f6f6 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6eef3', endColorstr='#f6f6f6',GradientType=0 );
}
.product_category h2 {
    font-size: 30px;
    color: #000000;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
    text-align: center;
}
.product_category h2 span {
    font-weight: 600;
}

.product_cat_img {
    position: relative;
}
.product_cat_img img {
    position: relative;
    width: 100%;
    z-index: 99;
}
.product_cat_img:before {
    position: absolute;
    left: 2%;
    top: 7%;
    background: url(images/cat_bg.png) no-repeat left top;
    content: "";
    background-size: 100%;
    width: 100%;
    height: 95%;
}
.product_cat_box h3 {
    font-size: 16px;
    text-transform: uppercase;
    margin: 24px 0 0 0;
    padding: 0;
    font-weight: 500;
    text-align: center;
    color: #000000;
}
.featured_product {
    padding: 30px 0 110px 0;
    background: #f7f7f7;
    background: -moz-linear-gradient(top, #f7f7f7 2%, #e4e7e8 97%);
    background: -webkit-linear-gradient(top, #f7f7f7 2%,#e4e7e8 97%);
    background: linear-gradient(to bottom, #f7f7f7 2%,#e4e7e8 97%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e4e7e8',GradientType=0 );
}
.featured_product h2 {
    font-size: 30px;
    color: #000000;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
    text-align: center;
}

.featured_product h2 span {
    font-weight: 600;
}
.featured_product_img {
    position: relative;
}
.featured_product_img img {
    position: relative;
    width: 100%;
    z-index: 99;
}
.featured_product_img:before {
    position: absolute;
    left: 1%;
    top: 2%;
    background: url(images/feature_bg.png) no-repeat left top;
    content: "";
    background-size: 100%;
    width: 100%;
    height: 99%;
}

.featured_product_details{
    margin-top: 22px;
    text-align: center;
}
.featured_product_details h3{
    color: #464646;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-transform: none;
}

.featured_product_details span{
    color: #464646;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: block;
    font-weight: bold;
}
.featured_product_details .rating_sec{
    margin: 5px 0 0 0;
    padding: 0;
    text-align: center;
}
.featured_product_details .rating_sec img{
    margin: 0 auto;
}
.featured_product_icon{
    position: absolute;
    right: 8px;
    top: 10px;
    display: none;
    transition: .5s;
}
.featured_product_icon a{
    margin-bottom: 10px;
    display: block;
}
.featured_product_addcart{
    position: absolute;
    bottom: 10px;
     z-index: 99;
    text-align: center;
    padding: 0 10px;
    width: 100%;
    display: none;
    transition: .5s;
}
.featured_product_addcart a{
    font-size: 15px;
    color: #ffffff;
    font-weight: normal;
    background: #ff9600;
    text-transform: uppercase;
    padding: 16px;
    display: block;
   
    
}
.featured_product_box:hover .featured_product_icon{
    display: block;
}
.featured_product_box:hover .featured_product_addcart{
    display: block;
}
&lt;/style&gt;
&lt;div class="featured_product"&gt;
&lt;div class="container"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;</div>