I use owl carousel 2 on different pages. I used the same css and js everywhere.
For some reason, when I load my page, the nav-buttons (prev and next) always get the inline-style top-value of 24px. I never declared a top-value of 24px anywhere in my js or CSS..
This is my HTML:
<div class="pdf-gallery">
<p class="headline">Lorem ipsum dolor sit amet, consectetuer</p>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=0">
<!-- image=2 als Übergabe an die Bildergalerie in der Lightbox; sorgt dafür, dass das richtige Bild geöffnet wird (beginnt mit 0) -->
<img src="img/content/image.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=1">
<img src="img/content/content.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=2">
<img src="img/content/thumbnail.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=3">
<img src="img/content/content.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit amet
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=4">
<img src="img/content/image.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
<div class="download">
<div class="image">
<figure>
<a href="lightbox-imagegallery.html?image=5">
<img src="img/content/image.jpg" alt="Alttext"/>
</a>
</figure>
</div>
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer
<p class="info">PDF deutsch | 123 kB</p>
</div>
</div>
</div>
And this is how I load the owl-carousel in js:
$j('.pdf-gallery').each(function () {
var $slider = $j(this),
opts = {
responsive: {},
smartSpeed: 800,
loop: false,
nav: true,
navRewind: false,
navText: ['', ''],
onInitialized: function () {
$slider.find('.owl-dots, .owl-nav').wrapAll('<div class="owl-controls">');
},
onResized: function () {
$slider.find('.download .image').setEqualHeight('auto');
$slider.find('.download .caption').setEqualHeight('auto');
}
};
//Paging-Container
$slider.find('> div').wrapAll('<div class="wrapper owl-carousel">');
//responsive definition
opts.responsive[0] = {items: 1};
opts.responsive[mediaqueries.maxMobile] = {items: 2};
opts.responsive[mediaqueries.softTablet] = {items: 3};
opts.responsive[890] = {items: 4};
if ($slider.parents('.wide, #full-width').length) {
opts.responsive[mediaqueries.maxDesktop] = {items: 6};
}
if ($j('html').hasClass('lt-ie9')) {
opts.responsive = false;
if ($slider.parents('.wide, #full-width').length) {
opts.items = 4;
} else {
opts.items = 3;
}
}
//init
$slider.find('.wrapper').owlCarousel(opts);
});
And then I have a css for the prev and next button:
.owl-next,
.owl-prev {
color: #darkBlue;
cursor: pointer;
font-size: 22px;
position: absolute;
text-decoration: none;
top: 2px; }
So I feel like my buttons should have the value top: 2px. But instead they always get an inline style of top: 24px which overwrites my top: 2px value.
Is this an default value which is set somewhere? But why if I use the same code everywhere else?
Related
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
I'm working on this one site page: http://simonenicosia.com/isotopeTest/
I'd like to reach this grid result:
https://i.stack.imgur.com/U99mf.jpg
but something is wrong. I don't know if it's about col dimension or js parameters...
portfolio.js
var container = jQuery('#portfolio-grid');
container.isotope({
itemSelector: '.portolio-item',
masonry: {
columnWidth: 100
}
});
HTML
<div id="portfolio-grid" class="portfolio-grid">
<!-- For Project Expander -->
<div class="start-nav"></div>
<!-- Project 1 -->
<div id="projects/pittura.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/pittura.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Pittura</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 2 -->
<div id="projects/evoluzioni.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/grafiche.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Evoluzioni pittoriche</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 3 -->
<div id="projects/3d.html" class="col-md-6 col-sm-12 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/resine.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Forme pittoriche<br>tridimensionali</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 4 -->
<div id="projects/steel.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/visi.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Steel</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 5 -->
<div id="projects/artdesign.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/loop.gif" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Art Design</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 6 -->
<div id="projects/musticatower.html" class="col-md-6 col-sm-12 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/scultura2.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Mustica Tower</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 7 -->
<div id="projects/unstoppable.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/land_rover.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Unstoppable spirit</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 8 -->
<div id="projects/timeline.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/nino.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Profilo</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 9 -->
<div id="projects/video.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/video.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Video Opere</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 10 -->
<div class="col-md-3 col-sm-6 portolio-item">
<div class="portfolio-img"><img src="assets/images/installazioni.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Contatti</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- For Project Expander -->
<div class="final-nav"></div>
</div>
I'm using Bootstrap 3 + Isotope v1.5.25
Solved! Using packery-mode https://packery.metafizzy.co/
var container = jQuery('#portfolio-grid');
container.isotope({
itemSelector: '.portolio-item',
packery: {
gutter: 0
}
});
HTML
<script src="assets/js/portfolio.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="assets/js/packery-mode.pkgd.min.js"></script>
I am using equalizer with a nested equalizer to make an article object with a nested <h2> object the same height in a grid layout.
So all <article> elements are the same height, and all <h2> elements within the articles are the same height.
http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
As long as the grid layout does not expand to a second line, everything works fine and equalizer does its thing.
But the second the grid layout expands to a second line equalizer sets height to
height="inherit"
And both <article> and <h2> (within the articles) elements lose their equal height.
I have also tried to put the h2 element inside a div element and have data-equalizer-watch="sub2" on this, but gives same result.
<div id="siteContent" class="row" data-equalizer="sub1">
<div data-equalizer="sub2">
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">Super long headline if u believe. Let the force guide you</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</a>
</div>
<div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
<a href="#">
<article>
<time datetime="2015-12-31" pubdate="pubdate"></time>
<h2 data-equalizer-watch="sub2">headline</h2>
<div>
<p>News category<span> <span>2015-12-31</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</a>
</div>
</div>
</div>
Hope someone can help
I'm using the Cycle JS 2 jQuery plugin but it doesn't seem to be sliding correctly when clicking the "Prev" or "Next" buttons.
Update: I am trying to get it to slide all 4 sections at once, hence that is why 4 sections using col-sm-3 are contained within each .item block.
CodePen: http://codepen.io/gutterboy/pen/MaZyZx
HTML:
<div id="main-slider" class="slider">
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="control">
Prev |
Next
</div>
</div>
CSS:
.slider {
margin: 20px;
}
.content-wrap {
display: block;
//height: 400px;
text-decoration: none;
}
.image {
height: 175px;
overflow: hidden;
img {
height: 100%;
}
}
.details {
padding: 20px 10px;
background-color: #fff;
color: #000;
h4 {
font-size: 18px;
font-weight: bold;
}
.sub-title {
font-size: 16px;
}
.text {
font-size: 14px;
}
}
.control {
padding-top: 50px;
text-align: center;
}
JS:
$(document).ready(function() {
$('#main-slider').cycle({
paused: true,
autoHeight: 'calc',
slides: '> .item',
fx: 'scrollHorz',
next: '.control .next',
prev: '.control .prev',
sync: true
});
});
What am I doing wrong here?
I have a sneaky suspicion it has something to do with using Bootstrap columns on the items inside the slides, but not sure how to fix it.
I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>