Our brands

Static Blocks Diagram

This is all CMS static blocks we are using on the Frido.
To Open Cms Static Blocks, Go To Admin Panel > Content > Blocks

How to use a CMS static block:
To get more details, please watch this video:

Below is some sample content.

1. Block Slider

Block Slider 1

<div class="ves-wrap">
<div class="block block-carousel carousel-v1">
<div class="block-content">
<div id="slider1" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-1.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-2.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider1");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 2

<div class="ves-wrap">
<div class="block block-carousel carousel-v2">
<div class="block-content">
<div id="slider2" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-3.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>Spring</h2>
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">Just for you</p>
<a class="ves-btn d-inline first-item" href="{{store url='#'}}">Men Collection</a>
<a class="ves-btn d-inline" href="{{store url='#'}}">Women Collection</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-4.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>Spring</h2>
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">Just for you</p>
<a class="ves-btn d-inline first-item" href="{{store url='#'}}">Men Collection</a>
<a class="ves-btn d-inline" href="{{store url='#'}}">Women Collection</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider2");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 3

<div class="ves-wrap">
<div class="block block-carousel carousel-v3">
<div class="block-content">
<div id="slider3" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-5.jpg"}}" alt="" />
</a>
<div class="item-content style-left">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-6.jpg"}}" alt="" />
</a>
<div class="item-content style-right">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 30px;">#new Arrivals</p>
<h2>Sofia collection</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider3");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 4

<div class="ves-wrap">
<div class="block block-carousel carousel-v4">
<div class="block-content">
<div id="slider4" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-7.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>SS-18</h2>
<p style="margin-bottom: 30px;">#Short Cayman Islands</p>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-8.jpg"}}" alt="" />
</a>
<div class="item-content">
<h2>SS-18</h2>
<p style="margin-bottom: 30px;">#Short Cayman Islands</p>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider4");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 5

<div class="block block-carousel carousel-v5">
<div class="block-content">
<div id="slider5" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-9.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="letter-spacing: 4px;margin-bottom: -40px; font-size: 16px;">#T-shirt</p>
<h2>Linen</h2>
<p style="font-size: 20px; color: #777; text-align: right;margin-top: -20px;margin-bottom: 50px;">2018’s expressions of individuality</p>
<a class="btn btn-lg btn-outline-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-10.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="letter-spacing: 4px;margin-bottom: -40px; font-size: 16px;">#T-shirt</p>
<h2>Linen</h2>
<p style="font-size: 20px; color: #777; text-align: right;margin-top: -20px;margin-bottom: 50px;">2018’s expressions of individuality</p>
<a class="btn btn-lg btn-outline-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider5");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>

Block Slider 6

<div class="ves-wrap">
<div class="block block-carousel carousel-v6">
<div class="block-content">
<div id="slider6" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-11.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="font-size: 16px;margin-bottom: 20px;letter-spacing: 2px;">Just for you, just because</p>
<h2><span>Enjoin</span>50%<sup>off</sup></h2>
<p class="text-uppercase" style="font-size: 22px;margin-bottom: 40px;letter-spacing: 2px;" >Your next order</p>
<a class="btn btn-lg btn-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-12.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="text-uppercase d-none d-sm-block d-md-block d-lg-block" style="font-size: 16px;margin-bottom: 20px;letter-spacing: 2px;">Just for you, just because</p>
<h2><span>Enjoin</span>50%<sup>off</sup></h2>
<p class="text-uppercase" style="font-size: 22px;margin-bottom: 40px;letter-spacing: 2px;" >Your next order</p>
<a class="btn btn-lg btn-dark" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider6");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 7

<div class="ves-wrap">
<div class="block block-carousel carousel-v7">
<div class="block-content">
<div id="slider7" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-13.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="d-none d-sm-block d-md-block d-lg-block">handy craft</p>
<h2>Exclusive Bags</h2>
<a class="btn btn-lg btn-outline-dark" style="margin-bottom: 10px;" href="{{store url='#'}}">Shop Men</a><br>
<a class="btn btn-lg btn-outline-dark" href="{{store url='#'}}">Shop Women</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-14.jpg"}}" alt="" />
</a>
<div class="item-content text-center">
<p class="d-none d-sm-block d-md-block d-lg-block">handy craft</p>
<h2>Exclusive Bags</h2>
<a class="btn btn-lg btn-outline-dark" style="margin-bottom: 10px;" href="{{store url='#'}}">Shop Men</a><br>
<a class="btn btn-lg btn-outline-dark" href="{{store url='#'}}">Shop Women</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider7");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

Block Slider 8

<div class="ves-wrap">
<div class="block block-carousel carousel-v1">
<div class="block-content">
<div id="slider8" class="owl-carousel owl-banner-carousel owl-bottom-narrow owl-bottom-absolute-narrow">
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-15.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sunny & Sandy</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
<div class="item">
<a href="#">
<img src="{{media url="wysiwyg/ves_fila/slider-16.jpg"}}" alt="" />
</a>
<div class="item-content">
<p class="text-uppercase" style="letter-spacing: 4px;margin-bottom: 20px;">#new Arrivals</p>
<h2>Sunny & Sandy</h2>
<a class="ves-btn" href="{{store url='fashion.html'}}">Shop now</a>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'Ves_All/lib/owl.carousel/owl.carousel.min'
], function ($) {
var banner_owl = $("#slider8");
banner_owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: true,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<span class='icon-Icon_Prev'>&nbsp;</span>","<span class='icon-Icon_Next'>&nbsp;</span>"]
});
});
</script>
</div>
</div>
</div>

2. Block Product

Block Product 1

Block Product 2

Block Product 3

Block Product 4

Block Product 5

Block Product 6

Block Product 7

Block Product 8

Block Product 9

3. Block Banner

Block Banner 1

<div class="ves-wrap" style="margin-bottom: 5%;">
<div class="block block-images">
<div class="block-content">
<a href="{{store url='fashion.html'}}"><img src="{{media url="wysiwyg/ves_fila/banner-02.jpg"}}" alt=""/></a>
</div>
</div>
</div>

Block Banner 2

<div class="ves-wrap" style="margin-bottom: 4%;overflow: hidden;">
<div class="block block-images images-v2">
<div class="container">
<div class="text-html a-center border-top">
<h3>Event 300 new arrivals</h3>
<h4><span>25-59%</span> off the Line Collection</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">Shop now</a>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-03.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='Clothings.html'}}">Clothings</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-04.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Bags</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 3

<div class="ves-wrap" style="margin-bottom: 4%;">
<div class="block block-images images-v3">
<div class="block-content">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-05.jpg"}}" alt=""/>
</a>
<div class="des a-center">
<h4>Kaki vintage jacket</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">View Collection</a>
</div>
</div>
</div>
</div>

Block Banner 4

<div class="ves-wrap" style="margin: 5% 0;">
<div class="container">
<div class="block block-images images-v4">
<div class="block-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-06.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">#Bags</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-07.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">#Tops</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-08.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Shoes</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 5

<div class="ves-wrap" style="margin-bottom: 4%;">
<div class="block block-images images-v3">
<div class="block-content">
<a href="{{store url='Clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-09.jpg"}}" alt=""/>
</a>
<div class="des a-center">
<h4>Kaki vintage jacket</h4>
<a class="ves-btn" href="http://localhost/fila/fashion.html/">View Collection</a>
</div>
</div>
</div>
</div>

Block Banner 6

<div class="ves-wrap" style="margin-top: 5%; margin-bottom: 5%">
<div class="block block-images images-v6">
<div class="block-content">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-10.jpg"}}" alt=""/>
</a>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="block block-html html-v3">
<div class="block-content a-center">
<h2>Just for you, just because</h2>
<div class="html-content">
Enjoin <span> 50% </span> <sup> off </sup>
<p>Your next order</p>
</div>
<div class="action-button">
<a href="#" class="btn btn-lg btn-dark"><span>Shop now</span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-11.jpg"}}" alt=""/>
</a>
</div>
</div>
</div>
</div>
</div>

Block Banner 7

<div class="ves-wrap" style="margin-top: 3%; margin-bottom: 4%">
<div class="block block-images images-v7">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-12.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">Clothings</a></h4>
<div class="count-items">6 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-13.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Bags</a></h4>
<div class="count-items">8 items</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-14.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">Shoes</a></h4>
<div class="count-items">10 items</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-15.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Accessories</a></h4>
<div class="count-items">12 items</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 8

<div class="ves-wrap" style="margin-top: 3%; margin-bottom: 4%">
<div class="block block-images images-v8">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-16.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">#Clothings</a></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-17.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">#Bags</a></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-18.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Shoes</a></h4>
</div>
</div>
<div class="category-thumb">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-19.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">#Sunglass</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Block Banner 9

<div class="ves-wrap" style="margin: 5% 0">
<div class="container">
<div class="block block-images images-v9">
<div class="block-content">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="category-thumb">
<div class="image">
<a href="{{store url='clothings.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-20.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='clothings.html'}}">Boys</a></h4>
</div>
</div>
</div>
<div class="offset-lg-1 offset-md-1 offset-sm-1 col-lg-5 col-md-5 col-sm-5 d-flex align-items-center">
<div class="category-thumb">
<div class="image">
<a href="{{store url='bags.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-21.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='bags.html'}}">Girls</a></h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="d-flex justify-content-center col-lg-12 col-md-12 col-sm-12">
<div class="category-thumb item-bottom">
<div class="image">
<a href="{{store url='shoes.html'}}">
<img src="{{media url="wysiwyg/ves_fila/banner-22.jpg"}}" alt=""/>
</a>
</div>
<div class="caption">
<h4><a href="{{store url='shoes.html'}}">Accessories</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

3. Block Other

Block Blog 1

Block Html 1

<div class="ves-wrap" style="margin: 5% 0;">
<div class="container">
<div class="block block-html html-v3 border">
<div class="block-content a-center">
<h2>Just for you, just because</h2>
<div class="html-content">
Enjoin <span> 50% </span> <sup> off </sup>
<p>Your next order</p>
</div>
<div class="action-button">
<a href="#" class="btn btn-lg btn-dark"><span>Shop now</span></a>
</div>
</div>
</div>
</div>
</div>

Block Instagram V1

<div class="ves-wrap">
<div class="block block-instagram">
<div class="block-title">
<strong>INSTAGRAM</strong>
<a href="#" title="Sofia Fashion">@Sofia_fashion</a>
</div>
<div class="block-content">
<div class="content-instagram">
<ul class="row">
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-01.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-02.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-03.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-04.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-05.jpg"}}" alt="" />
</a>
</li>
<li class="col-lg-2 col-md-4 col-sm-4">
<a class="img-animation" href="#" title="">
<img src="{{media url="wysiwyg/ves_fila/img-instagram-06.jpg"}}" alt="" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

Block Top Promotion

<div class="top-promotion">
<p>Free delivery from $120. <a href="#">Shop Now</a></p>
</div>

Block Top Social Link

<ul class="top-social">
<li class="top-social__items"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="top-social__items"><a href="#"><i class="fab fa-vk"></i></a></li>
</ul>

<div class="top-left_phone"><p>+01 234 567 89</p></div>

Block Top Category

<div class="block-top-category">
<img src="{{media url="wysiwyg/ves_fila/banner-23.jpg"}}" alt=""/>
<div class="box-popup" style="position: absolute;left: 18%; bottom: 35%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Zara babykleding</h3>
<div class="p-price">$39.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
<div class="box-popup" style="position: absolute;left: 48%; top: 30%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Sustainable Carafe</h3>
<div class="p-price">$24.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
<div class="box-popup" style="position: absolute;right: 17%; bottom: 40%;">
<div class="item-hover">
<div class="icon"><span class="icon-Icon_Add"></span></div>
<div class="content-popup">
<div class="arrow-up"></div>
<h3 class="p-title">Sweeper and Funnel</h3>
<div class="p-price">$27.00</div>
<a class="view-more" href="#" title="View More">+ VIEW MORE</a>
</div>
</div>
</div>
</div>

Share this Post!

0 Comment

Do NOT follow this link or you will be banned from the site!